Add m-esr52 at 52.6.0

2150 files changed, 100236 insertions, 0 deletions

diff --git a/layout/reftests/w3c-css/LICENSE b/layout/reftests/w3c-css/LICENSE
new file mode 100644
index 000000000..91a1c7fe4
--- /dev/null
+++ b/layout/reftests/w3c-css/LICENSE
@@ -0,0 +1,27 @@
+W3C 3-clause BSD License
+------------------------
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions
+are met:
+
+ * Redistributions of works must retain the original copyright notice,
+   this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the original copyright
+   notice, this list of conditions and the following disclaimer in the
+   documentation and/or other materials provided with the distribution.
+ * Neither the name of the W3C nor the names of its contributors may be
+   used to endorse or promote products derived from this work without
+   specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/layout/reftests/w3c-css/README b/layout/reftests/w3c-css/README
new file mode 100644
index 000000000..29c854de3
--- /dev/null
+++ b/layout/reftests/w3c-css/README
@@ -0,0 +1,34 @@
+W3C CSS Test Suite Directory
+----------------------------
+
+This directory is for tests that are sync'ed with the official
+W3C CSS test suites at http://test.csswg.org/.
+ 
+submitted/ is for tests that are to be submitted to W3C.
+This directory is sync'ed automatically with the
+contributors/mozilla/submitted/mozilla-central-reftests/
+directory in the CSSWG repository. The master copy is Mozilla's.
+
+received/ is for tests that are received from W3C.
+This directory is sync'ed semi-automatically with the approved/
+directory in the CSSWG repository. The master copy is CSSWG's.
+Don't make changes here; they'll be overwritten by the next sync.
+
+import-tests.py automatically imports tests from a cloned hg repository
+of csswg tests, located at hg.csswg.org/test. Note that this will
+remove everything in the received/ directory when run, so don't
+store anything in there.
+
+failures.list is a list of reftests that fail in mozilla's
+implementation of a given css module. Since the tests in are
+checked-in to the mozilla tree after import, they are run in
+the same manner as all other reftests in the tree. Thus, these
+tests are marked as fails() when included in the reftest.list
+file, so that new imports will not reawaken old oranges.
+
+Legal Stuff
+-----------
+ 
+These files are copyright by W3C and/or the author listed in the test
+file. They are available under the BSD 3-clause license; see LICENSE
+or http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html
diff --git a/layout/reftests/w3c-css/failures.list b/layout/reftests/w3c-css/failures.list
new file mode 100644
index 000000000..7999a7aeb
--- /dev/null
+++ b/layout/reftests/w3c-css/failures.list
@@ -0,0 +1,165 @@
+# LIST OF REFTEST FAILURES FROM IMPORTS
+#
+# The syntax of this file is as follows:
+#    1) All lines marked with a '#' are comments.
+#    2) A failure is denoted by <failure-type>* (as described in
+#       layout/tools/reftest/README.txt) and a path pattern starting
+#       with module. E.g.:
+#       fails css-values-3/attr-*.html
+#
+# If a test matches multiple path pattern, the last one wins. Because
+# of this, an item could have zero <failure-type>, which indicates it
+# is expected to pass, and override failure rule above it.
+
+# focus-within
+needs-focus selectors-4/focus-within-00*.html
+pref(dom.webcomponents.enabled,true) needs-focus selectors-4/focus-within-shadow-*.html
+
+# Bug 1208113
+fails needs-focus selectors-4/focus-within-shadow-001.html
+
+# Fuzzy
+fuzzy-if(OSX,40,6) css-values-3/ch-unit-001.html
+
+# Bug 435426
+fails css-values-3/attr-*.html
+      css-values-3/attr-*-invalid-fallback.html
+      css-values-3/attr-invalid-type-???.html
+
+# Bug 1256575
+fails css-values-3/calc-in-media-queries-???.html
+
+# because of dynamic change
+skip css-values-3/vh_not_refreshing_on_chrome.html
+skip css-values-3/vh_not_refreshing_on_chrome_iframe.html
+
+# because of support files (in iframe subdir) not being copied (bug 1256580)
+skip css-values-3/vh-support-transform-origin.html
+skip css-values-3/vh-support-transform-translate.html
+
+# Fuzzy annotations for multicol tests are due to AA differences.
+# Fails annotations need to be triaged later. (Bug 1299006)
+fails css-multicol-1/multicol-block-clip-001.xht
+fails css-multicol-1/multicol-block-clip-002.xht
+fails css-multicol-1/multicol-br-inside-avoidcolumn-001.xht
+fails css-multicol-1/multicol-break-000.xht
+fails css-multicol-1/multicol-break-001.xht
+fuzzy(116,1008) css-multicol-1/multicol-clip-001.xht
+fuzzy(116,702) css-multicol-1/multicol-clip-002.xht
+fuzzy(116,467) css-multicol-1/multicol-collapsing-001.xht
+fuzzy(87,180) css-multicol-1/multicol-columns-001.xht
+fuzzy(87,180) css-multicol-1/multicol-columns-002.xht
+fuzzy(87,180) css-multicol-1/multicol-columns-003.xht
+fuzzy(87,180) css-multicol-1/multicol-columns-004.xht
+fuzzy(87,180) css-multicol-1/multicol-columns-005.xht
+fuzzy(87,180) css-multicol-1/multicol-columns-006.xht
+fuzzy(87,180) css-multicol-1/multicol-columns-007.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) css-multicol-1/multicol-columns-invalid-001.xht
+fails-if(OSX||winWidget) css-multicol-1/multicol-columns-invalid-002.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) css-multicol-1/multicol-columns-toolong-001.xht
+fuzzy(116,530) css-multicol-1/multicol-containing-001.xht
+fuzzy(215,241) css-multicol-1/multicol-containing-002.xht
+fuzzy(87,180) css-multicol-1/multicol-count-001.xht
+fails css-multicol-1/multicol-count-002.xht
+fails css-multicol-1/multicol-count-computed-001.xht
+fails css-multicol-1/multicol-count-computed-002.xht
+fails css-multicol-1/multicol-count-computed-003.xht
+fuzzy-if(winWidget||OSX||gtkWidget,112,861) fails-if(Android) css-multicol-1/multicol-count-computed-004.xht
+fails css-multicol-1/multicol-count-computed-005.xht
+fails css-multicol-1/multicol-count-large-001.xht
+fuzzy(255,132) css-multicol-1/multicol-count-large-002.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) css-multicol-1/multicol-count-negative-001.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) css-multicol-1/multicol-count-negative-002.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) css-multicol-1/multicol-count-non-integer-001.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) css-multicol-1/multicol-count-non-integer-002.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) css-multicol-1/multicol-count-non-integer-003.xht
+fuzzy(116,80) css-multicol-1/multicol-fill-auto-002.xht
+fuzzy(116,3270) css-multicol-1/multicol-fill-auto-003.xht
+fails css-multicol-1/multicol-fill-auto.xht
+fuzzy(116,80) css-multicol-1/multicol-fill-balance-001.xht
+fuzzy(116,821) css-multicol-1/multicol-gap-000.xht
+fuzzy(255,290) css-multicol-1/multicol-gap-001.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) css-multicol-1/multicol-gap-002.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) css-multicol-1/multicol-gap-003.xht
+fuzzy(107,1823) css-multicol-1/multicol-gap-fraction-001.xht
+fuzzy-if(winWidget||OSX||gtkWidget,204,1048) fuzzy-if(skiaContent,208,1048) fails-if(Android) css-multicol-1/multicol-gap-large-001.xht
+fuzzy(225,920) css-multicol-1/multicol-gap-large-002.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) css-multicol-1/multicol-gap-negative-001.xht
+fails css-multicol-1/multicol-height-block-child-001.xht
+fuzzy(255,3762) css-multicol-1/multicol-inherit-001.xht
+fuzzy(116,1893) css-multicol-1/multicol-inherit-002.xht
+fails css-multicol-1/multicol-inherit-003.xht
+fails css-multicol-1/multicol-inherit-004.xht
+fuzzy(96,264) css-multicol-1/multicol-list-item-001.xht
+fuzzy(73,1200) css-multicol-1/multicol-margin-001.xht
+fuzzy(73,1200) css-multicol-1/multicol-margin-002.xht
+fuzzy(243,3322) fuzzy-if(skiaContent,244,3322) css-multicol-1/multicol-margin-child-001.xht
+fuzzy(255,4008) css-multicol-1/multicol-nested-002.xht
+fuzzy(255,4109) css-multicol-1/multicol-nested-005.xht
+fuzzy(204,2463) fuzzy-if(skiaContent,208,2463) css-multicol-1/multicol-nested-margin-001.xht
+fails-if(OSX||winWidget) css-multicol-1/multicol-nested-margin-002.xht
+fuzzy(204,2371) fuzzy-if(skiaContent,208,2371) css-multicol-1/multicol-nested-margin-003.xht
+fuzzy(225,2529) css-multicol-1/multicol-nested-margin-004.xht
+fuzzy(225,2529) css-multicol-1/multicol-nested-margin-005.xht
+fuzzy(116,142) css-multicol-1/multicol-overflow-000.xht
+fuzzy(204,1844) fuzzy-if(skiaContent,208,1844) css-multicol-1/multicol-overflowing-001.xht
+fuzzy-if(OSX,61,2) fuzzy-if(skiaContent,64,2) css-multicol-1/multicol-reduce-000.xht
+fuzzy-if(OSX,8,20) css-multicol-1/multicol-rule-000.xht
+fuzzy(116,1584) css-multicol-1/multicol-rule-001.xht
+fails css-multicol-1/multicol-rule-002.xht
+fails-if(OSX||winWidget) css-multicol-1/multicol-rule-003.xht
+fails-if(OSX||winWidget) css-multicol-1/multicol-rule-color-001.xht
+fuzzy(106,354) css-multicol-1/multicol-rule-dashed-000.xht
+fuzzy(106,354) css-multicol-1/multicol-rule-dotted-000.xht
+fuzzy(106,354) css-multicol-1/multicol-rule-double-000.xht
+fails-if(OSX||winWidget) css-multicol-1/multicol-rule-fraction-001.xht
+fails-if(OSX||winWidget) css-multicol-1/multicol-rule-fraction-002.xht
+fails css-multicol-1/multicol-rule-fraction-003.xht
+fuzzy(106,354) css-multicol-1/multicol-rule-groove-000.xht
+fuzzy(94,256) css-multicol-1/multicol-rule-hidden-000.xht
+fuzzy(106,354) css-multicol-1/multicol-rule-inset-000.xht
+fuzzy(106,354) css-multicol-1/multicol-rule-outset-000.xht
+fails css-multicol-1/multicol-rule-px-001.xht
+fuzzy(106,354) css-multicol-1/multicol-rule-ridge-000.xht
+fuzzy(106,354) css-multicol-1/multicol-rule-solid-000.xht
+fails css-multicol-1/multicol-rule-stacking-001.xht
+fails css-multicol-1/multicol-shorthand-001.xht
+fails css-multicol-1/multicol-span-000.xht
+fails css-multicol-1/multicol-span-all-001.xht
+fails css-multicol-1/multicol-span-all-002.xht
+fails css-multicol-1/multicol-span-all-003.xht
+fails css-multicol-1/multicol-span-all-child-001.xht
+fails-if(OSX||winWidget) css-multicol-1/multicol-span-all-child-002.xht
+fails css-multicol-1/multicol-span-all-margin-001.xht
+fails css-multicol-1/multicol-span-all-margin-002.xht
+fails css-multicol-1/multicol-span-all-margin-bottom-001.xht
+fails css-multicol-1/multicol-span-all-margin-nested-001.xht
+fails css-multicol-1/multicol-span-all-margin-nested-002.xht
+fails css-multicol-1/multicol-span-all-margin-nested-003.xht
+fails css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht
+fails css-multicol-1/multicol-span-float-001.xht
+fails css-multicol-1/multicol-span-none-001.xht
+fails css-multicol-1/multicol-table-cell-001.xht
+fails css-multicol-1/multicol-table-cell-height-001.xht
+fails css-multicol-1/multicol-table-cell-height-002.xht
+fails css-multicol-1/multicol-table-cell-vertical-align-001.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) css-multicol-1/multicol-width-002.xht
+fails css-multicol-1/multicol-width-count-002.xht
+fails css-multicol-1/multicol-width-ems-001.xht
+fails css-multicol-1/multicol-width-negative-001.xht
+fuzzy(225,1060) css-multicol-1/multicol-width-large-001.xht
+fails css-multicol-1/multicol-width-small-001.xht
+fuzzy(225,1060) css-multicol-1/multicol-width-invalid-001.xht
+fuzzy(225,1060) css-multicol-1/multicol-width-large-002.xht
+fails css-multicol-1/multicol-zero-height-001.xht
+fuzzy(225,13600) css-multicol-1/multicol-nested-column-rule-001.xht
+fuzzy(94,256) css-multicol-1/multicol-rule-none-000.xht
+
+#This test seems to pass only on Linux-opt build, fails on everything else
+#Therefore using fuzzy annotation as a catch all
+fuzzy(255,2808) css-multicol-1/multicol-rule-large-001.xht
+
+#Fails because column-span property not implemented (Bug 616436)
+fails css-multicol-1/multicol-fill-auto-block-children-001.xht
+fails css-multicol-1/multicol-fill-auto-block-children-002.xht
+fails css-multicol-1/multicol-span-all-block-sibling-003.xht
diff --git a/layout/reftests/w3c-css/import-tests.py b/layout/reftests/w3c-css/import-tests.py
new file mode 100755
index 000000000..1a631e2be
--- /dev/null
+++ b/layout/reftests/w3c-css/import-tests.py
@@ -0,0 +1,365 @@
+#!/usr/bin/python
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+import os
+from optparse import OptionParser
+from subprocess import Popen, PIPE
+import xml.dom.minidom
+import html5lib
+import fnmatch
+import shutil
+import sys
+import re
+
+# FIXME:
+#   * Import more tests rather than just the very limited set currently
+#     chosen.
+#   * Read in a (checked-in) input file with a list of test assertions
+#     expected to fail.
+#   * Read in a (checked-in) input file with a list of reference choices
+#     for tests with multiple rel="match" references.  (But still go
+#     though all those references in case they, in turn, have references.)
+
+# Eventually we should import all the tests that have references.  (At
+# least for a subset of secs.  And we probably want to organize the
+# directory structure by spec to avoid constant file moves when files
+# move in the W3C repository.  And we probably also want to import each
+# test only once, even if it covers more than one spec.)
+
+# But for now, let's just import a few sets of tests.
+
+gSubtrees = [
+    os.path.join("css-namespaces-3"),
+    os.path.join("css-conditional-3"),
+    os.path.join("css-values-3"),
+    os.path.join("css-multicol-1"),
+    os.path.join("selectors-4"),
+]
+
+gPrefixedProperties = [
+    "column-count",
+    "column-fill",
+    "column-gap",
+    "column-rule",
+    "column-rule-color",
+    "column-rule-style",
+    "column-rule-width",
+    "columns",
+    "column-span",
+    "column-width"
+]
+
+# Map of about:config prefs that need toggling, for a given test subdirectory.
+# Entries should look like:
+#  "$SUBDIR_NAME": "pref($PREF_NAME, $PREF_VALUE)"
+#
+# For example, when "@supports" was behind a pref, gDefaultPreferences had:
+#  "css3-conditional": "pref(layout.css.supports-rule.enabled,true)"
+gDefaultPreferences = {
+}
+
+gLog = None
+gFailList = []
+gDestPath = None
+gSrcPath = None
+support_dirs_mapped = set()
+filemap = {}
+speclinkmap = {}
+propsaddedfor = []
+tests = []
+gOptions = None
+gArgs = None
+gTestfiles = []
+gTestFlags = {}
+
+def to_unix_path_sep(path):
+    return path.replace('\\', '/')
+
+def log_output_of(subprocess):
+    global gLog
+    subprocess.wait()
+    if (subprocess.returncode != 0):
+        raise StandardError("error while running subprocess")
+    gLog.write(subprocess.stdout.readline().rstrip())
+
+def write_log_header():
+    global gLog, gSrcPath
+    gLog.write("Importing revision: ")
+    log_output_of(Popen(["hg", "parent", "--template={node}"],
+                  stdout=PIPE, cwd=gSrcPath))
+    gLog.write("\nfrom repository: ")
+    log_output_of(Popen(["hg", "paths", "default"],
+                  stdout=PIPE, cwd=gSrcPath))
+    gLog.write("\n")
+
+def remove_existing_dirs():
+    global gDestPath
+    # Remove existing directories that we're going to regenerate.  This
+    # is necessary so that we can give errors in cases where our import
+    # might copy two files to the same location, which we do by giving
+    # errors if a copy would overwrite a file.
+    for dirname in os.listdir(gDestPath):
+        fulldir = os.path.join(gDestPath, dirname)
+        if not os.path.isdir(fulldir):
+            continue
+        shutil.rmtree(fulldir)
+
+def populate_test_files():
+    global gSubtrees, gTestfiles
+    excludeDirs = ["support", "reftest", "reference", "reports", "tools"]
+    for subtree in gSubtrees:
+        for dirpath, dirnames, filenames in os.walk(subtree, topdown=True):
+            for exclDir in excludeDirs:
+                if exclDir in dirnames:
+                    dirnames.remove(exclDir)
+            for f in filenames:
+                if f == "README" or \
+                   f.find("-ref.") != -1:
+                    continue
+                gTestfiles.append(os.path.join(dirpath, f))
+
+    gTestfiles.sort()
+
+def copy_file(test, srcfile, destname, isSupportFile=False):
+    global gDestPath, gLog, gSrcPath
+    if not srcfile.startswith(gSrcPath):
+        raise StandardError("Filename " + srcfile + " does not start with " + gSrcPath)
+    logname = srcfile[len(gSrcPath):]
+    gLog.write("Importing " + to_unix_path_sep(logname) +
+               " to " + to_unix_path_sep(destname) + "\n")
+    destfile = os.path.join(gDestPath, destname)
+    destdir = os.path.dirname(destfile)
+    if not os.path.exists(destdir):
+        os.makedirs(destdir)
+    if os.path.exists(destfile):
+        raise StandardError("file " + destfile + " already exists")
+    copy_and_prefix(test, srcfile, destfile, gPrefixedProperties, isSupportFile)
+
+def copy_support_files(test, dirname):
+    global gSrcPath
+    if dirname in support_dirs_mapped:
+        return
+    support_dirs_mapped.add(dirname)
+    support_dir = os.path.join(dirname, "support")
+    if not os.path.exists(support_dir):
+        return
+    for dirpath, dirnames, filenames in os.walk(support_dir):
+        for srcname in filenames:
+            if srcname == "LOCK":
+                continue
+            full_srcname = os.path.join(dirpath, srcname)
+            destname = to_unix_path_sep(os.path.relpath(full_srcname, gSrcPath))
+            copy_file(test, full_srcname, destname, True)
+
+def map_file(srcname):
+    global gSrcPath
+    srcname = to_unix_path_sep(os.path.normpath(srcname))
+    if srcname in filemap:
+        return filemap[srcname]
+    destname = to_unix_path_sep(os.path.relpath(srcname, gSrcPath))
+    destdir = os.path.dirname(destname)
+    filemap[srcname] = destname
+    load_flags_for(srcname, destname)
+    copy_file(destname, srcname, destname, False)
+    copy_support_files(destname, os.path.dirname(srcname))
+    return destname
+
+def load_flags_for(srcname, destname):
+    global gTestFlags
+    gTestFlags[destname] = []
+
+    if not (is_html(srcname) or is_xml(srcname)):
+        return
+    document = get_document_for(srcname)
+    for meta in document.getElementsByTagName("meta"):
+        name = meta.getAttribute("name")
+        if name == "flags":
+            gTestFlags[destname] = meta.getAttribute("content").split()
+
+def is_html(fn):
+    return fn.endswith(".htm") or fn.endswith(".html")
+
+def is_xml(fn):
+    return fn.endswith(".xht") or fn.endswith(".xml") or fn.endswith(".xhtml") or fn.endswith(".svg")
+
+def get_document_for(srcname):
+    document = None # an xml.dom.minidom document
+    if is_html(srcname):
+        # An HTML file
+        f = open(srcname, "rb")
+        parser = html5lib.HTMLParser(tree=html5lib.treebuilders.getTreeBuilder("dom"))
+        document = parser.parse(f)
+        f.close()
+    else:
+        # An XML file
+        document = xml.dom.minidom.parse(srcname)
+    return document
+
+def add_test_items(srcname):
+    if not (is_html(srcname) or is_xml(srcname)):
+        map_file(srcname)
+        return None
+    document = get_document_for(srcname)
+    refs = []
+    notrefs = []
+    for link in document.getElementsByTagName("link"):
+        rel = link.getAttribute("rel")
+        if rel == "match":
+            arr = refs
+        elif rel == "mismatch":
+            arr = notrefs
+        else:
+            continue
+        if str(link.getAttribute("href")) != "":
+            arr.append(os.path.join(os.path.dirname(srcname), str(link.getAttribute("href"))))
+        else:
+            gLog.write("Warning: href attribute found empty in " + srcname + "\n")
+    if len(refs) > 1:
+        raise StandardError("Need to add code to specify which reference we want to match.")
+    for ref in refs:
+        tests.append(["==", map_file(srcname), map_file(ref)])
+    for notref in notrefs:
+        tests.append(["!=", map_file(srcname), map_file(notref)])
+    # Add chained references too
+    for ref in refs:
+        add_test_items(ref)
+    for notref in notrefs:
+        add_test_items(notref)
+
+AHEM_FONT_PATH = os.path.normpath(
+    os.path.join(os.path.dirname(__file__), "../fonts/Ahem.ttf"))
+AHEM_DECL_CONTENT = """@font-face {{
+  font-family: Ahem;
+  src: url("{}");
+}}"""
+AHEM_DECL_HTML = """<style type="text/css">
+""" + AHEM_DECL_CONTENT + """
+</style>
+"""
+AHEM_DECL_XML = """<style type="text/css"><![CDATA[
+""" + AHEM_DECL_CONTENT + """
+]]></style>
+"""
+
+def copy_and_prefix(test, aSourceFileName, aDestFileName, aProps, isSupportFile=False):
+    global gTestFlags
+    newFile = open(aDestFileName, 'wb')
+    unPrefixedFile = open(aSourceFileName, 'rb')
+    testName = aDestFileName[len(gDestPath)+1:]
+    ahemFontAdded = False
+    for line in unPrefixedFile:
+        replacementLine = line
+        searchRegex = "\s*<style\s*"
+
+        if not isSupportFile and not ahemFontAdded and 'ahem' in gTestFlags[test] and re.search(searchRegex, line):
+            # First put our ahem font declation before the first <style>
+            # element
+            template = AHEM_DECL_HTML if is_html(aDestFileName) else AHEM_DECL_XML
+            ahemPath = os.path.relpath(AHEM_FONT_PATH, os.path.dirname(aDestFileName))
+            newFile.write(template.format(to_unix_path_sep(ahemPath)))
+            ahemFontAdded = True
+
+        for prop in aProps:
+            replacementLine = re.sub(r"([^-#]|^)" + prop + r"\b", r"\1-moz-" + prop, replacementLine)
+
+        newFile.write(replacementLine)
+
+    newFile.close()
+    unPrefixedFile.close()
+
+def read_options():
+    global gArgs, gOptions
+    op = OptionParser()
+    op.usage = \
+    '''%prog <clone of hg repository>
+            Import reftests from a W3C hg repository clone. The location of
+            the local clone of the hg repository must be given on the command
+            line.'''
+    (gOptions, gArgs) = op.parse_args()
+    if len(gArgs) != 1:
+        op.error("Too few arguments specified.")
+
+def setup_paths():
+    global gSubtrees, gDestPath, gSrcPath
+    # FIXME: generate gSrcPath with consistent trailing / regardless of input.
+    # (We currently expect the argument to have a trailing slash.)
+    gSrcPath = gArgs[0]
+    if not os.path.isdir(gSrcPath) or \
+    not os.path.isdir(os.path.join(gSrcPath, ".hg")):
+        raise StandardError("source path does not appear to be a mercurial clone")
+
+    gDestPath = os.path.join(os.path.dirname(os.path.realpath(__file__)), "received")
+    newSubtrees = []
+    for relPath in gSubtrees:
+        newSubtrees[len(gSubtrees):] = [os.path.join(gSrcPath, relPath)]
+    gSubtrees = newSubtrees
+
+def setup_log():
+    global gLog
+    # Since we're going to commit the tests, we should also commit
+    # information about where they came from.
+    gLog = open(os.path.join(gDestPath, "import.log"), "wb")
+
+def read_fail_list():
+    global gFailList
+    dirname = os.path.realpath(__file__).split(os.path.sep)
+    dirname = os.path.sep.join(dirname[:len(dirname)-1])
+    with open(os.path.join(dirname, "failures.list"), "rb") as f:
+        for line in f:
+            line = line.strip()
+            if not line or line.startswith("#"):
+                continue
+            items = line.split()
+            pat = re.compile(fnmatch.translate(items.pop()))
+            gFailList.append((pat, items))
+
+def main():
+    global gDestPath, gLog, gTestfiles, gTestFlags, gFailList
+    read_options()
+    setup_paths()
+    read_fail_list()
+    setup_log()
+    write_log_header()
+    remove_existing_dirs()
+    populate_test_files()
+
+    for t in gTestfiles:
+        add_test_items(t)
+
+    listfile = open(os.path.join(gDestPath, "reftest.list"), "wb")
+    listfile.write("# THIS FILE IS AUTOGENERATED BY {0}\n# DO NOT EDIT!\n".format(os.path.basename(__file__)))
+    lastDefaultPreferences = None
+    for test in tests:
+        defaultPreferences = gDefaultPreferences.get(test[1].split("/")[0], None)
+        if defaultPreferences != lastDefaultPreferences:
+            if defaultPreferences is None:
+                listfile.write("\ndefault-preferences\n\n")
+            else:
+                listfile.write("\ndefault-preferences {0}\n\n".format(defaultPreferences))
+            lastDefaultPreferences = defaultPreferences
+        key = 1
+        while not test[key] in gTestFlags.keys() and key < len(test):
+            key = key + 1
+        testType = test[key - 1]
+        testFlags = gTestFlags[test[key]]
+        # Replace the Windows separators if any. Our internal strings
+        # all use the system separator, however the failure/skip lists
+        # and reftest.list always use '/' so we fix the paths here.
+        test[key] = to_unix_path_sep(test[key])
+        test[key + 1] = to_unix_path_sep(test[key + 1])
+        testKey = test[key]
+        if 'ahem' in testFlags:
+            test = ["HTTP(../../..)"] + test
+        fail = []
+        for pattern, failureType in gFailList:
+            if pattern.match(testKey):
+                fail = failureType
+        test = fail + test
+        listfile.write(" ".join(test) + "\n")
+    listfile.close()
+
+    gLog.close()
+
+if __name__ == '__main__':
+    main()
diff --git a/layout/reftests/w3c-css/received/README b/layout/reftests/w3c-css/received/README
new file mode 100644
index 000000000..478ec34b5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/README
@@ -0,0 +1,5 @@
+W3C CSS Test Suite Import Directory
+-----------------------------------
+
+This directory contains reftests pulled from the CSSWG test repository
+using ../import-tests.py .
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-001.html b/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-001.html
new file mode 100644
index 000000000..49fd608dd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Test: DESCRIPTION OF TEST</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
+  <link rel="match" href="reference/background-lime.html">
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media">
+  <meta name="assert" content="Whitespace after the MEDIA_SYM token is optional (S*).">
+  <style>
+   @media{ body { background: lime; color: black; } }
+  </style>
+ </head>
+ <body>
+   This page should have a light green background.
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-002.html b/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-002.html
new file mode 100644
index 000000000..7ae37f5bf
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-media-whitespace-optional-002.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Test: DESCRIPTION OF TEST</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
+  <link rel="match" href="reference/background-lime.html">
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media">
+  <meta name="assert" content="Whitespace after the MEDIA_SYM token is optional (S*).">
+  <style>
+   @media(min-width:0px){ body { background: lime; color: black; } }
+  </style>
+ </head>
+ <body>
+   This page should have a light green background.
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001-ref.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001-ref.html
new file mode 100644
index 000000000..a8157aa75
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Reftest Reference</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<style>
+			div {
+				background-color:green;
+				height:100px;
+				width:100px;
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001.html
new file mode 100644
index 000000000..7e6b21f6d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-001.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<head>
+	<title>CSS Test (Conditional Rules): Support for simple passing conditions in @supports</title>
+	<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+	<link rel="author" href="http://opera.com" title="Opera Software ASA">
+	<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+	<link rel="match" href="at-supports-001-ref.html">
+	<meta name="flags" content="">
+	<style>
+		div {
+			background-color:red;
+			height:100px;
+			width:100px;
+		}
+		@supports (margin: 0) {
+			div { background-color:green; }
+		}
+	</style>
+</head>
+<body>
+	<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+	<div>
+	</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-002.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-002.html
new file mode 100644
index 000000000..d4b59ff36
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-002.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Support for @supports within @media</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@media all {
+				@supports (margin: 0) {
+					div { background-color:green; }
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-003.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-003.html
new file mode 100644
index 000000000..c138bbc30
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-003.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Support for @media within @supports</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin: 0) {
+				@media all{
+					div { background-color:green; }
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-004.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-004.html
new file mode 100644
index 000000000..6b9cf6f6b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-004.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): @supports within non-matching @media should not apply</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin:0) { div { background-color:green; } }
+			@media not all {
+				@supports (margin: 0) {
+					div { background-color:red; }
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-005.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-005.html
new file mode 100644
index 000000000..67329e365
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-005.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): non-matching @media within @supports should not apply</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin:0) { div { background-color:green; } }
+			@supports (margin: 0) {
+				@media not all {
+					div { background-color:red; }
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-006.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-006.html
new file mode 100644
index 000000000..f5c646106
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-006.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Nested parens around conditions in @supports should work</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports ((margin: 0)) {
+				div { background-color:green; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-007.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-007.html
new file mode 100644
index 000000000..a8184274f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-007.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Conjunctions of passing simple conditions in @supports should pass</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports ((margin: 0) and (display:inline-block !important)) {
+				div { background-color:green; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-008.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-008.html
new file mode 100644
index 000000000..f53b40c82
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-008.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Disjunctions with at least a passing simple condition in @supports should pass</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports ((margin: 0) or (foo: 15em)) {
+				div { background-color:green; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-009.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-009.html
new file mode 100644
index 000000000..ffe96f61a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-009.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Negations of failing simple conditions in @supports should pass</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (not (yadayada: x, calc( 2/3 ))) {
+				div { background-color:green; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-010.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-010.html
new file mode 100644
index 000000000..d3716718c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-010.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Combinations of conjuctions, disjunctions, and negations of simple conditions in @supports should work</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports ((yada: 2kg !trivial) or ((not (foo:bar)) and (((visibility:hidden))))) {
+				div { background-color:green; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-011.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-011.html
new file mode 100644
index 000000000..02e744e4b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-011.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Conditions not enclosed in parens in @supports should not work</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin:0) { div { background-color:green; } }
+			@supports margin: 0 {
+				div { background-color:red; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-012.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-012.html
new file mode 100644
index 000000000..8a30ead2f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-012.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Conjunctions with more than two terms in @supports should work</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports ((margin: 0) and (background: blue) and (padding:inherit)) {
+				div { background-color:green; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-013.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-013.html
new file mode 100644
index 000000000..619da8411
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-013.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Disjunction with more than two terms in @supports should work</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports ((yoyo: yaya) or (margin: 0) or (answer: 42)) {
+				div { background-color:green; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-014.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-014.html
new file mode 100644
index 000000000..c26d8057d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-014.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Negations in @supports should not work if "not" isn't follow by a space</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (width: 0) {
+				div { background-color:green; }
+			}
+			@supports not(foo: baz) {
+				div { background-color:red; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-015.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-015.html
new file mode 100644
index 000000000..fe3d5e561
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-015.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Bizarre syntax that still conforms to the core grammar should succesfully parse in @supports</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (not (foo: baz !unrelated $ ,/[&])) {
+				div { background-color:green; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-016.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-016.html
new file mode 100644
index 000000000..f8feaa470
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-016.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): In @supports, parens are required to mix conjunctions with disjunctions</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div{
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin:0) { div { background-color:green; } }
+			@supports ((margin: 0) and (display: inline) or (width:1em)) {
+				div { background-color:red; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-017.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-017.html
new file mode 100644
index 000000000..81cbe4553
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-017.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): In @supports, functions can be parsed successfully</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (background: url("http://www.example.com/foo.jpg")) {
+				div { background-color:green; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-018.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-018.html
new file mode 100644
index 000000000..88bcedec9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-018.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): In @supports conditions, the arguments of a function can begin with spaces</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="">
+		<style>
+			div {
+				background:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (not (width:compute( 2px + 2px ))) {
+				div { background-color:green; }
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-019.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-019.html
new file mode 100644
index 000000000..7e6bf448d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-019.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin: ) {
+				div { background-color:red !important; }
+			}
+			@supports (margin:0) { div { background-color:green; } }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-020.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-020.html
new file mode 100644
index 000000000..eed31e5ea
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-020.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin: 2px) ) {
+				div { background-color:red !important; }
+			}
+			@supports (margin:0) { div { background-color:green; } }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-021.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-021.html
new file mode 100644
index 000000000..a3fdc83cc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-021.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin:0 );
+			@supports (margin:0) { div { background-color:green; } }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-022.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-022.html
new file mode 100644
index 000000000..ec41734b4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-022.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports [margin: 0] {
+				div { background-color:red !important; }
+			}
+			@supports (margin:0) { div { background-color:green; } }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-023.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-023.html
new file mode 100644
index 000000000..e3df4f6f7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-023.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in nested @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@media all {
+				@supports (width: 0)) {}
+				@supports (margin:0) { div { background-color:green !important; } }
+			}
+			div { background-color:red; }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-024.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-024.html
new file mode 100644
index 000000000..94827ff53
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-024.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports;
+			@supports (margin:0) { div { background-color:green; } }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-025.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-025.html
new file mode 100644
index 000000000..e7079ee5c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-025.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports ((margin:0) and [padding:0]) {
+				div { background-color:red !important; }
+			}
+			@supports (margin:0) { div { background-color:green; } }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-026.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-026.html
new file mode 100644
index 000000000..842a0ad66
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-026.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin: 0]) {
+				div { background-color:red !important; }
+			}
+			@supports (margin:0) { div { background-color:green; } }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027-ref.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027-ref.html
new file mode 100644
index 000000000..9d1fbaaf4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Reftest Reference</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<style>
+			div {
+				background-color:green;
+				height:100px;
+				width:100px;
+			}
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027.html
new file mode 100644
index 000000000..11a0ed1f0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-027.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-027-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			@supports (margin:0) { div { background-color:green; } }
+			div {
+				height:100px;
+				width:100px;
+			}
+			@supports (margin: 0)
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-028.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-028.html
new file mode 100644
index 000000000..3abc95ebd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-028.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin: 0)) {}
+			@supports (margin:0) { div { background-color:green; } }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-029.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-029.html
new file mode 100644
index 000000000..b78a711fe
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-029.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-027-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			@supports (margin:0) { div { background-color:green; } }
+			div {
+				height:100px;
+				width:100px;
+			}
+			@supports (margin: 0) !
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-030.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-030.html
new file mode 100644
index 000000000..a2b66cfa6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-030.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin:0) { div { background-color:green; } }
+			@supports ((margin: 0) and ;
+			div { background-color:red; }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-031.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-031.html
new file mode 100644
index 000000000..2b4621d49
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-031.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports (margin: 0)) ;
+			@supports (margin:0) { div { background-color:green; } }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-032.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-032.html
new file mode 100644
index 000000000..d53deb175
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-032.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports {}
+			@supports (margin:0) { div { background-color:green; } }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-033.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-033.html
new file mode 100644
index 000000000..d2c682fb8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-033.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+	<head>
+		<title>CSS Test (Conditional Rules): Incorrect syntax in @supports recovers properly</title>
+		<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+		<link rel="author" href="http://opera.com" title="Opera Software ASA">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<style>
+			div {
+				background-color:red;
+				height:100px;
+				width:100px;
+			}
+			@supports ;
+			@supports (margin:0) { div { background-color:green; } }
+		</style>
+	</head>
+	<body>
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+		<div></div>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-034.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-034.html
new file mode 100644
index 000000000..d9b9612ee
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-034.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title>
+		<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'.">
+
+    <!--
+
+    supports_condition_in_parens
+      : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+        general_enclosed
+      ;
+
+    -->
+
+		<style>
+			div
+			{
+				background-color: red;
+				height: 100px;
+				width: 100px;
+			}
+
+			@supports (margin: 0 or padding: 0) {	div {background-color: red !important;} }
+
+			@supports (margin: 0) { div {background-color: green;} }
+		</style>
+	</head>
+
+	<body>
+
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+		<div></div>
+
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-035.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-035.html
new file mode 100644
index 000000000..23a706b32
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-035.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title>
+		<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'.">
+
+    <!--
+
+    supports_condition_in_parens
+      : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+        general_enclosed
+      ;
+
+    -->
+
+		<style>
+			div
+			{
+				background-color: red;
+				height: 100px;
+				width: 100px;
+			}
+
+			@supports (margin: 0) { div {background-color: green;} }
+
+			@supports (margin: 0 or padding: 0) {	div {background-color: red;} }
+		</style>
+	</head>
+
+	<body>
+
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+		<div></div>
+
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-036.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-036.html
new file mode 100644
index 000000000..f352d5dbc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-036.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title>
+		<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'.">
+
+    <!--
+
+    supports_condition_in_parens
+      : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+        general_enclosed
+      ;
+
+    -->
+
+		<style>
+			div
+			{
+				background-color: red;
+				height: 100px;
+				width: 100px;
+			}
+
+			@supports (margin: 0 and padding: 0)
+			{
+				div {background-color: red !important;}
+			}
+
+			@supports (margin: 0) { div {background-color: green;} }
+		</style>
+	</head>
+
+	<body>
+
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+		<div></div>
+
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-037.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-037.html
new file mode 100644
index 000000000..7f23db6fd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-037.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>CSS Test (Conditional Rules): Incorrect syntax of supports condition</title>
+		<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<meta name="assert" content="Each individual single supports condition must be enclosed by one opening parenthesis '(' and one closing parenthesis ')'.">
+
+    <!--
+
+    supports_condition_in_parens
+      : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+        general_enclosed
+      ;
+
+    -->
+
+		<style>
+			div
+			{
+				background-color: red;
+				height: 100px;
+				width: 100px;
+			}
+
+			@supports (margin: 0) { div {background-color: green;} }
+
+			@supports (margin: 0 and padding: 0) {	div {background-color: red;}	}
+
+		</style>
+	</head>
+
+	<body>
+
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+		<div></div>
+
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-038.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-038.html
new file mode 100644
index 000000000..868a1e1f9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-038.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>CSS Test (Conditional Rules): a supports condition declaration can not end with a semi-colon</title>
+		<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<meta name="assert" content="Each individual single supports condition declaration can not end up with a semi-colon ';'. A semi-colon is a punctuation separator of multiple CSS declarations and thus is not part of an individual CSS declaration per se.">
+
+    <!--
+
+    supports_condition_in_parens
+      : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+        general_enclosed
+      ;
+
+    -->
+
+		<style>
+			div
+			{
+				background-color: red;
+				height: 100px;
+				width: 100px;
+			}
+
+			@supports (margin: 0;) { div {background-color: red !important;} }
+
+			@supports (margin: 0) { div {background-color: green;} }
+		</style>
+	</head>
+
+	<body>
+
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+		<div></div>
+
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/at-supports-039.html b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-039.html
new file mode 100644
index 000000000..58e7ac2f0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/at-supports-039.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>CSS Test (Conditional Rules): a supports condition declaration can not end with a semi-colon</title>
+		<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+		<link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" title="6. Feature queries: the '@supports' rule">
+		<link rel="match" href="at-supports-001-ref.html">
+		<meta name="flags" content="invalid">
+		<meta name="assert" content="Each individual single supports condition declaration can not end up with a semi-colon ';'. A semi-colon is a punctuation separator of multiple CSS declarations and thus is not part of an individual CSS declaration per se.">
+
+    <!--
+
+    supports_condition_in_parens
+      : ( '(' S* supports_condition ')' S* ) | supports_declaration_condition |
+        general_enclosed
+      ;
+
+    -->
+
+		<style>
+			div
+			{
+				background-color: red;
+				height: 100px;
+				width: 100px;
+			}
+
+			@supports (margin: 0) { div {background-color: green;} }
+
+			@supports (margin: 0;) { div {background-color: red;}	}
+		</style>
+	</head>
+
+	<body>
+
+		<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+
+		<div></div>
+
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-conditional-3/reference/background-lime.html b/layout/reftests/w3c-css/received/css-conditional-3/reference/background-lime.html
new file mode 100644
index 000000000..fcb243c7f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-conditional-3/reference/background-lime.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS Test Reference</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
+  <style>
+   body { background: lime; color: black; }
+  </style>
+ </head>
+ <body>
+   This page should have a light green background.
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-001.html b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-001.html
new file mode 100644
index 000000000..684b77b17
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-001.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<!-- Submitted from TestTWF Paris -->
+<head>
+	<meta charset="utf-8">
+	<title>CSS Test: Multi-column element via -moz-columns: [integer]</title>
+	<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
+	<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
+	<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
+	<link rel="match" href="reference/multicol-basic-ref.html"/>
+	<meta name="flags" content="ahem"/>
+	<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact">
+
+<style type="text/css">
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+</style>
+	<style type="text/css">
+		.multicol-wrapper>*{
+			font-family: Ahem;
+		}
+
+		div.multicol-wrapper{
+			border: thin solid black;
+			display: inline-block;
+			margin: 1em auto;
+			width: 360px;
+		}
+
+		.multicol-basic-ref{
+			background: yellow;
+			width: 360px;
+			-moz-columns: 3;
+			-moz-column-gap: 0;
+			-moz-column-rule: none;
+		}
+
+		.multicol-basic-ref-item{
+			background: #000;
+		}
+
+		.item-1{
+			background: purple;
+			color: purple;
+		}
+
+		.item-2{
+			background: orange;
+			color: orange;
+		}
+
+		.item-3{
+			background: blue;
+			color: blue;
+		}
+	</style>
+</head>
+<body>
+<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
+<div class="multicol-wrapper">
+	<div class="multicol-basic-ref">
+		<span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+		<span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+		<span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+	</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-002.html b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-002.html
new file mode 100644
index 000000000..76d55ac98
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-002.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<!-- Submitted from TestTWF Paris -->
+<head>
+	<meta charset="utf-8">
+	<title>CSS Test: Multi-column element via -moz-column-count: [integer]</title>
+	<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
+	<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
+	<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
+	<link rel="match" href="reference/multicol-basic-ref.html"/>
+	<meta name="flags" content="ahem"/>
+	<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact">
+
+<style type="text/css">
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+</style>
+	<style type="text/css">
+		.multicol-wrapper>*{
+			font-family: Ahem;
+		}
+
+		div.multicol-wrapper{
+			border: thin solid black;
+			display: inline-block;
+			margin: 1em auto;
+			width: 360px;
+		}
+
+		.multicol-basic-ref{
+			background: yellow;
+			width: 360px;
+			-moz-column-count: 3;
+			-moz-column-gap: 0;
+			-moz-column-rule: none;
+		}
+
+		.multicol-basic-ref-item{
+			background: #000;
+		}
+
+		.item-1{
+			background: purple;
+			color: purple;
+		}
+
+		.item-2{
+			background: orange;
+			color: orange;
+		}
+
+		.item-3{
+			background: blue;
+			color: blue;
+		}
+	</style>
+</head>
+<body>
+<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
+<div class="multicol-wrapper">
+	<div class="multicol-basic-ref">
+		<span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+		<span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+		<span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+	</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-003.html b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-003.html
new file mode 100644
index 000000000..49838534b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-003.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<!-- Submitted from TestTWF Paris -->
+<head>
+	<meta charset="utf-8">
+	<title>CSS Test: Multi-column element via -moz-columns: [width]</title>
+	<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
+	<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
+	<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
+	<link rel="match" href="reference/multicol-basic-ref.html"/>
+	<meta name="flags" content="ahem"/>
+	<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact">
+
+<style type="text/css">
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+</style>
+	<style type="text/css">
+		.multicol-wrapper>*{
+			font-family: Ahem;
+		}
+
+		div.multicol-wrapper{
+			border: thin solid black;
+			display: inline-block;
+			margin: 1em auto;
+			width: 360px;
+		}
+
+		.multicol-basic-ref{
+			background: yellow;
+			width: 360px;
+			-moz-columns: 120px;
+			-moz-column-gap: 0;
+			-moz-column-rule: none;
+		}
+
+		.multicol-basic-ref-item{
+			background: #000;
+		}
+
+		.item-1{
+			background: purple;
+			color: purple;
+		}
+
+		.item-2{
+			background: orange;
+			color: orange;
+		}
+
+		.item-3{
+			background: blue;
+			color: blue;
+		}
+	</style>
+</head>
+<body>
+<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
+<div class="multicol-wrapper">
+	<div class="multicol-basic-ref">
+		<span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+		<span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+		<span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+	</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-004.html b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-004.html
new file mode 100644
index 000000000..102721bcf
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-basic-004.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<!-- Submitted from TestTWF Paris -->
+<head>
+	<meta charset="utf-8">
+	<title>CSS Test: Multi-column element via -moz-column-width: [width]</title>
+	<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
+	<link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/>
+	<link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/>
+	<link rel="match" href="reference/multicol-basic-ref.html"/>
+	<meta name="flags" content="ahem"/>
+	<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact">
+
+<style type="text/css">
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+</style>
+	<style type="text/css">
+		.multicol-wrapper>*{
+			font-family: Ahem;
+		}
+
+		div.multicol-wrapper{
+			border: thin solid black;
+			display: inline-block;
+			margin: 1em auto;
+			width: 360px;
+		}
+
+		.multicol-basic-ref{
+			background: yellow;
+			width: 360px;
+			-moz-column-width: 120px;
+			-moz-column-gap: 0;
+			-moz-column-rule: none;
+		}
+
+		.multicol-basic-ref-item{
+			background: #000;
+		}
+
+		.item-1{
+			background: purple;
+			color: purple;
+		}
+
+		.item-2{
+			background: orange;
+			color: orange;
+		}
+
+		.item-3{
+			background: blue;
+			color: blue;
+		}
+	</style>
+</head>
+<body>
+<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
+<div class="multicol-wrapper">
+	<div class="multicol-basic-ref">
+		<span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+		<span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+		<span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
+	</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001-ref.xht
new file mode 100644
index 000000000..5695c7fe7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001-ref.xht
@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  table
+  {
+  border-spacing: 0px;
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  }
+
+  td
+  {
+  padding: 0;
+  width: 3em;
+  }
+
+  td + td {width: 8em;}
+
+  img, td {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+  <table>
+    <tr>
+      <td><img src="support/swatch-blue.png" width="40" height="80" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="50" height="20" alt="Image download support must be enabled" /></td><td><img src="support/swatch-orange.png" width="40" height="80" alt="Image download support must be enabled" /></td>
+    </tr></table>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001.xht
new file mode 100644
index 000000000..d3093021e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-001.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: Overflowed content inside multicol element</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" />
+  <link rel="match" href="multicol-block-clip-001-ref.xht"/>
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that content in the normal flow that extends into column gaps is clipped in the middle of the column gap." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  border: gray solid 1em;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 1em;
+  }
+
+  h4
+  {
+  background: black;
+  color: black;
+  font: inherit;
+  margin: 0;
+  width: 11em;
+  }
+
+  #first-column {color: blue;}
+
+  #second-column {color: orange;}
+
+  #third-column, #fourth-column {color: white;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+    <span id="first-column"> ab cd ef gh </span>
+    <h4> 1234567890123 </h4>
+    <span id="second-column"> ij kl mn oq </span>
+    <span id="third-column"> ab cd ef gh </span>
+    <span id="fourth-column"> rs tu vw xy </span>
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002-ref.xht
new file mode 100644
index 000000000..b5ba3f467
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002-ref.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  font: 1.25em/1 serif;
+  border: 1em solid gray;
+  width: 11em;
+  height: 6em;
+  position: relative;
+  }
+
+  img {position: absolute;}
+
+  img#black {top: 4em;}
+
+  img#first-orange {top: 5em;}
+
+  img#second-orange {left: 4em;}
+
+  img#first-pink
+  {
+  left: 4em;
+  top: 3em;
+  }
+
+  img#second-pink {left: 8em;}
+
+  img#yellow
+  {
+  left: 8em;
+  top: 1em;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+	<img id="blue" src="support/swatch-blue.png" width="40" height="80" alt="Image download support must be enabled" />
+	<img id="black" src="support/black20x20.png" width="70" height="20" alt="Image download support must be enabled" />
+	<img id="first-orange" src="support/swatch-orange.png" width="40" height="20" alt="Image download support must be enabled" />
+	<img id="second-orange" src="support/swatch-orange.png" width="40" height="60" alt="Image download support must be enabled" />
+	<img id="first-pink" src="support/swatch-pink.png" width="40" height="60" alt="Image download support must be enabled" />
+	<img id="second-pink" src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" />
+	<img id="yellow" src="support/swatch-yellow.png" width="40" height="80" alt="Image download support must be enabled" />
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002.xht
new file mode 100644
index 000000000..42336ac77
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-block-clip-002.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: Overflowed content inside and outside multicol element</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" />
+  <link rel="match" href="multicol-block-clip-002-ref.xht"/>
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that content in the normal flow that extends into column gaps is clipped in the middle of the column gap." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  border: gray solid 1em;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 1em;
+  }
+
+  h4
+  {
+  background: black;
+  color: black;
+  font: inherit;
+  margin: 0;
+  width: 11em;
+  }
+
+  #first-column {color: blue;}
+
+  #second-column {color: orange;}
+
+  #third-column {color: pink;}
+
+  #fourth-column {color: yellow;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+    <span id="first-column"> ab cd ef gh </span>
+    <h4> 1234567890123 </h4>
+    <span id="second-column"> ij kl mn oq </span>
+    <span id="third-column"> ab cd ef gh </span>
+    <span id="fourth-column"> rs tu vw xy </span>
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-001.xht
new file mode 100644
index 000000000..28f8243ec
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-001.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicol | break-inside: avoid-column</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-breaks"/>
+<link rel="match" href="multicol-br-inside-avoidcolumn-ref.xht"/>
+<meta name="flags" content=""/>
+<style type="text/css"><![CDATA[
+html {
+	width: 800px;
+	background: white;
+}
+body {
+	background: black;
+	-moz-column-count: 3;
+	-moz-column-gap: 0;
+	-moz-column-fill: auto;
+	height: 300px;
+}
+h1 {
+	-moz-column-span: all;
+	color: white;
+}
+div { background: red;
+	height: 150px;
+	break-inside: avoid-column;
+}
+span {
+	float: left;
+}
+]]></style>
+</head>
+<body>
+<h1>You should not see the word FAIL</h1>
+
+<div>
+	<span>FAIL</span>
+</div>
+
+<div>
+	<span>FAIL</span>
+</div>
+
+<div>
+	<span>FAIL</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht
new file mode 100644
index 000000000..fc4655682
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicol | break-inside: avoid-column</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+html {
+	width: 800px;
+	background: white;
+}
+h1 {
+	color: white;
+	margin-top: 0;
+	padding-top: 0.66em;
+}
+div {
+	height: 450px;
+	background: black;
+	height: 300px;
+}
+]]></style>
+</head>
+<body>
+<div>
+	<h1>You should not see the word FAIL</h1>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000-ref.xht
new file mode 100644
index 000000000..45aec43bb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <meta name="flags" content="ahem image" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  margin-bottom: 0.5em;
+  font: 1.25em/1 Ahem;
+  height: 3em;
+  width: 10em;
+  }
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
+
+  <div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000.xht
new file mode 100644
index 000000000..5553069e7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-000.xht
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: break-after: column (basic)</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#break-before-break-after-break-inside" title="5.1. 'break-before', 'break-after', 'break-inside'" />
+  <link rel="match" href="multicol-break-000-ref.xht" />
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="This test checks that basic support of 'break-after: column'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#test, div#reference
+  {
+  background-color: yellow;
+  margin-bottom: 0.5em;
+  font: 1.25em/1 Ahem;
+  height: 3em;
+  width: 10em;
+  }
+
+  div#test
+  {
+  -moz-column-fill: auto;
+  -moz-column-gap: 0;
+  -moz-column-width: 2em;
+
+  /*
+
+  N == 5;
+
+  W == 2em;
+
+  */
+  }
+
+  div#test > div {break-after: column;}
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
+
+  <div id="test">
+      <div>A</div>
+      <div>B</div>
+      <div>C</div>
+  </div>
+
+  <div id="reference"><img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001-ref.xht
new file mode 100644
index 000000000..742d0ecf8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001-ref.xht
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-14 -->
+  <meta name="flags" content="ahem image" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  margin-bottom: 0.5em;
+  font: 1.25em/1 Ahem;
+  height: 3em;
+  width: 10em;
+  }
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
+
+  <div>&nbsp; <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
+
+  <div>&nbsp; <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001.xht
new file mode 100644
index 000000000..245a7ea32
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-break-001.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: break-before: column (basic)</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-14 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#break-before-break-after-break-inside" title="5.1. 'break-before', 'break-after', 'break-inside'" />
+  <link rel="match" href="multicol-break-001-ref.xht" />
+  <meta name="flags" content="ahem image" />
+  <meta name="assert" content="This test checks that basic support of 'break-before: column'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#test, div#reference
+  {
+  background-color: yellow;
+  margin-bottom: 0.5em;
+  font: 1.25em/1 Ahem;
+  height: 3em;
+  width: 10em;
+  }
+
+  div#test
+  {
+  -moz-column-fill: auto;
+  -moz-column-gap: 0;
+  -moz-column-width: 2em;
+
+  /*
+
+  N == 5;
+
+  W == 2em;
+
+  */
+  }
+
+  div#test > div {break-before: column;}
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
+
+  <div id="test">
+      <div>A</div>
+      <div>B</div>
+      <div>C</div>
+  </div>
+
+  <div id="reference">&nbsp; <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /> <img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001-ref.xht
new file mode 100644
index 000000000..d742ea716
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001-ref.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  width: 11em;
+  }
+
+  img
+  {
+  position: relative;
+  vertical-align: top;
+  }
+
+  img + img {left: 3em;}
+
+  img + img + img {left: 6em;}
+  ]]></style>
+ </head>
+ <body>
+  <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" />
+    </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001.xht
new file mode 100644
index 000000000..c284be44f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-001.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: overflowed content inside and outside multicol element</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-24 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" />
+  <link rel="match" href="multicol-clip-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that content in the normal flow can extend into column gap before it reaches its middle. In this test, the 'l' and 'c' glyphs are painted into the left half of the column gap; the 'l' and 'e' glyphs extend outside the last column box at the edge of the multi-column and are therefore rendered thanks to the default 'overflow: visible' declaration." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background: white;
+  border: gray solid 1em;
+  color: blue;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 4em;
+  }
+
+  span {color: black;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+    <span>
+    bl ac
+    bl ac
+    </span>
+
+    <span>
+    bl ac
+    </span>
+    bl ue
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002-ref.xht
new file mode 100644
index 000000000..681166c38
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002-ref.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  width: 11em;
+  }
+
+  img
+  {
+  position: relative;
+  vertical-align: top;
+  }
+
+  img + img {left: 3em;}
+
+  img + img + img {left: 6em;}
+  ]]></style>
+ </head>
+ <body>
+  <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" />
+    </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002.xht
new file mode 100644
index 000000000..6a8340e75
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-clip-002.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: overflowed content inside and outside multicol element</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" />
+  <link rel="match" href="multicol-clip-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that content in the normal flow can extend into column gap before it reaches its middle. In this test, the 'l' and 'c' glyphs are painted into the left half of the column gap; the 'l' and 'e' glyphs extend outside the last column box at the edges of the multi-column and are therefore hidden thanks to the 'overflow: hidden' declaration." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background: white;
+  border: gray solid 1em;
+  color: blue;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  overflow: hidden;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 4em;
+  }
+
+  span {color: black;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+    <span>
+	bl ac
+	bl ac
+    </span>
+
+    <span>
+	bl ac
+    </span>
+	bl ue
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001-ref.xht
new file mode 100644
index 000000000..b5cd90c47
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001-ref.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  border: black solid 1px;
+  font: 1.25em/1 serif;
+  padding: 1em;
+  width: 8em;
+  }
+
+  img
+  {
+  position: relative;
+  vertical-align: top;
+  }
+
+  img + img + img {left: 2em;}
+  ]]></style>
+ </head>
+ <body>
+  <div><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" />
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001.xht
new file mode 100644
index 000000000..442ae4db5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-collapsing-001.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: no margin collapsing with its first child block box</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
+  <link rel="match" href="multicol-collapsing-001-ref.xht"/>
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that the top margin of the first child block box of a multicol element does not collapse with the margin top of such multicol element." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body > div
+  {
+  background-color: black;
+  border: black solid 1px;
+  font: 1.25em/1 Ahem;
+  width: 10em;
+  }
+
+  div > div
+  {
+  background-color: yellow;
+  color: black;
+  margin: 1em;
+  width: 8em;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 1em;
+  }
+
+  h4
+  {
+  font: inherit;
+  margin: 1em 0 0;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+    <div>
+	  <h4>ab cd</h4>
+      ef gh
+      ij kl
+      mn oq
+    </div>
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001-ref.xht
new file mode 100644
index 000000000..c136af493
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {width: 600px;}
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>d da d da d da d da d da d da dam&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; dame dame dame dame dame dame damerdamerdamerdamerdamerdamer<br />d da d da d da d da d da&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; dam&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dame dame dame dame dame &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; damerdamerdamerdamerdamer &nbsp;&nbsp;&nbsp;&nbsp;</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001.xht
new file mode 100644
index 000000000..9d601cac4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-001.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-columns: 100px 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {width: 600px;}
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+
+  -moz-columns: 100px 6;
+  -moz-column-gap: 0;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-002.xht
new file mode 100644
index 000000000..7fd153518
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-002.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-columns: 6 100px' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {width: 600px;}
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+
+  -moz-columns: 6 100px;
+  -moz-column-gap: 0;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-003.xht
new file mode 100644
index 000000000..212fb60da
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-003.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-columns: 100px auto' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {width: 600px;}
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+
+  -moz-columns: 100px auto;
+  -moz-column-gap: 0;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-004.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-004.xht
new file mode 100644
index 000000000..6b1ad5b5a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-004.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-columns: auto 100px' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {width: 600px;}
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+
+  -moz-columns: auto 100px;
+  -moz-column-gap: 0;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-005.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-005.xht
new file mode 100644
index 000000000..efc4030b8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-005.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-columns: 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties. '-moz-columns: 6' is equivalent to '-moz-column-width: auto' and '-moz-column-count: 6'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {width: 600px;}
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+
+  -moz-columns: 6;
+  -moz-column-gap: 0;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-006.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-006.xht
new file mode 100644
index 000000000..5546917c9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-006.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-columns: 6 auto' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {width: 600px;}
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+
+  -moz-columns: 6 auto;
+  -moz-column-gap: 0;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-007.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-007.xht
new file mode 100644
index 000000000..fab0816ef
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-007.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-columns shorthand (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-columns: auto 6' shorthand correctly set '-moz-column-width' and '-moz-column-count' properties." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {width: 600px;}
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+
+  -moz-columns: auto 6;
+  -moz-column-gap: 0;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001-ref.xht
new file mode 100644
index 000000000..5c8470bd4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001-ref.xht
@@ -0,0 +1,32 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  table
+  {
+  background-color: yellow;
+  border-spacing: 0px;
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  }
+
+  td {padding: 0 1em 0 0;}
+
+  img, td {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+  <table>
+    <tr>
+      <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+      <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+      <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+      <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+    </tr>
+  </table>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001.xht
new file mode 100644
index 000000000..363b7b93e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-001.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: invalid -moz-columns shorthand</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-invalid-001-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+  <meta name="assert" content="This test checks that '-moz-columns: 8 normal' is invalid (generating a parsing error) and therefore will be ignored." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0;
+  -moz-columns: 8 normal;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  bl ac
+    <span>
+    bl ue
+    </span>
+    <span>
+    bl ue
+    </span>
+  bl ac
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-002.xht
new file mode 100644
index 000000000..f6c4a39e3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-invalid-002.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+  <!--
+  Original, initial filename of this test was
+  multicol-columns-toolong-002.xht
+  and it should be filename-renamed
+  multicol-columns-invalid-002.xht
+  -->
+
+  <title>CSS Multi-column Layout Test: invalid -moz-columns shorthand</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-invalid-001-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+  <meta name="assert" content="This test checks that '-moz-columns: 8 auto 6em' is invalid (generating a parsing error) and therefore will be ignored." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0;
+  -moz-columns: 8 auto 6em;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  bl ac
+    <span>
+    bl ue
+    </span>
+    <span>
+    bl ue
+    </span>
+  bl ac
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-toolong-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-toolong-001.xht
new file mode 100644
index 000000000..8305ee358
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-columns-toolong-001.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: narrower inline content inside wider colum box</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-26 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-invalid-001-ref.xht"/>
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks the rendering of inline content (2em) inside wider (3em) column boxes." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  bl ac
+    <span>
+    bl ue
+    </span>
+    <span>
+    bl ue
+    </span>
+  bl ac
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001-ref.xht
new file mode 100644
index 000000000..f7c279d11
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001-ref.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  table
+  {
+  background-color: yellow;
+  border-spacing: 0px;
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  }
+
+  td {padding: 0 2em 0 0;}
+
+  img, td {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+  <table>
+    <tr>
+      <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+      <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+      <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+    </tr>
+  </table>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001.xht
new file mode 100644
index 000000000..0ba78986a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-001.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: a column box can not act as containing block for elements with 'position: absolute'</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
+  <link rel="match" href="multicol-containing-001-ref.xht"/>
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that a column box does not establish containing block for elements with 'position: absolute'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 0;
+  }
+
+  span
+  {
+  color: red;
+  position: absolute;
+  top: -1em;
+  }
+
+  /*
+  In this test, the initial containing block establishes containing block
+  for such red span. Therefore, the 2 short red stripes should be
+  positioned out of view, just outside the top edge of viewport.
+  */
+
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  bl ac
+  <span>re dd</span>
+  bl ac
+  bl ac
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002-ref.xht
new file mode 100644
index 000000000..226560601
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#inline-block
+  {
+  color: green;
+  display: inline-block;
+  font: 1.25em/1 Ahem;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div id="inline-block">
+
+      <div>4444 4444 4444 4444</div>
+      <div>1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;&nbsp;</div>
+      <div>1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;&nbsp;</div>
+      <div>4444 4444 4444 4444</div>
+      <div>1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1</div>
+      <div>1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1</div>
+      <div>1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;1 4444 4444</div>
+
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002.xht
new file mode 100644
index 000000000..e322b22c0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-containing-002.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: a multi-column can act as containing block for elements with 'position: absolute'</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
+  <link rel="match" href="multicol-containing-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that a multi-column element can establish containing block for elements with 'position: absolute'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: white;
+  color: green;
+  font: 1.25em/1 Ahem;
+  position: relative;
+  width: 19em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 1em;
+  }
+
+  span {color: red;}
+
+  img#white-overlapping
+  {
+  left: 11em;
+  position: absolute;
+  top: 1em;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>4444 1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 4444 1&nbsp;&nbsp; 1&nbsp;&nbsp; 1&nbsp;&nbsp; 4444 1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 4444 1&nbsp;&nbsp;1  1&nbsp;&nbsp;1  1&nbsp;&nbsp;1 4444 1<span>RED</span> 1<span>RED</span> 4444 &nbsp;&nbsp;&nbsp;1  &nbsp;&nbsp;&nbsp;1 4444 4444 1&nbsp;&nbsp; 1&nbsp;&nbsp; 4444 &nbsp;&nbsp;&nbsp;1  &nbsp;&nbsp;&nbsp;1 4444 <img id="white-overlapping" src="support/swatch-white.png" width="60" height="40" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-001.xht
new file mode 100644
index 000000000..e1438a8f7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-001.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-count (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" />
+  <link rel="match" href="multicol-columns-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that setting '-moz-column-count' should accordingly create 6 column boxes. In this test, each column box should be exactly 100px wide." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {width: 600px;}
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 6;
+  -moz-column-gap: 0;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002-ref.xht
new file mode 100644
index 000000000..f764c7cf9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002-ref.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  font: 1.25em/1 Ahem;
+  width: 21em;
+  }
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+ <div><img src="support/black20x20.png" width="420" height="20" alt="Image download support must be enabled" />
+
+ <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />
+
+ <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" />
+
+ <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" />
+
+ <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />
+
+ <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />
+
+ <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />
+
+ <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="support/black20x20.png" width="20" height="20" alt="Image download support must be enabled" />
+
+ <img src="support/black20x20.png" width="420" height="20" alt="Image download support must be enabled" />
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002.xht
new file mode 100644
index 000000000..6db119ecc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-002.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-count (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" />
+  <link rel="match" href="multicol-count-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that setting '-moz-column-count' should accordingly create 4 column boxes. In this test, each column box should be exactly 5em wide." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  html {background-color: white;}
+
+  body
+  {
+  background-color: black;
+  font: 1.25em/1 Ahem;
+  padding-right: 1em;
+  width: 20em;
+  }
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>55555 1&nbsp;&nbsp;&nbsp; 1 22&nbsp; 1 22&nbsp; 1&nbsp;&nbsp;&nbsp; 1 333 1 333 1 333 55555 55555 1&nbsp;&nbsp;&nbsp; 1 22&nbsp; 1 22&nbsp; 1&nbsp;&nbsp;&nbsp; 1 22&nbsp; 1 22&nbsp; 1 22&nbsp; 55555 55555 1&nbsp;&nbsp;&nbsp; 1 333 1 333 1&nbsp;&nbsp;&nbsp; 4444 4444 1&nbsp;&nbsp;&nbsp; 55555 55555 1&nbsp;&nbsp;&nbsp; 1 333 1 333 1&nbsp;&nbsp;&nbsp; 4444 4444 1&nbsp;&nbsp;&nbsp; 55555
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-001.xht
new file mode 100644
index 000000000..3ee348e9d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-001.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-rule</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/>
+<link rel="match" href="multicol-count-computed-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 12em;
+	widows: 1;
+	orphans: 1;
+
+	-moz-column-count: 3;
+	-moz-column-gap: 6em;
+	-moz-column-rule-color: blue;
+	-moz-column-rule-width: 1.5em;
+	-moz-column-rule-style: solid;
+}
+#pink {color: pink;}
+#orange {color: orange;}
+#purple {color: purple;}
+#grey {color: grey;}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<span id="pink">xxxx</span>
+	<span id="orange">xxxx</span>
+	<span id="purple">xxxx</span>
+	<span id="grey">xxxx</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-002.xht
new file mode 100644
index 000000000..482b537f4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-002.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-rule</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/>
+<link rel="match" href="multicol-count-computed-2-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 12em;
+	widows: 1;
+	orphans: 1;
+
+	-moz-column-count: 3;
+	-moz-column-gap: 7em;
+	-moz-column-rule-color: red;
+	-moz-column-rule-width: 1.5em;
+	-moz-column-rule-style: solid;
+}
+#pink {color: pink;}
+#orange {color: orange;}
+#purple {color: purple;}
+#grey {color: grey;}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<span id="pink">xxxx</span>
+	<span id="orange">xxxx</span>
+	<span id="purple">xxxx</span>
+	<span id="grey">xxxx</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003-ref.xht
new file mode 100644
index 000000000..51668fbd4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003-ref.xht
@@ -0,0 +1,25 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 -->
+  <meta name="flags" content="image" />
+
+  <style type="text/css"><![CDATA[
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/swatch-gray.png" width="300" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="70" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="15" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="35" height="20" alt="Image download support must be enabled" /><img src="support/swatch-purple.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="70" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="15" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="35" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="300" height="20" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003.xht
new file mode 100644
index 000000000..a41fe6d8a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-003.xht
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule and overflow inside (complex test)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-count-computed-003-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should be partially clipped and overlapped partially by 1st -moz-column-rule." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 13em;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 5em;
+  -moz-column-rule-color: blue;
+  -moz-column-rule-style: solid;
+  -moz-column-rule-width: 1.5em;
+  }
+
+  /*
+  (11)  if (-moz-column-width = auto) and (-moz-column-count != auto) then
+  (12)    N := -moz-column-count;
+  (13)    W := max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  (14)  exit;
+
+  So, the used -moz-column-count in this test is 3.
+
+  W := max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (13em - ((3 - 1) * 5em)) / 3);
+  W == max(0, (13em - (2 * 5em)) / 3);
+  W == max(0, (13em - (10em)) / 3);
+  W == max(0, (3em) / 3);
+  W == max(0, 1em);
+  W == 1em;
+
+  So, the used -moz-column-width in this test is 1em.
+  */
+
+  #pink {color: pink;}
+  #orange {color: orange;}
+  #purple {color: purple;}
+  #gray {color: gray;}
+
+  /*
+  Since
+  "
+  Content in the normal flow that extends into
+  column gaps (e.g., long words or images) is
+  clipped in the middle of the column gap.
+  "
+  http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements
+  this causes the right-half (0.5em) of the 'K' glyph to
+  be overlapped by the right-half (0.75em) of the 1st blue -moz-column-rule.
+  Same thing should happen to the 'N' glyph of 'ORAN'.
+
+  Because no inline content should be rendered into the
+  3rd column box, this causes the 2nd column rule not
+  been rendered because
+  "
+  Column rules are only drawn between two -moz-columns that
+  both have content.
+  "
+  http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules
+  */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	<span id="pink">PINK</span>
+	<span id="orange">ORAN</span>
+	<span id="purple">PURP</span>
+	<span id="gray">GRAY</span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004-ref.xht
new file mode 100644
index 000000000..def8e5083
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004-ref.xht
@@ -0,0 +1,25 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-29 -->
+  <meta name="flags" content="image" />
+
+  <style type="text/css"><![CDATA[
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/swatch-gray.png" width="280" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-purple.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="280" height="20" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004.xht
new file mode 100644
index 000000000..9dfc5dcde
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-004.xht
@@ -0,0 +1,52 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: both '-moz-column-width' and '-moz-column-count' are 'auto'</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />  <!-- 2013-07-29 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
+  <link rel="match" href="multicol-count-computed-004-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that if '-moz-column-width' is 'auto' and if '-moz-column-count' is 'auto', then such element will not behave like a multi-column element and -moz-column-gap and -moz-column-rule declarations will be ignored." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-count: auto;
+  -moz-column-gap: 7em;
+  -moz-column-rule-color: red;
+  -moz-column-rule-width: 1.5em;
+  -moz-column-rule-style: solid;
+  }
+
+  #pink {color: pink;}
+  #orange {color: orange;}
+  #purple {color: purple;}
+  #gray {color: gray;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	<span id="pink">Pink</span>
+	<span id="orange">oran</span>
+	<span id="purple">PurP</span>
+	<span id="gray">gray</span>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-005.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-005.xht
new file mode 100644
index 000000000..8648fff76
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-005.xht
@@ -0,0 +1,97 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule and overflow inside (complex test)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-03 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-count-computed-003-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that if one of 2 adjacent column boxes (2nd and 3rd colum box in this test) does not have any content, then the column rule separating those should not be drawn. In this test, the 3rd colum box should have no inline content. This test also checks that inline content in the normal flow that extends into a column gap should be clipped in the middle of the column gap. So, in this test, inline content in 1st column box should be partially clipped and overlapped partially by 1st -moz-column-rule." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 13em;
+
+  -moz-column-gap: 5em;
+  -moz-column-rule-color: blue;
+  -moz-column-rule-style: solid;
+  -moz-column-rule-width: 1.5em;
+  -moz-column-width: 1em;
+  }
+
+  /*
+  (15)  if (-moz-column-width != auto) and (-moz-column-count = auto) then
+  (16)    N := max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap)));
+  (17)    W := ((available-width + -moz-column-gap) / N) - -moz-column-gap;
+  (18)  exit;
+
+  N := max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap)));
+  N == max(1, floor((13em + 5em) / (1em + 5em)));
+  N == max(1, floor(18em / 6em));
+  N == max(1, floor(3));
+  N == 3;
+
+  So, the used -moz-column-count in this test is 3.
+
+  W := ((available-width + -moz-column-gap) / N) - -moz-column-gap;
+  W == ((13em + 5em) / 3) - 5em;
+  W == ((18em) / 3) - 5em;
+  W == (6em) - 5em;
+  W == 1em;
+
+  So, the used -moz-column-width in this test is 1em.
+  */
+
+  #pink {color: pink;}
+  #orange {color: orange;}
+  #purple {color: purple;}
+  #gray {color: gray;}
+
+  /*
+  Since
+  "
+  Content in the normal flow that extends into
+  column gaps (e.g., long words or images) is
+  clipped in the middle of the column gap.
+  "
+  http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements
+  this causes the right-half (0.5em) of the 'K' glyph to
+  be overlapped by the right-half (0.75em) of the 1st blue -moz-column-rule.
+  Same thing should happen to the 'N' glyph of 'ORAN'.
+
+  Because no inline content should be rendered into the
+  3rd column box, this causes the 2nd column rule not
+  been rendered because
+  "
+  Column rules are only drawn between two -moz-columns that
+  both have content.
+  "
+  http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules
+  */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	<span id="pink">PINK</span>
+	<span id="orange">ORAN</span>
+	<span id="purple">PURP</span>
+	<span id="gray">GRAY</span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-2-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-2-ref.xht
new file mode 100644
index 000000000..fdb8dab05
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-2-ref.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-rule</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 12em;
+	height: 2em;
+	position: relative;
+	widows: 1;
+	orphans: 1;
+}
+#pink {color: pink;}
+#orange {color: orange;}
+#purple {color: purple;}
+#grey {color: grey;}
+span {
+	display: block;
+	position: absolute;
+}
+#orange {
+	left: 5em;
+	top: 0;
+}
+#purple {
+	left: 0;
+	top: 1em;
+}
+#grey {
+	left: 5em;
+	top: 1em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<span id="purple">xxxx</span>
+	<span id="orange">xxxx</span>
+	<span id="grey">xxxx</span>
+	<span id="pink">xxxx</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-ref.xht
new file mode 100644
index 000000000..89dfe7045
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-computed-ref.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-rule</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 12em;
+	height: 2em;
+	position: relative;
+	widows: 1;
+	orphans: 1;
+
+}
+span {
+	display: block;
+	position: absolute;
+}
+#pink {
+	color: pink;
+}
+#orange {
+	color: orange;
+	left: 0;
+	top: 1em;
+}
+#purple {
+	color: purple;
+	left: 9em;
+	top: 0;
+}
+#grey {
+	color: grey;
+	left: 9em;
+	top: 1em;
+}
+#blue {
+	left: 5.25em;
+	top: 0;
+	width: 1.5em;
+	height: 2em;
+	background: blue;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<span id="pink">xxxx</span>
+	<span id="orange">xxxx</span>
+	<span id="purple">xxxx</span>
+	<span id="grey">xxxx</span>
+	<span id="blue"></span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-001.xht
new file mode 100644
index 000000000..1af66c104
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-001.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-count</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/>
+<link rel="match" href="multicol-count-large-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: red;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 12em;
+	orphans: 1;
+	widows: 1;
+
+	-moz-column-count: 1000;
+	-moz-column-gap: 0;
+}
+span {
+	color: black;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	xx xx
+	xx xx
+	xx xx
+	<span>xx xx</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-002.xht
new file mode 100644
index 000000000..275da208b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-002.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-count</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/>
+<link rel="match" href="multicol-count-large-2-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 12em;
+	orphans: 1;
+	widows: 1;
+
+	-moz-column-count: 1000;
+	-moz-column-gap: 0;
+}
+span {
+	color: blue;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	xx xx
+	<span>xx xx</span>
+	xx xx
+	<span>xx xx</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-2-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-2-ref.xht
new file mode 100644
index 000000000..47b8b4445
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-2-ref.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-count</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 12em;
+	height: 1em;
+	position: relative;
+	orphans: 1;
+	widows: 1;
+}
+span {
+	color: blue;
+	background: blue;
+	width: 2em;
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<span>x</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-ref.xht
new file mode 100644
index 000000000..c6a604c34
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-large-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-count</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 12em;
+	height: 1em;
+	orphans: 1;
+	widows: 1;
+
+}
+]]></style>
+</head>
+
+<body>
+
+<div>xx</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-001.xht
new file mode 100644
index 000000000..9c546ebdc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-001.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: negative '-moz-column-count' value</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-invalid-001-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+  <meta name="assert" content="This test checks that a specified negative '-moz-column-count' value is invalid and ignored." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-count: 4;
+  -moz-column-count: -1;
+  -moz-column-gap: 0;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	bl ac
+  <span>
+	bl ue
+  </span>
+  <span>
+	bl ue
+  </span>
+	bl ac
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-002.xht
new file mode 100644
index 000000000..63c9633a7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-negative-002.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: zero '-moz-column-count' value</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-columns-invalid-001-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+  <meta name="assert" content="This test checks that a specified 0 '-moz-column-count' value is invalid and ignored." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-count: 4;
+  -moz-column-count: 0; /* invalid; must be a greater-than-zero integer */
+  -moz-column-gap: 0;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	bl ac
+  <span>
+	bl ue
+  </span>
+  <span>
+	bl ue
+  </span>
+	bl ac
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-001.xht
new file mode 100644
index 000000000..f000b3034
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-001.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: non-integer '-moz-column-count' value</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '&lt;integer&gt;' type" />
+  <link rel="match" href="multicol-columns-invalid-001-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+  <meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-count: 4;
+  -moz-column-count: 2.1; /* invalid; must be an integer */
+  -moz-column-gap: 0;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	bl ac
+  <span>
+	bl ue
+  </span>
+  <span>
+	bl ue
+  </span>
+	bl ac
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-002.xht
new file mode 100644
index 000000000..452010f45
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-002.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: non-integer '-moz-column-count' value</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '&lt;integer&gt;' type" />
+  <link rel="match" href="multicol-columns-invalid-001-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+  <meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-count: 4;
+  -moz-column-count: 1.9; /* invalid; must be an integer */
+  -moz-column-gap: 0;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	bl ac
+  <span>
+	bl ue
+  </span>
+  <span>
+	bl ue
+  </span>
+	bl ac
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-003.xht
new file mode 100644
index 000000000..f38696ef9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-count-non-integer-003.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: non-integer '-moz-column-count' value</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#integers" title="4.1. Integers: the '&lt;integer&gt;' type" />
+  <link rel="match" href="multicol-columns-invalid-001-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+  <meta name="assert" content="This test checks that a specified real '-moz-column-count' value is invalid and ignored." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-count: 4;
+  -moz-column-count: 2.0; /* invalid; must be an integer */
+  -moz-column-gap: 0;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	bl ac
+  <span>
+	bl ue
+  </span>
+  <span>
+	bl ue
+  </span>
+	bl ac
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000-ref.xht
new file mode 100644
index 000000000..f1cc7ab1e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000-ref.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  table
+  {
+  background-color: yellow;
+  border-spacing: 0em;
+  color: lime;
+  margin: 1em 0em;
+  font: 1.25em/1 Ahem;
+  table-layout: fixed;
+  width: 18em;
+  }
+
+  td {padding: 0em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 3 horizontal bars are <strong>identical</strong>.</p>
+
+  <table>
+    <tr>
+      <td>G</td>
+      <td>H</td>
+      <td>I</td>
+    </tr>
+  </table>
+
+  <table>
+    <tr>
+      <td>G</td>
+      <td>H</td>
+      <td>I</td>
+    </tr>
+  </table>
+
+  <table>
+    <tr>
+      <td>G</td>
+      <td>H</td>
+      <td>I</td>
+    </tr>
+  </table>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000.xht
new file mode 100644
index 000000000..e7c249cd0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-000.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-fill: balance (basic)</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
+  <link rel="match" href="multicol-fill-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that content is balanced into all -moz-columns thanks to '-moz-column-fill: balance'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div.test, table#reference
+  {
+  background-color: yellow;
+  color: lime;
+  margin: 1em 0em;
+  font: 1.25em/1 Ahem;
+  width: 18em;
+  }
+
+  div.test
+  {
+  -moz-columns: 3;
+  -moz-column-fill: balance;
+  -moz-column-gap: 0em;
+
+  /*
+
+  N == 3;
+
+  W == 6em;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+
+  div.test > p {margin: 0em;}
+
+  table
+  {
+  border-spacing: 0em;
+  table-layout: fixed;
+  }
+
+  td {padding: 0em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 3 horizontal bars are <strong>identical</strong>.</p>
+
+  <div class="test">
+      <p>A</p>
+      <p>B</p>
+      <p>C</p>
+  </div>
+
+  <div class="test">D<br />E<br />F</div>
+
+  <table id="reference">
+    <tr>
+      <td>G</td>
+      <td>H</td>
+      <td>I</td>
+    </tr>
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001-ref.xht
new file mode 100644
index 000000000..29dca1299
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001-ref.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  table
+  {
+  background-color: yellow;
+  border-spacing: 0em;
+  color: lime;
+  font: 1.25em/1 Ahem;
+  height: 5em;
+  margin: 1em 0em;
+  table-layout: fixed;
+  width: 20em;
+  }
+
+  td
+  {
+  padding: 0em;
+  vertical-align: top;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 rectangles are <strong>identical</strong>.</p>
+
+  <table>
+    <tr>
+      <td>G<br />H<br />I</td>
+      <td>J<br />K<br />L</td>
+    </tr>
+  </table>
+
+  <table>
+    <tr>
+      <td>G<br />H<br />I</td>
+      <td>J<br />K<br />L</td>
+    </tr>
+  </table>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001.xht
new file mode 100644
index 000000000..57b83f95e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-001.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-fill: balance with set height (basic)</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
+  <link rel="match" href="multicol-fill-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that content is balanced into all -moz-columns of a multi-column element with a set height thanks to '-moz-column-fill: balance'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#test, table#reference
+  {
+  background-color: yellow;
+  color: lime;
+  font: 1.25em/1 Ahem;
+  height: 5em;
+  margin: 1em 0em;
+  width: 20em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-fill: balance;
+  -moz-column-gap: 0em;
+
+  /*
+
+  N == 2;
+
+  W == 10em;
+
+  */
+  }
+
+  table
+  {
+  border-spacing: 0em;
+  table-layout: fixed;
+  }
+
+  td
+  {
+  padding: 0em;
+  vertical-align: top;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 rectangles are <strong>identical</strong>.</p>
+
+  <div id="test">A<br />B<br />C<br />D<br />E<br />F</div>
+
+  <table id="reference">
+    <tr>
+      <td>G<br />H<br />I</td>
+      <td>J<br />K<br />L</td>
+    </tr>
+  </table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001-ref.xht
new file mode 100644
index 000000000..0d203cacb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  color: black;
+  font: 1.25em/1 Ahem;
+  float: left;
+  width: 10em;
+  margin-right: 1em;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>1 22 333
+  4444 55555
+  666666
+  7777777
+  999999999
+  1 22 333
+  4444 55555
+  666666
+  7777777
+  999999999</div>
+
+  <div>1 22 333
+  4444 55555
+  666666
+  7777777
+  999999999</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001.xht
new file mode 100644
index 000000000..b6c6c70b3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-001.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-fill: auto' (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-07-30 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
+  <link rel="match" href="multicol-fill-auto-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-column-fill: auto' fills the column boxes of a multi-colum element sequentially with inline content and does not bother about balancing content of column boxes." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  color: black;
+  font: 1.25em/1 Ahem;
+  height: 10em;
+  orphans: 1;
+  widows: 1;
+  width: 32em;
+
+  -moz-column-count: 3;
+  -moz-column-fill: auto;
+  -moz-column-gap: 1em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>1 22 333 4444 55555 666666 7777777 999999999 1 22 333 4444 55555 666666 7777777 999999999 1 22 333 4444 55555 666666 7777777 999999999</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002-ref.xht
new file mode 100644
index 000000000..654b14aca
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002-ref.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-fill-auto</title>
+<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1.25em;
+	line-height: 1em;
+	color: green;
+	height: 3em;
+	width: 2em;
+	orphans: 1;
+	widows: 1;
+	position: relative;
+	margin: 1em;
+}
+div.col {
+	-moz-column-count: 2;
+	-moz-column-fill: auto;
+	-moz-column-gap: 0;
+}
+div.red {
+	background: red; position: absolute; z-index: -1;
+}
+]]></style>
+</head>
+
+<body>
+
+<div class='ref'>
+oo<br/>t<br/>o
+</div>
+
+<div class='ref'>
+oo<br/>t<br/>o
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002.xht
new file mode 100644
index 000000000..d8834b151
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-002.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-fill-auto</title>
+<meta name="assert" content="This test checks that -moz-columns are not balanced when '-moz-column-fill: auto' is set"/>
+<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/>
+<link rel="match" href="multicol-fill-auto-002-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1.25em;
+	line-height: 1em;
+	color: green;
+	height: 3em;
+	width: 2em;
+	orphans: 1;
+	widows: 1;
+	position: relative;
+	margin: 1em;
+}
+div.col {
+	-moz-column-count: 2;
+	-moz-column-fill: auto;
+	-moz-column-gap: 0;
+}
+div.red {
+	background: red; position: absolute; z-index: -1;
+}
+]]></style>
+</head>
+
+<body>
+
+<div class='col'>
+<div class='red' style="top: 0; left: 0; height: 3em; width: 1em;"></div>
+<div class='red' style="top: 0; left: 0; height: 1em; width: 2em;"></div>
+o<br/>t<br/>
+o<br/>t<br/>
+</div>
+
+<div class='ref'>
+oo<br/>t<br/>o
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003-ref.xht
new file mode 100644
index 000000000..4cd6efdea
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003-ref.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-01 -->
+  <meta name="flags" content="ahem image" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div {font: 1.25em/1 Ahem;}
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div><img src="support/swatch-green.png" width="460" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-green.png" width="220" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp; <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="100" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="100" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-green.png" width="60" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="80" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-green.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-green.png" width="460" height="20" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003.xht
new file mode 100644
index 000000000..3f9f371ec
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-003.xht
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-fill: auto' (basic)</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-01 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 '-moz-column-fill'" />
+  <link rel="match" href="multicol-fill-auto-003-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks if inline content fills column boxes sequentially when '-moz-column-fill' is set to 'auto'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-image: url("support/red20x20.png");
+  background-repeat: no-repeat;
+  background-position: 2em 4em;
+  border: green solid 1em;
+  color: green;
+  font: 1.25em/1 Ahem;
+  height: 6em;
+  width: 21em;
+
+  -moz-column-count: 2;
+  -moz-column-fill: auto;
+  -moz-column-gap: 1em;
+  -moz-column-rule: yellow solid 1em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is <strong>no red</strong>.</p>
+
+  <div>1234567890 12 4567 90 123 56 890 123 56789 1 34567 90 12 4567 90
+123 56 890 123 56</div>
+
+  <!--
+
+  Expected result:
+
+  ************  ************
+  |1234567890|  |123 56 890|
+  |12 4567 90|  |123 56    |
+  |123 56 890|  |          |
+  |123 56789 |  |          |
+  |1 34567 90|  |          |
+  |12 4567 90|  |          |
+  ************  ************
+
+  The digits are the green squares, the white squares
+  are the blank white spaces. The yellow vertical stripe
+  represent both the -moz-column-gap and the -moz-column-rule.
+  The "3" glyph at line 5 of 1st column box should be
+  overlapping the red square.
+
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-001.xht
new file mode 100644
index 000000000..89ecf5374
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-001.xht
@@ -0,0 +1,94 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicol | -moz-column-span: all | -moz-column-fill: auto</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/>
+<link rel="match" href="multicol-fill-auto-block-children-ref.xht"/>
+<meta name="flags" content=""/>
+<style type="text/css"><![CDATA[
+html {
+	background: white;
+}
+body {
+	background: blue;
+	width: 1200px;
+	height: 492px;
+	-moz-column-count: 3;
+	-moz-column-gap: 2em;
+	-moz-column-fill: auto;
+}
+h1 {
+	-moz-column-span: all;
+	font-size: 2em;
+	height: 70px;
+}
+dl {
+	font-size: 70%;
+	color: blue;
+	padding: 5px 10px 3px;
+	margin: 0 0 15px;
+	border: 2px solid blue;
+	height: 72px;
+}
+dt {
+	font-weight: bold;
+	font-style: normal;
+	width: 47%;
+	height: 100%;
+	float: left;
+}
+dd {
+	line-height: 120%;
+	padding: 0;
+	margin: 0 0 5px 47%;
+	width: 50%;
+}
+]]></style>
+</head>
+
+<body>
+<h1>you should not see the word fail</h1>
+
+<dl>
+	<dt>block1</dt>
+	<dd>block1 block1</dd>
+	<dd>block1 block1</dd>
+	<dd>block1 block1 block1</dd>
+	<dd>damer block1 block1</dd>
+</dl>
+
+<dl>
+	<dt>block2</dt>
+	<dd>block2 block2</dd>
+	<dd>block2 block2</dd>
+	<dd>block2 block2 block2</dd>
+	<dd>damer block2 block2</dd>
+</dl>
+
+<dl>
+	<dt>block3</dt>
+	<dd>block3 block3</dd>
+	<dd>block3 block3</dd>
+	<dd>block3 block3 block3</dd>
+	<dd>damer block3 block3</dd>
+</dl>
+
+<dl>
+	<dt>block4</dt>
+	<dd>block4 block4</dd>
+	<dd>block4 block4</dd>
+	<dd>block4 block4 block4</dd>
+	<dd>damer block4 block4</dd>
+</dl>
+
+<dl>
+	<dt>fail</dt>
+	<dd>fail fail</dd>
+	<dd>fail fail</dd>
+	<dd>fail fail fail</dd>
+	<dd>fail fail fail</dd>
+</dl>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002-ref.xht
new file mode 100644
index 000000000..f57fa4359
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002-ref.xht
@@ -0,0 +1,79 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  div
+  {
+  background-color: blue;
+  height: 200px;
+  width: 680px;
+  }
+
+  h1
+  {
+  color: white;
+  font-size: 2em;
+  line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */
+  margin-top: 8px; /* The margin-top of body and h1 will collapse into an 8px gap */
+  margin-bottom: 21px;
+  padding-top: 21px;
+  }
+
+  span#pass
+  {
+  color: blue;
+  font-size: 1.5em;
+  font-weight: bolder;
+  left: 698px;
+
+  /*
+
+  Expected result:
+
+  8px                                           688px
+  v                                              v
+  ************************************************
+  *                                              *
+  *  <h1>Test passes if the word "PASS!" is<br />*  1st line box
+  *  on the right &#8600;</h1>                   *  2nd line box
+  *                                              *
+  ************************************************
+  *                                              *
+  * <h2>nbsp;<h2>  <h2>nbsp;<h2>  <h2>nbsp;<h2>  *  <h2>PASS!</h2>
+  *                                              *
+  ************************************************
+                ^              ^
+               228px          458px
+
+  */
+
+  line-height: 1;
+  position: absolute;
+  top: 130px;
+
+  /*
+    8px : margin-top of body element
+   21px : margin-top of h1 element which must not collapse with body's margin-top
+   80px : content height: 2 line boxes required to render the "Test passes if ..." sentence
+   21px : margin-bottom of h1 element
+ ====================================
+  130px : top position of span#pass in document box
+  */
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+    <h1>Test passes if "PASS!" is<br />on the right &#8600;</h1>
+    <span id="pass">PASS!</span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002.xht
new file mode 100644
index 000000000..8c5fadbad
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-002.xht
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-fill: auto' and '-moz-column-span: all' (complex)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" />
+  <link rel="match" href="multicol-fill-auto-block-children-002-ref.xht" />
+
+  <meta name="flags" content="" />
+  <meta name="assert" content="This test checks that if '-moz-column-fill' is set to 'auto' and a multicolumn element content is solely made of block container boxes, then it should fill column boxes sequentially with such content and, in this test, it should overflow outside of it. This test relies on the idea that a '-moz-column-span: all' element will occupy more space in a multi-column element than a '-moz-column-span: none' element, therefore reducing available space for content in column boxes." />
+  <style type="text/css"><![CDATA[
+  html {background-color: white;}
+
+  body
+  {
+  background-color: blue;
+  height: 200px;
+  margin: 8px;
+  width: 680px;
+
+  -moz-column-count: 3;
+  -moz-column-fill: auto;
+  -moz-column-gap: 10px;
+
+  /*
+  So, each column box should be
+  [680px minus (2 mult 10px)] divided by 3 == 220px wide
+  */
+  }
+
+  h1
+  {
+  color: white;
+  -moz-column-span: all;
+  font-size: 2em;
+  line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */
+  margin: 21px 0em;
+  /*
+   21px : margin-top of h1 element which must not collapse with body's margin-top
+   80px : content height: 2 line boxes required to render the "Test passes if ..." sentence
+   21px : margin-bottom of h1 element
+ ====================================
+  122px : margin box height of h1 element
+  */
+  }
+
+  h2
+  {
+  color: blue;
+  font-size: 1.5em;
+  line-height: 1;
+  margin: 0 0 2.25em;
+  /*
+    0px : margin-top of h2 element
+   24px : content height: 1 line box required to render all the nbsp; and PASS! word
+   54px : margin-bottom of h2 element
+ ====================================
+   78px : margin box height of h2 element
+  */
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <h1>Test passes if "PASS!" is<br />on the right &#8600;</h1>
+
+  <h2>&nbsp;</h2>
+
+  <h2>&nbsp;</h2>
+
+  <h2>&nbsp;</h2>
+
+  <h2>PASS!</h2>
+
+  <!--
+
+  Expected result:
+
+  8px                                           688px
+  v                                              v
+  ************************************************
+  *                                              *
+  *  <h1>Test passes if the word "PASS!" is<br />*  1st line box
+  *  on the right &#8600;</h1>                   *  2nd line box
+  *                                              *
+  ************************************************
+  *                                              *
+  * <h2>nbsp;<h2>  <h2>nbsp;<h2>  <h2>nbsp;<h2>  *  <h2>PASS!</h2>
+  *                                              *
+  ************************************************
+                ^              ^
+               228px          458px
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-ref.xht
new file mode 100644
index 000000000..5b89de611
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto-block-children-ref.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicol | -moz-column-span: all | -moz-column-fill: auto</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+html {
+	background: white;
+}
+body {
+	background: blue;
+	width: 1200px;
+	height: 492px;
+}
+h1 {
+	font-size: 2em;
+	margin: 0;
+	padding-top: 0.66em;
+}
+]]></style>
+</head>
+
+<body>
+<h1>you should not see the word fail</h1>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto.xht
new file mode 100644
index 000000000..284865c2e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-auto.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-fill-auto</title>
+<meta name="assert" content="This test checks that -moz-columns are properly balanced when '-moz-column-fill: auto' is set"/>
+<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/>
+<link rel="match" href="multicol-fill-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1.25em;
+	line-height: 1em;
+	color: green;
+	height: 3em;
+	width: 2em;
+	orphans: 1;
+	widows: 1;
+	position: relative;
+	margin: 1em;
+}
+div.col {
+	-moz-column-count: 2;
+	-moz-column-fill: auto;
+	-moz-column-gap: 0;
+}
+div.red {
+	background: red; position: absolute; z-index: -1;
+}
+]]></style>
+</head>
+
+<body>
+
+<div class='col'>
+<div class='red' style="top: 0; left: 0; height: 3em; width: 1em;"></div>
+<div class='red' style="top: 0; left: 0; height: 1em; width: 2em;"></div>
+o<br/>t<br/>
+o<br/>t<br/>
+</div>
+
+<div class='ref'>
+oo<br/>t<br/>o
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001-ref.xht
new file mode 100644
index 000000000..59375d6da
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001-ref.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-fill</title>
+<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1.25em;
+	line-height: 1em;
+	color: green;
+	height: 3em;
+	width: 2em;
+	orphans: 1;
+	widows: 1;
+	position: relative;
+	margin: 1em;
+}
+div.col {
+	-moz-column-count: 2;
+	-moz-column-fill: balance;
+	-moz-column-gap: 0;
+}
+div.red {
+	background: red; position: absolute; z-index: -1;
+}
+]]></style>
+</head>
+
+<body>
+
+<div class='ref'>
+oo<br/>tt
+</div>
+
+<div class='ref'>
+oo<br/>tt
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001.xht
new file mode 100644
index 000000000..d80e52e8c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-balance-001.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-fill</title>
+<meta name="assert" content="This test checks that -moz-columns are properly balanced when '-moz-column-fill: balance' is set"/>
+<link rel="author" title="howcome@opera.com" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#filling-columns"/>
+<link rel="match" href="multicol-fill-balance-001-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1.25em;
+	line-height: 1em;
+	color: green;
+	height: 3em;
+	width: 2em;
+	orphans: 1;
+	widows: 1;
+	position: relative;
+	margin: 1em;
+}
+div.col {
+	-moz-column-count: 2;
+	-moz-column-fill: balance;
+	-moz-column-gap: 0;
+}
+div.red {
+	background: red; position: absolute; z-index: -1;
+}
+]]></style>
+</head>
+
+<body>
+
+<div class='col'>
+<div class='red' style="top: 0; left: 0; height: 2em; width: 2em;"></div>
+o<br/>t<br/>
+o<br/>t<br/>
+</div>
+
+<div class='ref'>
+oo<br/>tt
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-ref.xht
new file mode 100644
index 000000000..97985e50b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-fill-ref.xht
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-gap</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+div {
+	background: yellow;
+	height: 5em;
+	width: 30em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000-ref.xht
new file mode 100644
index 000000000..96211f9b2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000-ref.xht
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  font: 1.25em/1 Ahem;
+  margin: 1em 0;
+  width: 30em;
+  }
+
+  span {color: yellow;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
+
+  <div>1234567890<span>1234567890</span>1234567890</div>
+
+  <div>1234567890<span>1234567890</span>1234567890</div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000.xht
new file mode 100644
index 000000000..c542d1b21
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-000.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-gap (basic)</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap'" />
+  <link rel="match" href="multicol-gap-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that column gap appears between two -moz-columns." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  font: 1.25em/1 Ahem;
+  margin: 1em 0;
+  width: 30em;
+  }
+
+  div#test
+  {
+  background-color: yellow;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-width: 10em;
+  -moz-column-gap: 10em;
+  }
+
+  span {color: yellow;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
+
+  <div id="test">1234567890<br />1234567890</div>
+
+  <div id="reference">1234567890<span>1234567890</span>1234567890</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001-ref.xht
new file mode 100644
index 000000000..f8b6ee6a4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001-ref.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div {margin: 1.25em;}
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+  <p>Test passes if the 2 stripes are <strong>identical</strong>.</p>
+
+  <div><img src="support/black20x20.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/black20x20.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001.xht
new file mode 100644
index 000000000..6a20766d9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-001.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-gap: normal'</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
+  <link rel="match" href="multicol-gap-001-ref.xht" />
+  <meta name="flags" content="ahem may" />
+  <meta name="assert" content="This test checks that the 'normal' column gap is 1em, which is suggested -- and not prescribed -- by the specification." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  color: black;
+  font: 1.25em/1 Ahem;
+  margin: 1em;
+  orphans: 1;
+  widows: 1;
+  width: 3em;
+  }
+
+  div.multicol
+  {
+  -moz-column-gap: normal;
+  -moz-column-width: 1em;
+  }
+
+  span {padding-right: 1em;}
+  ]]></style>
+ </head>
+ <body>
+  <p>Test passes if the 2 stripes are <strong>identical</strong>.</p>
+
+  <div class="multicol">x<br />x</div>
+  <div><span>x</span>x</div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002-ref.xht
new file mode 100644
index 000000000..afecc0cda
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002-ref.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  table
+  {
+  background-color: yellow;
+  border-spacing: 0px;
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  }
+
+  td {padding: 0 1em 0 0;}
+
+  img, td {vertical-align: top;}
+
+  td#last-cell {padding-right: 0;}
+  ]]></style>
+ </head>
+ <body>
+ <table>
+   <tr>
+     <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td><td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td><td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td><td id="last-cell"><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+    </tr>
+  </table>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002.xht
new file mode 100644
index 000000000..368658291
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-002.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-gap (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
+  <link rel="match" href="multicol-gap-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 1em;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	bl ac
+  <span>
+	bl ue
+  </span>
+  <span>
+	bl ue
+  </span>
+	bl ac
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-003.xht
new file mode 100644
index 000000000..0088196ff
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-003.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-gap: normal'</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
+  <link rel="match" href="multicol-gap-002-ref.xht" />
+  <meta name="flags" content="ahem may" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: normal;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	bl ac
+  <span>
+	bl ue
+  </span>
+  <span>
+	bl ue
+  </span>
+	bl ac
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001-ref.xht
new file mode 100644
index 000000000..3dd69014d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001-ref.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body > div
+  {
+  background-color: gray;
+  font: 1.25em/1 Ahem;
+  height: 4em;
+  position: relative;
+  width: 14.5em;
+  }
+
+  p, div > div
+  {
+  background-color: blue;
+  height: 1em;
+  left: 0;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  width: 4em;
+  }
+
+  div > div
+  {
+  background-color: black;
+  height: 4em;
+  }
+
+  p {left: 7.5em;}
+
+  p + p
+  {
+  left: 8.5em;
+  top: 1em;
+  }
+
+  p + p + p
+  {
+  left: 9.5em;
+  top: 2em;
+  }
+
+  p + p + p + p
+  {
+  left: 10.5em;
+  top: 3em;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+	<div></div>
+	<p></p>
+	<p></p>
+	<p></p>
+	<p></p>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001.xht
new file mode 100644
index 000000000..f4f7fc2a3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-fraction-001.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-gap' with increasing values</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-05 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
+  <link rel="match" href="multicol-gap-fraction-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: gray;
+  font: 1.25em/1 Ahem;
+  width: 14.5em;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 0.5em;
+  }
+
+  #two {-moz-column-gap: 2.5em;}
+
+  #three {-moz-column-gap: 4.5em;}
+
+  #four {-moz-column-gap: 6.5em;}
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div id="one">
+	blac
+	<span>blue</span>
+  </div>
+
+  <div id="two">
+	blac
+	<span>blue</span>
+  </div>
+
+  <div id="three">
+	blac
+	<span>blue</span>
+  </div>
+
+  <div id="four">
+	blac
+	<span>blue</span>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001-ref.xht
new file mode 100644
index 000000000..162d875e7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001-ref.xht
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+    <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40"
+alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001.xht
new file mode 100644
index 000000000..1dddf928b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-001.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-gap' with large value</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap" />
+  <link rel="match" href="multicol-gap-large-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that when '-moz-column-gap' is large and when used '-moz-column-width' is narrow, then content extends into -moz-column-gap until its middle and content can extend, overflow outside the edges of the multi-colum element if 'overflow' is set to 'visible'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 4em;
+
+  /*
+  N == 4;
+  W == 0em;
+  */
+
+  /*
+  In this test, the content of first 3 column
+  boxes extend into middle of -moz-column-gap and
+  content of the 4th column box extend outside the
+  right edge of multi-column. The gray border-right of
+  multi-column elemen overlaps partially the 3rd
+  -moz-column-gap.
+  */
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  bl ac
+  <span>
+  bl ue
+  </span>
+  <span>
+  bl ue
+  </span>
+  bl ac
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002-ref.xht
new file mode 100644
index 000000000..ce17abb71
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002-ref.xht
@@ -0,0 +1,24 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div {font: 1.25em/1 serif;}
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+    <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="110" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="30" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="110" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="30" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002.xht
new file mode 100644
index 000000000..fb5a155d2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-large-002.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-gap' with large value</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1 '-moz-column-gap" />
+  <link rel="match" href="multicol-gap-large-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 4em;
+
+  /*
+  N == 2;
+  W == 3.5em;
+  */
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  bl ac
+  <span>
+  bl ue
+  </span>
+  <span>
+  bl ue
+  </span>
+  bl ac
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-negative-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-negative-001.xht
new file mode 100644
index 000000000..ed5d6e325
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-gap-negative-001.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-gap with negative value</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
+  <link rel="match" href="multicol-gap-002-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 1em;
+  -moz-column-gap: -1em;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	bl ac
+  <span>
+	bl ue
+  </span>
+  <span>
+	bl ue
+  </span>
+	bl ac
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001-ref.xht
new file mode 100644
index 000000000..d55aa7aa9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001-ref.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  img
+  {
+  left: 135px;
+  /* 6em + (2em/2) - (10px/2) == 135px */
+  position: relative;
+  vertical-align: top;
+  }
+
+  img + img {left: 285px;}
+  /* 6em + 2em + 6em + (2em/2) - (10px/2) - 10px == 285px */
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if there are 2 blue vertical stripes of equal height.</p>
+
+  <div><img src="support/swatch-blue.png" width="10" height="160" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="10" height="160" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001.xht
new file mode 100644
index 000000000..3be58cfb4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-001.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-count and height</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-06 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gap" title="4.1. '-moz-column-gap'" />
+  <link rel="match" href="multicol-height-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that length of column rules is equal to the length of the -moz-columns and if a nth column box overflows outside the available width of a multi-column element, then an (n-1)th column rule should be drawn. In this test, a 3rd column box is created outside the content edge of the multi-column element: therefore, a 2nd blue column rule should be drawn accordingly." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  color: white;
+  font: 1.25em/1 Ahem;
+  height: 8em;
+  width: 14em;
+
+  -moz-column-count: 2;
+  -moz-column-fill: auto;
+  -moz-column-gap: 2em;
+  -moz-column-rule: blue solid 10px;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <p>Test passes if there are 2 blue vertical stripes of equal height.</p>
+
+  <div>
+  1st col 1st col 1st col
+  1st col 2nd col 2nd col
+  2nd col 2nd col 3rd col
+  3rd col 3rd col 3rd col
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001-ref.xht
new file mode 100644
index 000000000..27a87c3fe
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001-ref.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: blue;
+  font: 1.25em/1 serif;
+  }
+
+  div#top
+  {
+  height: 5em;
+  width: 22em;
+  }
+
+  div#bottom
+  {
+  height: 3em;
+  width: 14em;
+  }
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+    <div id="top"><img src="support/black20x20.png" width="60" height="100" alt="Image download support must be enabled" /></div>
+
+  <div id="bottom"><img src="support/swatch-orange.png" width="60" height="60" alt="Image download support must be enabled" /></div>
+
+  <!--
+
+  Expected results:
+
+ 0em                        14em            22em
+  v                           v               v
+0 *********************************************
+  * bla                       |               *
+  * bla                       |               *
+  * bla                       |               *
+  * bla                       |               *
+5 * bla                       |               *
+6 * orn                       |****************
+7 * orn                       |
+8 * orn                       |
+  *****************************
+
+  -->
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001.xht
new file mode 100644
index 000000000..1331724f8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-height-block-child-001.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: multi-column element with child block (complex)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
+  <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0091.html" title="[css3-multicol] Nested multicolumn elements rendering" />
+  <link rel="match" href="multicol-height-block-child-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that a nested multi-column element's inline content could be clipped horizontally." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: blue;
+  font: 20px/1 Ahem;
+  height: 8em;
+  width: 14em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 2em;
+
+  /*
+
+  N == 2;
+
+  W == 6em;
+
+  H == 8em;
+
+  */
+  }
+
+  div#outer
+  {
+  color: black;
+  -moz-column-fill: auto;
+  }
+
+  div#inner
+  {
+  color: orange;
+  -moz-column-fill: balance;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div id="outer">
+  bla bla bla bla bla
+
+    <div id="inner">orn orn orn zzz zzz zzz</div>
+
+  </div>
+
+  <!--
+  Both column boxes of div#inner start in the 1st
+  column box of div#outer multi-column element.
+  The first 3 lines boxes of 1st
+  column box of div#inner will be rendered inside the
+  1st column box of div#outer but not its 2nd.
+  Because 1st column box of div#outer is
+  6em wide while the div#inner multi-column element
+  is 14em wide, this makes the first 3 line boxes
+  (with the 'z' trios) of 2nd column box of div#inner
+  clipped.
+
+  Then, at this point, the div#inner multi-column
+  element should be fragmented in order to continue to
+  render the 5 empty line boxes it has into the
+  2nd column box of div#outer. Since those 5 line
+  boxes are empty, we only see the extension it
+  creates horizontally, which is
+  14em - 6em == 8em horizontally and
+  5 lines boxes == 5em tall
+
+
+  Expected results:
+
+ 0em                        14em            22em
+  v                           v               v
+0 *********************************************
+  * bla                       |               *
+  * bla                       |               *
+  * bla                       |               *
+  * bla                       |               *
+5 * bla                       |               *
+6 * orn                       |****************
+7 * orn                       |
+8 * orn                       |
+  *****************************
+
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001-ref.xht
new file mode 100644
index 000000000..7da442b56
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001-ref.xht
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  font: 1.25em/1 serif;
+  margin: 0em 1em;
+  padding: 0em 1em 1em;
+  width: 30em;
+  }
+
+  img
+  {
+  padding-right: 1em;
+  vertical-align: top;
+  }
+
+  img.-moz-column-gap {margin-right: 2em;}
+
+  img#last {padding-right: 0em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png"
+width="40" height="60" alt="Image download support must be enabled" /><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001.xht
new file mode 100644
index 000000000..97a032e37
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-001.xht
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: multicolumn and inheritance</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
+  <link rel="match" href="multicol-inherit-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body
+  {
+  font: 1.25em/1 Ahem;
+  width: 34em;
+  }
+
+  body > div
+  {
+  -moz-column-count: 3;
+  -moz-column-gap: 1em;
+
+  /*
+  N == 3;
+
+    34em : available width
+  -  2em : horizontal margin of external div
+  -  2em : 2 column gaps
+ ==========
+    30em
+
+  So, W == 10em;
+
+    30em
+  -  6em : 3 mult by 2em: horizontal margin of 3 internal divs
+ ==========
+    24em : 8em for each of the 3 column boxes without their horizontal margins
+
+  */
+  }
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  margin: 0 1em 1em;
+  orphans: 1;
+  widows: 1;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+	<div>
+		aa aa
+		aa aa
+		aa aa
+		aa aa
+	</div>
+	<div>
+		mm mm
+		mm mm
+		mm mm
+		mm mm
+	</div>
+	<div>
+		xx xx
+		xx xx
+		xx xx
+		xx xx
+	</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002-ref.xht
new file mode 100644
index 000000000..0bbb417d0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002-ref.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: blue;
+  font: 1.25em/1 serif;
+  margin: 1em;
+  padding: 0em 1em 1em;
+  width: 30em;
+  }
+
+  img {vertical-align: top;}
+
+  img.-moz-column-gap
+  {
+  margin-left: -2em;
+  margin-right: 3em;
+  vertical-align: bottom;
+  }
+
+  img#last
+  {
+  margin-left: -2em;
+  vertical-align: bottom;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img  class="-moz-column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img  class="-moz-column-gap" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img id="last" src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002.xht
new file mode 100644
index 000000000..5fad8dc0b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-002.xht
@@ -0,0 +1,88 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-count' and inherit</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-08 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" />
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" />
+  <link rel="match" href="multicol-inherit-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body > div
+  {
+  background-color: blue;
+  -moz-column-count: 3;
+  -moz-column-gap: 1em;
+  font: 1.25em/1 Ahem;
+  width: 32em;
+
+  /*
+  N == 3;
+
+    32em
+  -  2em : 2 column gaps
+ ==========
+    30em : available width of the 3 inner multi-column elements
+
+  So, W == 10em;
+
+    30em
+  -  6em : 3 mult by 2em: horizontal margin of 3 inner multi-column elements
+  -  6em : 3 mult by 2em: horizontal column-gaps of all 3 inner multi-column elements
+ ==========
+    18em : 6em for each of the 3 column boxes without their own horizontal margins
+    So, each column boxes of inner multi-column elements is 2em wide.
+  */
+  }
+
+  div
+  {
+  color: black;
+  margin: 1em;
+  orphans: 1;
+  widows: 1;
+  }
+
+  div > div
+  {
+  background-color: yellow;
+  -moz-column-count: inherit;
+  -moz-column-gap: 1em;
+  }
+
+  div > div:first-child {margin-top: 0;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+	<div>
+		aa aa
+		aa aa
+		aa aa
+		aa aa
+	</div>
+	<div>
+		mm mm
+		mm mm
+		mm mm
+		mm mm
+	</div>
+	<div>
+		xx xx
+		xx xx
+		xx xx
+		xx xx
+	</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-003.xht
new file mode 100644
index 000000000..5d3130fa5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-003.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | inheritance</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/>
+<link rel="match" href="multicol-inherit-3-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body {
+	width: 75em;
+}
+body>div {
+	height: 2em;
+	-moz-column-width: 8em;
+}
+div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	orphans: 1;
+	widows: 1;
+}
+div>div {
+	margin: 0 1em 1em;
+}
+div+div {
+	color: blue;
+}
+div+div+div {
+	color: pink;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<div>
+		xx xx
+		xx xx
+		xx xx
+		xx xx
+	</div>
+	<div>
+		xx xx
+		xx xx
+		xx xx
+		xx xx
+	</div>
+	<div>
+		xx xx
+		xx xx
+		xx xx
+		xx xx
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-004.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-004.xht
new file mode 100644
index 000000000..732a8d11b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-004.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | inheritance</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/>
+<link rel="match" href="multicol-inherit-4-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body>div {
+	width: 74em;
+	-moz-column-rule: 1em solid blue;
+}
+div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: white;
+	background: white;
+	margin: 1em;
+	orphans: 1;
+	widows: 1;
+
+	-moz-column-count: 3;
+	-moz-column-gap: 7em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<div>
+		xx xx
+		xx xx
+		xx xx
+		xx xx
+	</div>
+	<div>
+		xx xx
+		xx xx
+		xx xx
+		xx xx
+	</div>
+	<div>
+		xx xx
+		xx xx
+		xx xx
+		xx xx
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-3-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-3-ref.xht
new file mode 100644
index 000000000..8016fb7d5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-3-ref.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | inheritance</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body {
+	width: 75em;
+}
+body>div {
+	color: black;
+	background: yellow;
+	height: 2em;
+	position: relative;
+}
+div div {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+#two {left: 19em;}
+#three {left: 38em;}
+div div div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	width: 2em;
+	height: 2em;
+	color: black;
+	position: absolute;
+	left: 1em;
+}
+.a2 {left: 4em;}
+.a3 {left: 10.5em;}
+.a4 {left: 13.5em;}
+#two div {color: blue;}
+#three div {color: pink;}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<div>
+		<div>xx xx</div>
+		<div class="a2">xx xx</div>
+		<div class="a3">xx xx</div>
+		<div class="a4">xx xx</div>
+	</div>
+	<div id="two">
+		<div>xx xx</div>
+		<div class="a2">xx xx</div>
+		<div class="a3">xx xx</div>
+		<div class="a4">xx xx</div>
+	</div>
+	<div id="three">
+		<div>xx xx</div>
+		<div class="a2">xx xx</div>
+		<div class="a3">xx xx</div>
+		<div class="a4">xx xx</div>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-4-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-4-ref.xht
new file mode 100644
index 000000000..2972d7132
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-inherit-4-ref.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | inheritance</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body>div {
+	margin: 1em;
+	background: white;
+	width: 74em;
+	height: 5em;
+	position: relative;
+}
+div div {
+	background: blue;
+	height: 5em;
+	width: 1em;
+	position: absolute;
+	top: 0;
+	left: 23em;
+}
+div>div+div {
+	left: 50em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<div></div>
+	<div></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001-ref.xht
new file mode 100644
index 000000000..351696de5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001-ref.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  height: 100px;
+  width: 200px;
+  }
+   ]]></style>
+ </head>
+ <body>
+
+  <div></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001.xht
new file mode 100644
index 000000000..70cb50560
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-list-item-001.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: multi-column and list-item</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
+  <link rel="match" href="multicol-list-item-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that an unordered list of list items can be set to display its list-items in column boxes." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  ul
+  {
+  background-color: black;
+  font: 1.25em/1 Ahem;
+  margin: 0em;
+  padding: 0em;
+  width: 10em;
+
+  -moz-column-gap: 0em;
+  -moz-column-width: 5em;
+  }
+
+  li, span {font-size: 1em;}
+
+  li
+  {
+  margin-left: 1em;
+  padding: 0em;
+  }
+
+  span {display: block;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <ul>
+	<li>1sli</li>
+	<li>2nli</li>
+	<li>3rli</li>
+	<li>4tli</li>
+	<li>5tli</li>
+	<li><span>6tli</span></li>
+	<li>7tli</li>
+	<li>8tli</li>
+	<li>9tli</li>
+	<li>10tl</li>
+  </ul>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-001.xht
new file mode 100644
index 000000000..cc51c0e6d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-001.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: multi-column and margin collapsing of first child (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that the margin-top of the first child of a multi-column element (with -moz-column-fill: auto) does not collapse with its parent." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#test-multi-column-red
+  {
+  background-color: red;
+  color: white;
+  font: 3.125em/1 Ahem; /* equivalent to 50px/50px Ahem */
+  height: 4em;
+  margin-top: 0em;
+  width: 4em;
+
+  -moz-column-count: 2;
+  -moz-column-fill: auto;
+  -moz-column-gap: 0em;
+  }
+
+  div#first-child {margin-top: 2em;}
+
+  div#reference-overlapping-green
+  {
+  background-color: green;
+  bottom: 200px;
+  height: 100px;
+  position: relative;
+  width: 100px;
+  }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="test-multi-column-red">
+    <div id="first-child">ab cd</div>
+	ef gh ij kl
+  </div>
+
+  <div id="reference-overlapping-green"></div>
+
+  <!--
+
+  Expected result (before the overlapping):
+
+  *********************
+  | margin- |   ef    |
+  | top red |         |
+  | back    |   gh    |
+  | ground  |         |
+  *********************
+  |   ab    |   ij    |
+  |         |         |
+  |   cd    |   kl    |
+  |         |         |
+  *********************
+
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-002.xht
new file mode 100644
index 000000000..bd5a5bfc0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-002.xht
@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: multi-column and margin collapsing of first child (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that the margin-top of the first child (an inline-block) of a multi-column element (with -moz-column-fill: balance) does not collapse with its parent." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#test-multi-column-red
+  {
+  background-color: red;
+  color: white;
+  font: 3.125em/1 Ahem; /* equivalent to 50px/50px Ahem */
+  height: 4em;
+  margin-top: 0em;
+  width: 4em;
+
+  -moz-column-count: 2;
+  -moz-column-fill: balance;
+  -moz-column-gap: 0em;
+  }
+
+  span
+  {
+  display: inline-block;
+  margin-top: 2em;
+  }
+
+  div#reference-overlapping-green
+  {
+  background-color: green;
+  bottom: 200px;
+  height: 100px;
+  position: relative;
+  width: 100px;
+  }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="test-multi-column-red">
+    <span>ab cd</span>
+	ef gh ij kl
+  </div>
+
+  <div id="reference-overlapping-green"></div>
+
+  <!--
+
+  Expected result (before the overlapping):
+
+  *********************
+  | margin- |   ef    |
+  | top red |         |
+  | back    |   gh    |
+  | ground  |         |
+  *********************
+  |   ab    |   ij    |
+  |         |         |
+  |   cd    |   kl    |
+  |         |         |
+  *********************
+
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001-ref.xht
new file mode 100644
index 000000000..db9a49db4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  body > div
+  {
+  background-color: blue;
+  border: gray solid 1em;
+  font-size: 1.25em;
+  height: 8em;
+  position: relative;
+  width: 10em;
+  }
+
+  div > div
+  {
+  background-color: yellow;
+  height: 1em;
+  left: 0;
+  position: absolute;
+  top: 3em;
+  width: 5em;
+  }
+
+  #second-stripe {top: 5em;}
+
+  #third-stripe {top: 7em;}
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div>
+	<div></div>
+	<div id="second-stripe"></div>
+	<div id="third-stripe"></div>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001.xht
new file mode 100644
index 000000000..9f7fd67b6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-margin-child-001.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: multi-column and margin collapsing of block children (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
+  <link rel="match" href="multicol-margin-child-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that the margin-bottom of a block child in a multi-column element will collapse with the margin-top of a following block child of that same multi-colum element if those children are vertically adjacent and if no line boxes, no clearance, no padding and no border separate them." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: blue;
+  font: 1.25em/1 Ahem;
+  width: 10em;
+
+  -moz-column-count: 2;
+  -moz-column-fill: balance;
+  -moz-column-gap: 0em;
+  }
+
+  h4
+  {
+  font: inherit;
+  margin: 1em 0;
+  }
+  ]]></style>
+
+ </head>
+
+ <body>
+
+  <div>
+	1scol 1scol
+	1scol
+  <h4>	h4h41	</h4>
+  <h4>	h4h42	</h4>
+	2ncol 2ncol
+	2ncol 2ncol
+	2ncol 2ncol
+	2ncol 2ncol
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002-ref.xht
new file mode 100644
index 000000000..e955c486f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002-ref.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  body {margin: 0em;}
+
+  div#rel-pos-wrapper
+  {
+  background-color: yellow;
+  font: 1.25em/1 serif;
+  height: 4em;
+  position: relative;
+  width: 32em;
+  }
+
+  div > div
+  {
+  font-size: 1em;
+  height: 3em;
+  position: absolute;
+  top: 0;
+  width: 2em;
+  }
+
+  div#black1
+  {
+  background-color: black;
+  left: 1em;
+  }
+
+  div#black2
+  {
+  background-color: black;
+  left: 4em;
+  }
+
+  div#black3
+  {
+  background-color: black;
+  height: 2em;
+  left: 7em;
+  }
+
+  div#blue1
+  {
+  background-color: blue;
+  left: 12em;
+  }
+
+  div#blue2
+  {
+  background-color: blue;
+  left: 15em;
+  }
+
+  div#blue3
+  {
+  background-color: blue;
+  height: 2em;
+  left: 18em;
+  }
+
+  div#pink1
+  {
+  background-color: pink;
+  left: 23em;
+  }
+
+  div#pink2
+  {
+  background-color: pink;
+  left: 26em;
+  }
+
+  div#pink3
+  {
+  background-color: pink;
+  height: 2em;
+  left: 29em;
+  }
+   ]]></style>
+ </head>
+ <body>
+
+  <div id="rel-pos-wrapper">
+
+	<div id="black1"></div>
+	<div id="black2"></div>
+	<div id="black3"></div>
+
+	<div id="blue1"></div>
+	<div id="blue2"></div>
+	<div id="blue3"></div>
+
+	<div id="pink1"></div>
+	<div id="pink2"></div>
+	<div id="pink3"></div>
+
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002.xht
new file mode 100644
index 000000000..662314004
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-002.xht
@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: multicolumn and margin-bottom collapsing</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
+  <link rel="match" href="multicol-nested-002-ref.xht" />
+  <meta name="assert" content="This test checks that a block container element's margin-bottom can collapse with its multi-column parent's margin-bottom if no line boxes, no clearance, no padding and no border separate them." />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 0em;}
+
+  body > div
+  {
+  font: 1.25em/1 Ahem;
+  width: 32em;
+
+  -moz-column-gap: 1em;
+  -moz-column-width: 8em;
+  }
+
+  /*
+
+  N == max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap)));
+  N == max(1, floor((32em + 1em) / (8em + 1em)));
+  N == max(1, floor(33em / 9em));
+  N == max(1, floor(3.6));
+  N == max(1, 3);
+  N == 3;
+
+  W == ((available-width + -moz-column-gap) / N) - -moz-column-gap;
+  W == ((32em + 1em) / 3) - 1em;
+  W == (33em / 3) - 1em;
+  W == (11em) - 1em;
+  W == 10em;
+
+  */
+
+  div
+  {
+  background: yellow;
+  color: black;
+  orphans: 1;
+  widows: 1;
+  }
+
+  div > div {margin: 0 1em 1em;}
+
+  div + div {color: blue;}
+
+  div + div + div {color: pink;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	<div>
+		bl ac
+		bl ac
+		bl ac
+		bl ac
+	</div>
+	<div>
+		bl ue
+		bl ue
+		bl ue
+		bl ue
+	</div>
+	<div>
+		Pi nk
+		Pi nk
+		Pi nk
+		Pi nk
+	</div>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005-ref.xht
new file mode 100644
index 000000000..4ecaf566a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005-ref.xht
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  font: 1.25em/1 serif;
+  margin: 1em;
+  padding: 0em 1em 1em;
+  width: 39em;
+  }
+
+  img
+  {
+  padding-right: 2em;
+  vertical-align: top;
+  }
+
+  img.-moz-column-gap {margin-right: 2em;}
+
+  img#last {padding-right: 0em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img class="-moz-column-gap" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="60" alt="Image download support must be enabled" /><img src="support/black20x20.png"
+width="40" height="60" alt="Image download support must be enabled" /><img id="last" src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005.xht
new file mode 100644
index 000000000..28b967564
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-005.xht
@@ -0,0 +1,112 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: nested multi-columns and constrained dimensions</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-10 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
+  <link rel="match" href="multicol-nested-005-ref.xht" />
+  <!--
+  The original filename of this test was
+  multicol-inherit-005.xht
+  This test also serves as a conversion of
+  multicol-nested-001.xht
+  -->
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks how the height of column boxes conditions the height of nested column boxes." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body > div
+  {
+  -moz-column-gap: 1em;
+  font: 1.25em/1 Ahem;
+  width: 41em;
+  }
+
+  /*
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (41em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (41em - (2 * 1em)) / 3);
+  W == max(0, (41em - 2em) / 3);
+  W == max(0, 39em / 3);
+  W == max(0, 13em);
+  W == 13em;
+
+  The height of column rule depends on number of line boxes in
+  each outer column box which depends on number of line boxes
+  in each inner column box. So:
+
+    13em : width of each outer column box
+   -
+     2em : horizontal margin of each div inside
+   =======
+    11em : width of each inner multi-column elements
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (11em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (11em - (2 * 1em)) / 3);
+  W == max(0, (11em - 2em) / 3);
+  W == max(0, 9em / 3);
+  W == max(0, 3em);
+  W == 3em;
+
+  So, each duo of 'a', 'm' and 'x' should fill one and only 1 line
+  box. There are 8 duos; therefore, the first 2 inner
+  column boxes should use 3 line boxes and the 3rd inner
+  column box should be using 2 line boxes.
+
+  So, the height of the 2 blue column rules should be 60px.
+
+  */
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  font-size: 1em;
+  margin: 1em;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 3;
+  }
+
+  div > div:first-child {margin-top: 0;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	<div>
+		aa aa
+		aa aa
+		aa aa
+		aa aa
+	</div>
+	<div>
+		mm mm
+		mm mm
+		mm mm
+		mm mm
+	</div>
+	<div>
+		xx xx
+		xx xx
+		xx xx
+		xx xx
+	</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001-ref.xht
new file mode 100644
index 000000000..8d86b42a6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001-ref.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  div#rel-pos-wrapper
+  {
+  font: 1.25em/1 serif;
+  position: relative;
+  }
+
+  div#rel-pos-wrapper > div
+  {
+  background-color: blue;
+  font-size: 1em;
+  height: 3em;
+  position: absolute;
+  width: 1em;
+  }
+
+  div#first-column-rule
+  {
+  left: 14em;
+  top: auto;
+  }
+
+  div#second-column-rule
+  {
+  left: 29em;
+  top: auto;
+  }
+   ]]></style>
+ </head>
+ <body>
+
+  <div id="rel-pos-wrapper">
+	<div id="first-column-rule"></div>
+	<div id="second-column-rule"></div>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001.xht
new file mode 100644
index 000000000..5dba8d8cb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-column-rule-001.xht
@@ -0,0 +1,128 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <!--
+  This test's original filename was multicol-inherit-004.xht
+  and it has been modified and is now
+  multicol-nested-column-rule-001.xht
+  -->
+  <title>CSS Multi-column Layout Test: nested multi-columns and -moz-column-rule position</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm" />
+  <link rel="match" href="multicol-nested-column-rule-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks how the height of column boxes conditions the height of column rule." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body > div
+  {
+  -moz-column-rule: blue solid 1em;
+  font: 1.25em/1 Ahem;
+  width: 42em;
+  }
+
+  /*
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (42em - ((3 - 1) * 3em)) / 3);
+  W == max(0, (42em - (2 * 3em)) / 3);
+  W == max(0, (42em - 6em) / 3);
+  W == max(0, 36em / 3);
+  W == max(0, 12em);
+  W == 12em;
+
+  So, the first -moz-column-rule should be at:
+
+    1.0em : margin-left of outer div
+   12.0em : width of 1st column box
+    1.0em : (3.0em / 2) - (1.0em / 2) : left edge of 1st -moz-column-rule
+  =========
+   14.0em
+
+  The 2nd -moz-column-rule should be at:
+
+    1.0em : margin-left of outer div
+   12.0em : width of 1st column box
+    3.0em : first -moz-column-gap
+   12.0em : width of 2nd column box
+    1.0em : (3.0em / 2) - (1.0em / 2) : left edge of 2nd -moz-column-rule
+  =========
+   29.0em
+
+  The height of column rule depends on number of line boxes in
+  each outer column box which depends on number of line boxes
+  in each inner column box. So:
+
+    12em : width of each outer column box
+   -
+     2em : horizontal margin of each div inside
+   =======
+    10em : width of each inner multi-column elements
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (10em - ((3 - 1) * 3em)) / 3);
+  W == max(0, (10em - (2 * 3em)) / 3);
+  W == max(0, (10em - 6em) / 3);
+  W == max(0, 4em / 3);
+  W == max(0, 1.33333em);
+  W == 1.33333em;
+
+  So, each duo of 'a', 'm' and 'x' should fill one and only 1 line
+  box. There are 8 duos; therefore, the first 2 inner
+  column boxes should use 3 line boxes and the 3rd inner
+  column box should be using 2 line boxes.
+
+  So, the height of the 2 blue column rules should be 60px.
+
+  */
+
+  div
+  {
+  background-color: white;
+  color: white;
+  font-size: 1em;
+  margin: 0em 1em;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 3em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	<div>
+		aa aa
+		aa aa
+		aa aa
+		aa aa
+	</div>
+	<div>
+		mm mm
+		mm mm
+		mm mm
+		mm mm
+	</div>
+	<div>
+		xx xx
+		xx xx
+		xx xx
+		xx xx
+	</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001-ref.xht
new file mode 100644
index 000000000..043b6c63c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001-ref.xht
@@ -0,0 +1,107 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  body {margin: 0em;}
+
+  div#rel-pos-wrapper
+  {
+  background-color: yellow;
+  font: 1.25em/1 serif;
+  height: 3em;
+  margin: 1em;
+  position: relative;
+  width: 32em;
+  }
+
+  div > div
+  {
+  font-size: 1em;
+  height: 3em;
+  position: absolute;
+  top: 0em;
+  width: 2em;
+  }
+
+  div#black1
+  {
+  background-color: black;
+  left: 1em;
+  }
+
+  div#black2
+  {
+  background-color: black;
+  left: 4em;
+  }
+
+  div#black3
+  {
+  background-color: black;
+  height: 2em;
+  left: 7em;
+  }
+
+  div#pink1
+  {
+  background-color: pink;
+  left: 12em;
+  }
+
+  div#pink2
+  {
+  background-color: pink;
+  left: 15em;
+  }
+
+  div#pink3
+  {
+  background-color: pink;
+  height: 2em;
+  left: 18em;
+  }
+
+  div#blue1
+  {
+  background-color: blue;
+  left: 23em;
+  }
+
+  div#blue2
+  {
+  background-color: blue;
+  left: 26em;
+  }
+
+  div#blue3
+  {
+  background-color: blue;
+  height: 2em;
+  left: 29em;
+  }
+   ]]></style>
+ </head>
+ <body>
+
+  <div id="rel-pos-wrapper">
+
+	<div id="black1"></div>
+	<div id="black2"></div>
+	<div id="black3"></div>
+
+	<div id="pink1"></div>
+	<div id="pink2"></div>
+	<div id="pink3"></div>
+
+	<div id="blue1"></div>
+	<div id="blue2"></div>
+	<div id="blue3"></div>
+
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001.xht
new file mode 100644
index 000000000..9ebef718c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-001.xht
@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: multicolumn and nested margins</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-11 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" />
+  <link rel="match" href="multicol-nested-margin-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that non-zero vertical margins can be applied on a multi-column element while the vertical margins of its own block containers can be set to zero." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 0em;}
+
+  body > div
+  {
+  font: 1.25em/1 Ahem;
+  width: 32em;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 1em;
+  }
+
+  /*
+
+  N == 3;
+
+  W == ((available-width + -moz-column-gap) / N) - -moz-column-gap;
+  W == ((32em + 1em) / 3) - 1em;
+  W == (33em / 3) - 1em;
+  W == (11em) - 1em;
+  W == 10em;
+
+  */
+
+  div
+  {
+  background: yellow;
+  color: black;
+  margin: 1em;
+  orphans: 1;
+  widows: 1;
+  }
+
+  div > div {margin: 0em 1em;}
+
+  div div:nth-child(2) {color: pink;}
+
+  div div:nth-child(3) {color: blue;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	<div>
+		bl ac
+		bl ac
+		bl ac
+		bl ac
+	</div>
+	<div>
+		Pi nk
+		Pi nk
+		Pi nk
+		Pi nk
+	</div>
+	<div>
+		bl ue
+		bl ue
+		bl ue
+		bl ue
+	</div>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002-ref.xht
new file mode 100644
index 000000000..b814e6755
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002-ref.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  body {margin: 0em;}
+
+  div
+  {
+  background-color: yellow;
+  font: 1.25em/1 serif;
+  height: 5em;
+  position: relative;
+  width: 41em;
+  }
+
+  div > div
+  {
+  background-color: blue;
+  font: inherit;
+  height: 3em;
+  position: absolute;
+  top: 0em;
+  width: 2em
+  }
+
+  div#first-blue
+  {
+  background-color: blue;
+  left: 29em;
+  }
+
+  div#second-blue
+  {
+  background-color: blue;
+  left: 33em;
+  }
+
+  div#third-blue
+  {
+  background-color: blue;
+  height: 2em;
+  left: 37em;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+    <div id="first-blue"></div>
+    <div id="second-blue"></div>
+    <div id="third-blue"></div>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002.xht
new file mode 100644
index 000000000..701bc0391
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-002.xht
@@ -0,0 +1,119 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: nested multi-moz-columns and vertical margin (complex)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />  <!-- 2013-08-14 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
+  <link rel="match" href="multicol-nested-margin-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that when an inner nested multi-column element is preceded by a soft column break (caused by an unforced column-break), then the used margin-top of such inner nested multi-column element is '0'." />
+
+  <!--
+  More info:
+  Re: [css3-multicol] vertical margins rendering in nested multi-columns
+  http://lists.w3.org/Archives/Public/www-style/2013Aug/0146.html
+  -->
+
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 0;}
+
+  body > div
+  {
+  background-color: yellow;
+  font: 1.25em/1 Ahem;
+  width: 41em;
+  /*
+  This test requires a viewport width of 820px
+  */
+  }
+
+  div
+  {
+  color: yellow;
+  font: inherit;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 1em;
+  }
+
+  div div {margin: 0em 1em;}
+
+  div div:last-child
+  {
+  color: blue;
+  margin: 1em;
+  }
+
+  /*
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (41em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (41em - (2 * 1em)) / 3);
+  W == max(0, (41em - 2em) / 3);
+  W == max(0, 39em / 3);
+  W == max(0, 13em);
+  W == 13em;
+
+  The height of column rule depends on number of line boxes in
+  each outer column box which depends on number of line boxes
+  in each inner column box. So:
+
+    13em : width of each outer column box
+   -
+     2em : horizontal margin of each div inside
+   =======
+    11em : width of each inner multi-column elements
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (11em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (11em - (2 * 1em)) / 3);
+  W == max(0, (11em - 2em) / 3);
+  W == max(0, 9em / 3);
+  W == max(0, 3em);
+  W == 3em;
+
+  So, each duo of 'a', 'm' and 'x' should fill one and only 1
+  line box. There are 15 'a' duos and 15 'm' duos; therefore,
+  the 3 inner column boxes of each first 2 inner
+  multi-column elements should use 5 line boxes.
+
+  The 1st column box of last inner multi-column
+  (the blue one with 'x' duos) should have 'x1',
+  'x2' and 'x3' duos filling 3 line boxes.
+
+  The 2nd column box of last inner multi-column should
+  have 'x4', 'x5' and 'x6' duos filling 3 line boxes.
+
+  The 3rd column box of the last inner multi-column should
+  have 'x7' and 'x8' duos filling 2 line boxes.
+  */
+
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+
+	<div> a1 a2 a3 a4 a5 a6 a7 a8 a9 a0 a1 a2 a3 a4 a5 </div>
+
+	<div> m1 m2 m3 m4 m5 m6 m7 m8 m9 m0 m1 m2 m3 m4 m5 </div>
+
+	<div> x1 x2 x3 x4 x5 x6	x7 x8 </div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003-ref.xht
new file mode 100644
index 000000000..719605105
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003-ref.xht
@@ -0,0 +1,108 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  div#rel-pos-wrapper
+  {
+  background-color: yellow;
+  font: 1.25em/1 serif;
+  height: 4em;
+  margin: 1em;
+  position: relative;
+  width: 41em;
+  }
+
+  div > div
+  {
+  font-size: 1em;
+  height: 3em;
+  position: absolute;
+  top: 0em;
+  width: 2em;
+  }
+
+  div#black1
+  {
+  background-color: black;
+  left: 1em;
+  top: 1em;
+  }
+
+  div#black2
+  {
+  background-color: black;
+  left: 5em;
+  top: 1em;
+  }
+
+  div#black3
+  {
+  background-color: black;
+  height: 2em;
+  left: 9em;
+  top: 1em;
+  }
+
+  div#pink1
+  {
+  background-color: pink;
+  left: 15em;
+  }
+
+  div#pink2
+  {
+  background-color: pink;
+  left: 19em;
+  }
+
+  div#pink3
+  {
+  background-color: pink;
+  height: 2em;
+  left: 23em;
+  }
+
+  div#blue1
+  {
+  background-color: blue;
+  left: 29em;
+  }
+
+  div#blue2
+  {
+  background-color: blue;
+  left: 33em;
+  }
+
+  div#blue3
+  {
+  background-color: blue;
+  height: 2em;
+  left: 37em;
+  }
+   ]]></style>
+ </head>
+ <body>
+
+  <div id="rel-pos-wrapper">
+
+	<div id="black1"></div>
+	<div id="black2"></div>
+	<div id="black3"></div>
+
+	<div id="pink1"></div>
+	<div id="pink2"></div>
+	<div id="pink3"></div>
+
+	<div id="blue1"></div>
+	<div id="blue2"></div>
+	<div id="blue3"></div>
+
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003.xht
new file mode 100644
index 000000000..93ee46f1f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-003.xht
@@ -0,0 +1,102 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: nested multicolumn and nested margin-top</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
+  <link rel="match" href="multicol-nested-margin-003-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that a top margin set on the first child element of a nested multicol element will not collapse with the margins of the multicol element." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body > div
+  {
+  font: 1.25em/1 Ahem;
+  margin: 1em;
+  width: 41em;
+  /*
+  This test requires a viewport width of 860px
+  */
+  }
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  margin: 1em 1em 0;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 1em;
+  }
+
+  /*
+
+  N == 3;
+
+  43em - 2em (horizontal margins) == available-width
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (41em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (41em - (2 * 1em)) / 3);
+  W == max(0, (41em - 2em) / 3);
+  W == max(0, 39em / 3);
+  W == max(0, 13em);
+  W == 13em;
+
+    13em : width of each outer column box
+   -
+     2em : horizontal margin of each div inside
+   =======
+    11em : width of each inner multi-column elements
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (11em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (11em - (2 * 1em)) / 3);
+  W == max(0, (11em - 2em) / 3);
+  W == max(0, 9em / 3);
+  W == max(0, 3em);
+  W == 3em;
+
+  */
+
+  div div:nth-child(2) {color: pink;}
+
+  div div:nth-child(3) {color: blue;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	<div>
+		bl ac
+		bl ac
+		bl ac
+		bl ac
+	</div>
+	<div>
+		Pi nk
+		Pi nk
+		Pi nk
+		Pi nk
+	</div>
+	<div>
+		bl ue
+		bl ue
+		bl ue
+		bl ue
+	</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004-ref.xht
new file mode 100644
index 000000000..937c60382
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004-ref.xht
@@ -0,0 +1,137 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  div#rel-pos-wrapper
+  {
+  background-color: yellow;
+  font: 1.25em/1 serif;
+  height: 4em;
+  margin: 1em;
+  position: relative;
+  width: 41em;
+  }
+
+  div > div
+  {
+  font-size: 1em;
+  height: 3em;
+  position: absolute;
+  top: 0em;
+  width: 2em;
+  }
+
+  div#black1
+  {
+  background-color: black;
+  left: 1em;
+  top: 1em;
+  }
+
+  div#black2
+  {
+  background-color: black;
+  left: 5em;
+  top: 1em;
+  }
+
+  div#black3
+  {
+  background-color: black;
+  height: 2em;
+  left: 9em;
+  top: 1em;
+  }
+
+  div#pink1
+  {
+  background-color: pink;
+  left: 15em;
+  }
+
+  div#blue-bottom1
+  {
+  background-color: blue;
+  height: 1em;
+  left: 15em;
+  top: 3em;
+  }
+
+  div#pink2
+  {
+  background-color: pink;
+  left: 19em;
+  }
+
+  div#blue-bottom2
+  {
+  background-color: blue;
+  height: 1em;
+  left: 19em;
+  top: 3em;
+  }
+
+  div#pink3
+  {
+  background-color: pink;
+  height: 2em;
+  left: 23em;
+  }
+
+  div#blue-bottom3
+  {
+  background-color: blue;
+  height: 1em;
+  left: 23em;
+  top: 3em;
+  }
+
+  div#blue1
+  {
+  background-color: blue;
+  height: 2em;
+  left: 29em;
+  }
+
+  div#blue2
+  {
+  background-color: blue;
+  height: 2em;
+  left: 33em;
+  }
+
+  div#blue3
+  {
+  background-color: blue;
+  height: 1em;
+  left: 37em;
+  }
+   ]]></style>
+ </head>
+ <body>
+
+  <div id="rel-pos-wrapper">
+
+	<div id="black1"></div>
+	<div id="black2"></div>
+	<div id="black3"></div>
+
+	<div id="pink1"></div>
+	<div id="blue-bottom1"></div>
+	<div id="pink2"></div>
+	<div id="blue-bottom2"></div>
+	<div id="pink3"></div>
+	<div id="blue-bottom3"></div>
+
+	<div id="blue1"></div>
+	<div id="blue2"></div>
+	<div id="blue3"></div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004.xht
new file mode 100644
index 000000000..ee6b20c58
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-004.xht
@@ -0,0 +1,106 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: nested multicolumn and nested margin-top</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
+  <link rel="match" href="multicol-nested-margin-004-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that due to a top margin only set on the first child element of a nested multicol element that will not collapse with the margins of the multicol element, then the height of an multi-column element can make its other inner multi-column (with a zero margin-top) element break into its own column boxes." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body > div
+  {
+  font: 1.25em/1 Ahem;
+  margin: 1em;
+  width: 41em;
+  /*
+  This test requires a viewport width of 860px
+  */
+  }
+
+  div
+  {
+  background: yellow;
+  color: black;
+  margin: 1em;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 1em;
+  }
+
+  div div {margin: 0 1em;}
+
+  div div:first-child {margin: 1em 1em 0;}
+
+  /*
+
+  N == 3;
+
+  43em - 2em (horizontal margins) == available-width
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (41em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (41em - (2 * 1em)) / 3);
+  W == max(0, (41em - 2em) / 3);
+  W == max(0, 39em / 3);
+  W == max(0, 13em);
+  W == 13em;
+
+    13em : width of each outer column box
+   -
+     2em : horizontal margin of each div inside
+   =======
+    11em : width of each inner multi-column elements
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (11em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (11em - (2 * 1em)) / 3);
+  W == max(0, (11em - 2em) / 3);
+  W == max(0, 9em / 3);
+  W == max(0, 3em);
+  W == 3em;
+
+  */
+
+  div div:nth-child(2) {color: pink;}
+
+  div div:nth-child(3) {color: blue;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	<div>
+		bl ac
+		bl ac
+		bl ac
+		bl ac
+	</div>
+	<div>
+		Pi nk
+		Pi nk
+		Pi nk
+		Pi nk
+	</div>
+	<div>
+		bl ue
+		bl ue
+		bl ue
+		bl ue
+	</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-005.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-005.xht
new file mode 100644
index 000000000..96c3f07c6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-nested-margin-005.xht
@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: nested multicolumn and nested margin-top</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model" />
+  <link rel="match" href="multicol-nested-margin-004-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that due to a top margin only set on the first child element of a nested multicol element that will not collapse with the margins of the multicol element, then the height of an multi-column element can make its other inner multi-column (with a zero margin-top) element break into its own column boxes." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body > div
+  {
+  font: 1.25em/1 Ahem;
+  margin: 1em;
+  width: 41em;
+  /*
+  This test requires a viewport width of 860px
+  */
+  }
+
+  div
+  {
+  background: yellow;
+  color: black;
+  margin: 1em 1em 0em;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 1em;
+  }
+
+  div div {margin: 0 1em;}
+
+  div div:first-child {margin: 1em 1em 0;}
+
+  /*
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (41em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (41em - (2 * 1em)) / 3);
+  W == max(0, (41em - 2em) / 3);
+  W == max(0, 39em / 3);
+  W == max(0, 13em);
+  W == 13em;
+
+    13em : width of each outer column box
+   -
+     2em : horizontal margin of each div inside
+   =======
+    11em : width of each inner multi-column elements
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (11em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (11em - (2 * 1em)) / 3);
+  W == max(0, (11em - 2em) / 3);
+  W == max(0, 9em / 3);
+  W == max(0, 3em);
+  W == 3em;
+
+  */
+
+  div div:nth-child(2) {color: pink;}
+
+  div div:nth-child(3) {color: blue;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	<div>
+		bl ac
+		bl ac
+		bl ac
+		bl ac
+	</div>
+	<div>
+		Pi nk
+		Pi nk
+		Pi nk
+		Pi nk
+	</div>
+	<div>
+		bl ue
+		bl ue
+		bl ue
+		bl ue
+	</div>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000-ref.xht
new file mode 100644
index 000000000..079188169
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000-ref.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  table
+  {
+  background-color: yellow;
+  border-right: lime solid 1em;
+  border-spacing: 0px;
+  color: lime;
+  font: 1.25em/1 Ahem;
+  margin: 1em 0;
+  table-layout: fixed;
+  width: 21em;
+  }
+
+  td {padding: 0em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
+
+  <table><tr><td>G<br />H</td><td>I<br />J</td></tr></table>
+
+  <table><tr><td>G<br />H</td><td>I<br />J</td></tr></table>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000.xht
new file mode 100644
index 000000000..03fbef2f9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflow-000.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: multi-column with set height causing overflow outside (basic)</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" />
+  <link rel="match" href="multicol-overflow-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that column gap appears between two -moz-columns." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div, table
+  {
+  background-color: yellow;
+  color: lime;
+  font: 1.25em/1 Ahem;
+  margin: 1em 0;
+  }
+
+  div
+  {
+  -moz-columns: 2;
+  -moz-column-fill: balance;
+  -moz-column-gap: 0px;
+  height: 2em;
+  width: 20em;
+  }
+
+  table
+  {
+  border-right: lime solid 1em;
+  border-spacing: 0px;
+  table-layout: fixed;
+  width: 21em;
+  }
+
+  td {padding: 0em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
+
+  <div id="test">A<br />B<br />C<br />D<br />E<br />F</div>
+
+  <table id="reference"><tr><td>G<br />H</td><td>I<br />J</td></tr></table>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001-ref.xht
new file mode 100644
index 000000000..d3a6c6e03
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001-ref.xht
@@ -0,0 +1,209 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  div#rel-pos-wrapper
+  {
+  background-color: yellow;
+  font: 1.25em/1 serif;
+  height: 2em;
+  position: relative;
+  width: 32em;
+  }
+
+  div > div
+  {
+  font-size: 1em;
+  height: 2em;
+  position: absolute;
+  top: 0;
+  width: 2em;
+  }
+
+  div#black1
+  {
+  background-color: black;
+  left: 1em;
+  }
+
+  div#black2
+  {
+  background-color: black;
+  left: 4em;
+  }
+
+  div#black3
+  {
+  background-color: black;
+  left: 7em;
+  }
+
+  div#black4
+  {
+  background-color: black;
+  height: 1em;
+  left: 12em;
+  }
+
+  div#black5
+  {
+  background-color: black;
+  height: 1em;
+  left: 15em;
+  }
+
+  div#blue1
+  {
+  background-color: blue;
+  left: 23em;
+  }
+
+  div#blue2
+  {
+  background-color: blue;
+  left: 26em;
+  }
+
+  div#blue3
+  {
+  background-color: blue;
+  left: 29em;
+  }
+
+  div#blue4
+  {
+  background-color: blue;
+  height: 1em;
+  left: 34em;
+  }
+
+  div#yellow1
+  {
+  background-color: yellow;
+  height: 1em;
+  left: 36em;
+  width: 1em;
+  }
+
+  div#blue5
+  {
+  background-color: blue;
+  height: 1em;
+  left: 37em;
+  }
+
+  div#yellow2
+  {
+  background-color: yellow;
+  height: 1em;
+  left: 39em;
+  width: 3em;
+  }
+
+  div#pink1
+  {
+  background-color: pink;
+  left: 45em;
+  }
+
+  div#yellow3
+  {
+  background-color: yellow;
+  left: 47em;
+  width: 1em;
+  }
+
+  div#pink2
+  {
+  background-color: pink;
+  left: 48em;
+  }
+
+  div#yellow4
+  {
+  background-color: yellow;
+  left: 50em;
+  width: 1em;
+  }
+
+  div#pink3
+  {
+  background-color: pink;
+  left: 51em;
+  }
+
+  div#pink4
+  {
+  background-color: pink;
+  height: 1em;
+  left: 56em;
+  }
+
+  div#yellow5
+  {
+  background-color: yellow;
+  height: 1em;
+  left: 58em;
+  width: 1em;
+  }
+
+  div#pink5
+  {
+  background-color: pink;
+  height: 1em;
+  left: 59em;
+  }
+
+  div#yellow6
+  {
+  background-color: yellow;
+  height: 1em;
+  left: 61em;
+  width: 3em;
+  }
+
+  div#margin-right
+  {
+  background-color: transparent;
+  height: 1em;
+  left: 64em;
+  width: 1em;
+  }
+   ]]></style>
+ </head>
+ <body>
+
+  <div id="rel-pos-wrapper">
+	<div id="black1"></div>
+	<div id="black2"></div>
+	<div id="black3"></div>
+	<div id="black4"></div>
+	<div id="black5"></div>
+
+	<div id="blue1"></div>
+	<div id="blue2"></div>
+	<div id="blue3"></div>
+	<div id="blue4"></div>
+	<div id="yellow1"></div>
+	<div id="blue5"></div>
+	<div id="yellow2"></div>
+
+	<div id="pink1"></div>
+	<div id="yellow3"></div>
+	<div id="pink2"></div>
+	<div id="yellow4"></div>
+	<div id="pink3"></div>
+	<div id="pink4"></div>
+	<div id="yellow5"></div>
+	<div id="pink5"></div>
+	<div id="yellow6"></div>
+	<div id="margin-right"></div>
+
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001.xht
new file mode 100644
index 000000000..09ca664ae
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-overflowing-001.xht
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <!--
+  This test's original filename was multicol-inherit-003.xht
+  and it has been modified and is now
+  multicol-overflowing-001.xht
+  -->
+  <title>CSS Multi-column Layout Test: multicolumn and overflowing constrained dimensions</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-09 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements" />
+  <link rel="match" href="multicol-overflowing-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that the content of a multi-column element with a fixed height can overflow outside its fixed width according to the computed overflow value. In this test, the inline content of a multi-column element exceeds the available fixed height and fixed width for the multi-column element; therefore, it overflows outside of it and creates a 4th, 5th and 6th extra column boxes." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body > div
+  {
+  font: 1.25em/1 Ahem;
+  height: 2em;
+  width: 32em;
+
+  -moz-column-gap: 1em;
+  -moz-column-width: 8em;
+  }
+
+  /*
+
+  N == max(1, floor((available-width + -moz-column-gap) / (-moz-column-width + -moz-column-gap)));
+  N == max(1, floor((32em + 1em) / (8em + 1em)));
+  N == max(1, floor(33em / 9em));
+  N == max(1, floor(3.6));
+  N == max(1, 3);
+  N == 3;
+
+  W == ((available-width + -moz-column-gap) / N) - -moz-column-gap;
+  W == ((32em + 1em) / 3) - 1em;
+  W == (33em / 3) - 1em;
+  W == (11em) - 1em;
+  W == 10em;
+
+  H == 2em;
+
+  */
+
+  div
+  {
+  background: yellow;
+  color: black;
+  orphans: 1;
+  widows: 1;
+  }
+
+  div > div {margin: 0 1em 1em;}
+
+  div + div {color: blue;}
+
+  div + div + div {color: pink;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+	<div>
+		bl ac
+		bl ac
+		bl ac
+		bl ac
+	</div>
+	<div>
+		bl ue
+		bl ue
+		bl ue
+		bl ue
+	</div>
+	<div>
+		Pi nk
+		Pi nk
+		Pi nk
+		Pi nk
+	</div>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-red.png b/layout/reftests/w3c-css/received/css-multicol-1/multicol-red.png
new file mode 100644
index 000000000..2d79f2b29
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-red.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000-ref.xht
new file mode 100644
index 000000000..55eb43e27
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: black solid thin;
+  color: orange;
+  font: 1.25em/1 Ahem;
+  margin-bottom: 0.5em;
+  width: 30em;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 rectangles with orange and blue vertical stripes are <strong>identical</strong>.</p>
+
+  <div>
+  1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br />
+  9 0 1 2 3 4 5 6<span>I J K L M N O P </span>
+  </div>
+
+  <div>
+  1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br />
+  9 0 1 2 3 4 5 6<span>I J K L M N O P </span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000.xht
new file mode 100644
index 000000000..3a3364a88
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-reduce-000.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: column width becomes wider to fill available space</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-25 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1 '-moz-column-width'" />
+  <link rel="match" href="multicol-reduce-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that column width is increased to fill the available space: in this test, there are only 2 column boxes." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#test, div#reference
+  {
+  background-color: yellow;
+  border: black solid thin;
+  color: orange;
+  font: 1.25em/1 Ahem;
+  margin-bottom: 0.5em;
+  width: 30em;
+  }
+
+  div#test
+  {
+  -moz-column-gap: 0;
+  -moz-column-width: 201px;
+
+  /*
+
+  N == max(1, floor((U + -moz-column-gap)/(-moz-column-width + -moz-column-gap)))
+  N == max(1, floor((600px + 0px)/(201px + 0)))
+  N == max(1, floor(600px/201px))
+  N == max(1, floor(2.985))
+  N == max(1, 2)
+  N == 2;
+
+  W == max(0, ((U + -moz-column-gap)/N - -moz-column-gap))
+  W == max(0, ((600px + 0px)/2 - 0px))
+  W == max(0, ((600px)/2 - 0px))
+  W == max(0, (300px - 0px))
+  W == max(0, 300px)
+  W == 300px;
+
+  */
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 rectangles with orange and blue vertical stripes are <strong>identical</strong>.</p>
+
+  <div id="test">
+  1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 <span>A B C D E F G H I J K L M N O P</span>
+  </div>
+
+  <div id="reference">
+  1 2 3 4 5 6 7 8<span>A B C D E F G H </span><br />
+  9 0 1 2 3 4 5 6<span>I J K L M N O P </span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000-ref.xht
new file mode 100644
index 000000000..86a93ff1e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  color: black;
+  font: 1.25em/1 Ahem;
+  margin-bottom: 0.5em;
+  width: 602px;
+  }
+
+  span
+  {
+  border-left: lime solid 1px;
+  border-right: lime solid 1px;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
+
+  <div>
+  1234567890<span>ABCDEFGHIJ</span>1234567890
+  </div>
+
+  <div>
+  1234567890<span>ABCDEFGHIJ</span>1234567890
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000.xht
new file mode 100644
index 000000000..0effd0c22
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-000.xht
@@ -0,0 +1,63 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule shorthand (basic)</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  color: black;
+  font: 1.25em/1 Ahem;
+  margin-bottom: 0.5em;
+  width: 602px;
+  }
+
+  div#test
+  {
+  -moz-columns: 3;
+  -moz-column-gap: 1px;
+  -moz-column-rule: lime solid 1px;
+
+  /*
+
+  N == 3;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+
+  span
+  {
+  border-left: lime solid 1px;
+  border-right: lime solid 1px;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 horizontal bars are <strong>identical</strong>.</p>
+
+  <div id="test">
+  1234567890<br />ABCDEFGHIJ<br />1234567890
+  </div>
+
+  <div id="reference">
+  1234567890<span>ABCDEFGHIJ</span>1234567890
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001-ref.xht
new file mode 100644
index 000000000..ac8667da8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001-ref.xht
@@ -0,0 +1,33 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  color: green;
+  font: 1.25em/1 Ahem;
+  margin-bottom: 0.5em;
+  width: 20em;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if there are 2 green bars and <strong>no red</strong>.</p>
+
+  <div>12345678901234567890</div>
+
+  <div>12345678901234567890</div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001.xht
new file mode 100644
index 000000000..55c880be3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-001.xht
@@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule exceeding -moz-column-gap</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" />
+  <link rel="match" href="multicol-rule-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="If a column rule is wider than its gap, then the adjacent column boxes overlap the rule. This test checks that if inline content of column boxes uses only 1 twentieth (1/20) of each of the adjacent column box width, then the column rule must shine through 19 twentieths (19/20) of each of the adjacent column boxes (and above their respective backgrounds)." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: red;
+  color: green;
+  font: 1.25em/1 Ahem;
+  margin-bottom: 0.5em;
+  width: 20em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-gap: 0em;
+  -moz-column-rule: green solid 20em;
+
+  /*
+
+  N == 2;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if there are 2 green bars and <strong>no red</strong>.</p>
+
+  <div id="test">1<br />2</div>
+
+  <div id="reference">12345678901234567890</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-002.xht
new file mode 100644
index 000000000..f1b9c2c48
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-002.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-rule</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/>
+<link rel="match" href="multicol-rule-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 15em;
+	position: relative;
+	orphans: 1;
+	widows: 1;
+
+	-moz-column-count: 4;
+	-moz-column-gap: 1em;
+}
+span {
+	background: blue;
+	position: absolute;
+	top: 0;
+	left: 3em;
+	height: 2em;
+	width: 1em;
+}
+span+span {
+	left: 7em;
+}
+span+span+span {
+	left: 11em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	xx xx
+<span>
+</span>
+	xx xx
+<span>
+</span>
+	xx xx
+<span>
+</span>
+	xx xx
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003-ref.xht
new file mode 100644
index 000000000..3474589dd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003-ref.xht
@@ -0,0 +1,27 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  width: 15em;
+  }
+
+  img {vertical-align: top;}
+
+  img.yellow {padding-left: 2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="20" height="40" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003.xht
new file mode 100644
index 000000000..ea2565c0d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-003.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" />
+  <link rel="match" href="multicol-rule-003-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 15em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 1em;
+  -moz-column-rule-color: blue;
+  -moz-column-rule-style: solid;
+  -moz-column-rule-width: 1em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+  1s cl
+  2n cl
+  3r cl
+  4t cl
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004-ref.xht
new file mode 100644
index 000000000..15558fe0e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-02 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  p
+  {
+  line-height: 1.25em;
+  margin: 1em 0em;
+  }
+
+  strong {line-height: 1;}
+
+  div
+  {
+  background-color: green;
+  height: 100px;
+  left: 8px;
+  position: absolute;
+  top: 52px;
+  width: 100px;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004.xht
new file mode 100644
index 000000000..52fafe4a6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-004.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-fill: balance' and -moz-column-rule</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-02 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules" />
+  <link rel="match" href="multicol-rule-004-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that when '-moz-column-fill: balance' distributes equally inline content into column boxes in a way that does not completely fill column boxes, then -moz-column-rule must nevertheless still be painted entirely, that is for the whole length of column boxes, even though the whole inline content may not fill the whole length of the column boxes." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  p
+  {
+  line-height: 1.25em;
+  margin: 1em 0em;
+  }
+
+  strong {line-height: 1;}
+
+  div#red-overlapped-reference
+  {
+  background-color: red;
+  height: 100px;
+  width: 100px;
+  }
+
+  div#test-overlapping-green
+  {
+  bottom: 100px;
+  color: transparent;
+  font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */
+  height: 5em;
+  position: relative;
+  right: 80px;
+  width: 13em;
+
+  -moz-column-count: 2;
+  -moz-column-fill: balance;
+  -moz-column-gap: 5em;
+  -moz-column-rule: green solid 5em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="red-overlapped-reference"></div>
+
+  <div id="test-overlapping-green">LEFT Colm RIGH Colm</div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001-ref.xht
new file mode 100644
index 000000000..aac462164
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001-ref.xht
@@ -0,0 +1,27 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  width: 14em;
+  }
+
+  img {vertical-align: top;}
+
+  img.white {padding-left: 2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="20" height="40" alt="Image download support must be enabled" /><img class="white" src="support/swatch-white.png" width="15" height="40" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001.xht
new file mode 100644
index 000000000..2c87fa7c7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-001.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule-color (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-color-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  border: gray solid 1em;
+  color: lime;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 14em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 1em;
+  -moz-column-rule-color: blue;
+  -moz-column-rule-style: solid;
+  -moz-column-rule-width: 1em;
+  }
+
+  /*
+
+  N == 4;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (14em - ((4 - 1) * 1em)) / 4);
+  W == max(0, (14em - (3 * 1em)) / 4);
+  W == max(0, (14em - (3em)) / 4);
+  W == max(0, (11em) / 4);
+  W == max(0, 2.75em);
+  W == 2.75em;
+
+  */
+
+  span {color: black;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+  <span>1s cl</span>
+  <span>2n cl</span>
+  <span>3r cl</span>
+  <span>4t cl</span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001-ref.xht
new file mode 100644
index 000000000..8bf2d7d2d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001-ref.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div {font-size: 1.25em;}
+  img {padding-left: 1em;}
+   ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p>
+
+  <div>
+  <img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" /><img src="support/swatch-green.png" width="20" height="120" alt="Image download support must be enabled" />
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001.xht
new file mode 100644
index 000000000..bdb32efa4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-001.xht
@@ -0,0 +1,143 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule-color: inherit</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-02 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. '-moz-column-rule-color'" />
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" />
+  <link rel="match" href="multicol-rule-color-inherit-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that, by default, -moz-column-rule-color is the current color applying to the element unless reserved keyword 'inherit' is used in which case -moz-column-rule-color will be inherited from the parent's -moz-column-rule-color value." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#parent
+  {
+  -moz-column-rule-color: green;
+  -moz-column-rule-style: none;
+  font: 1.25em/1 Ahem;
+  width: 17em;
+  }
+
+  /*
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (17em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (17em - (2 * 1em)) / 3);
+  W == max(0, (17em - 2em) / 3);
+  W == max(0, 15em / 3);
+  W == max(0, 5em);
+  W == 5em;
+
+  The height of column rule depends on number of line boxes in
+  each outer column box which depends on number of line boxes
+  in each inner column box.
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (5em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (5em - (2 * 1em)) / 3);
+  W == max(0, (5em - 2em) / 3);
+  W == max(0, 3em / 3);
+  W == max(0, 1em);
+  W == 1em;
+
+  */
+
+  div
+  {
+  color: red; /* both div#parent and div.child have and use 'color: red' */
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 1em;
+  -moz-column-rule-width: 1em;
+  }
+
+  div.child
+  {
+  -moz-column-rule-color: inherit;
+  -moz-column-rule-style: solid;
+  font-size: 1em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p>
+
+  <div id="parent">
+	<div class="child">
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+	</div>
+	<div class="child">
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+	</div>
+	<div class="child">
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+		&nbsp;
+	</div>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-002.xht
new file mode 100644
index 000000000..297f66140
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-color-inherit-002.xht
@@ -0,0 +1,127 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule-color: inherit (complex)</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 and 2016-10-02 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. '-moz-column-rule-color'" />
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'" />
+  <link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color" title="5.2. The 'currentcolor' keyword" />
+  <link rel="match" href="multicol-rule-color-inherit-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="In this test, div#parent's computed '-moz-column-rule-color' is given by div#parent's 'currentcolor' (a reserved keyword) and not 'red'. Then div.child's '-moz-column-rule-color' take such specified value ('currentcolor') from its parent (due to 'inherit' keyword) and not 'red'. And then, it is applied to div.child's '-moz-column-rule-color'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#parent
+  {
+  color: red;
+  font: 20px/1 Ahem;
+  }
+
+  div.child
+  {
+  color: green;
+  display: inline-block;
+  font-size: 1em;
+  width: 5em;
+
+  -moz-column-count: 3;
+  -moz-column-gap: 1em;
+  -moz-column-rule-color: inherit;
+  -moz-column-rule-style: solid;
+  -moz-column-rule-width: 1em;
+  }
+
+  /*
+
+  N == 3;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (5em - ((3 - 1) * 1em)) / 3);
+  W == max(0, (5em - (2 * 1em)) / 3);
+  W == max(0, (5em - 2em) / 3);
+  W == max(0, 3em / 3);
+  W == max(0, 1em);
+  W == 1em;
+
+  */
+
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p>
+
+  <div id="parent">
+	<div class="child">
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	</div>
+
+	<div class="child">
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	</div>
+
+	<div class="child">
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	&nbsp;
+	</div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000-ref.xht
new file mode 100644
index 000000000..f4f21267f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  span {border-left: lime dashed 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div>1234<span>5678</span></div>
+
+  <div>1234<span>5678</span></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000.xht
new file mode 100644
index 000000000..610d0f69b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dashed-000.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'dashed' border style</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-dashed-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-gap: 0.2em;
+  -moz-column-rule: lime dashed 0.2em;
+
+  /*
+
+  N == 2;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+
+  span {border-left: lime dashed 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div id="test">1 <br />2 </div>
+
+  <div id="reference">1234<span>5678</span></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000-ref.xht
new file mode 100644
index 000000000..2cb139f0b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  span {border-left: lime dotted 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with green dots in their center are <strong>identical</strong>.</p>
+
+  <div>1234<span>5678</span></div>
+
+  <div>1234<span>5678</span></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000.xht
new file mode 100644
index 000000000..71d772bfd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-dotted-000.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'dotted' border style</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-dotted-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-gap: 0.2em;
+  -moz-column-rule: lime dotted 0.2em;
+
+  /*
+
+  N == 2;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+
+  span {border-left: lime dotted 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with green dots in their center are <strong>identical</strong>.</p>
+
+  <div id="test">1 <br />2 </div>
+
+  <div id="reference">1234<span>5678</span></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000-ref.xht
new file mode 100644
index 000000000..b84d7a2ed
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  span {border-left: lime double 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div>1234<span>5678</span></div>
+
+  <div>1234<span>5678</span></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000.xht
new file mode 100644
index 000000000..eed57c4e4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-double-000.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'double' border style</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-double-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-gap: 0.2em;
+  -moz-column-rule: lime double 0.2em;
+
+  /*
+
+  N == 2;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+
+  span {border-left: lime double 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div id="test">1 <br />2 </div>
+
+  <div id="reference">1234<span>5678</span></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001-ref.xht
new file mode 100644
index 000000000..29ab6de4a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001-ref.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  width: 14em;
+  }
+
+  img {vertical-align: top;}
+
+  img.yellow {padding-left: 2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="18" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="18" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="16" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png"
+width="18" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="1" height="40" alt="Image download support must be enabled" /><img class="yellow" src="support/swatch-yellow.png" width="15" height="40" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001.xht
new file mode 100644
index 000000000..9d4e13057
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-001.xht
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule-width</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" />
+  <link rel="match" href="multicol-rule-fraction-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 14em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 1em;
+  -moz-column-rule-color: blue;
+  -moz-column-rule-style: solid;
+  -moz-column-rule-width: 0.9em;
+  }
+
+  /*
+
+  N == 4;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (14em - ((4 - 1) * 1em)) / 4);
+  W == max(0, (14em - (3 * 1em)) / 4);
+  W == max(0, (14em - (3em)) / 4);
+  W == max(0, (11em) / 4);
+  W == max(0, 2.75em);
+  W == 2.75em;
+
+  */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+  1s cl
+  2n cl
+  3r cl
+  4t cl
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002-ref.xht
new file mode 100644
index 000000000..ca395f2a3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002-ref.xht
@@ -0,0 +1,24 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  width: 14em;
+  }
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="6" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="29" height="40" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="15" height="40" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002.xht
new file mode 100644
index 000000000..eda6b0690
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-002.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: wide -moz-column-rule-width painted above background-color</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" />
+  <link rel="match" href="multicol-rule-fraction-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that if a column rule is wider than its gap, then the column rule will overlap adjacent column boxes above the background of the multi-column element but below the inline content inside the multicol element. In this test, the blue -moz-column-rule is painted above the yellow background-color but below (under) the black Ahem glyphs." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 14em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 1em;
+  -moz-column-rule-color: blue;
+  -moz-column-rule-style: solid;
+  -moz-column-rule-width: 1.9em;
+  }
+
+  /*
+
+  N == 4;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (14em - ((4 - 1) * 1em)) / 4);
+  W == max(0, (14em - (3 * 1em)) / 4);
+  W == max(0, (14em - (3em)) / 4);
+  W == max(0, (11em) / 4);
+  W == max(0, 2.75em);
+  W == 2.75em;
+
+  */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+  1s cl
+  2n cl
+  3r cl
+  4t cl
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-003.xht
new file mode 100644
index 000000000..1e1814c99
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-003.xht
@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-rule</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/>
+<link rel="match" href="multicol-rule-fraction-3-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 14em;
+	position: relative;
+	orphans: 1;
+	widows: 1;
+
+	-moz-column-count: 4;
+	-moz-column-gap: 1em;
+}
+span {
+	background: blue;
+	position: absolute;
+	top: 0;
+	left: 2.4em;
+	height: 2em;
+	width: 1em;
+}
+span+span {
+	left: 6.15em;
+}
+span+span+span {
+	left: 9.9em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	xx xx
+<span>
+</span>
+	xx xx
+<span>
+</span>
+	xx xx
+<span>
+</span>
+	xx xx
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-3-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-3-ref.xht
new file mode 100644
index 000000000..c023d6b16
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-fraction-3-ref.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-rule</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 14em;
+	height: 2em;
+	position: relative;
+}
+div div {
+	width: 2em;
+	height: 2em;
+	background: black;
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+.a {
+	background: blue;
+	width: 1em;
+}
+#a1 {left: 2.43em;}
+#a2 {left: 3.75em;}
+#a3 {left: 6.13em;}
+#a4 {left: 7.5em;}
+#a5 {left: 9.9em;}
+#a6 {left: 11.25em;}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<div></div>
+	<div id="a1" class="a"></div>
+	<div id="a2"></div>
+	<div id="a3" class="a"></div>
+	<div id="a4"></div>
+	<div id="a5" class="a"></div>
+	<div id="a6"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000-ref.xht
new file mode 100644
index 000000000..b6099842d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  span {border-left: lime groove 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div>1234<span>5678</span></div>
+
+  <div>1234<span>5678</span></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000.xht
new file mode 100644
index 000000000..10c93a5cb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-groove-000.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'groove' border style</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-groove-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-gap: 0.2em;
+  -moz-column-rule: lime groove 0.2em;
+
+  /*
+
+  N == 2;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+
+  span {border-left: lime groove 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div id="test">1 <br />2 </div>
+
+  <div id="reference">1234<span>5678</span></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000-ref.xht
new file mode 100644
index 000000000..a570954df
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000-ref.xht
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  font: 3.125em/1 serif;
+  height: 1em;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes are <strong>identical</strong>.</p>
+
+  <div></div>
+
+  <div></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000.xht
new file mode 100644
index 000000000..ba41fc692
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-hidden-000.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'hidden' border style</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-hidden-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-gap: 0.2em;
+  -moz-column-rule: red hidden 0.2em;
+
+  /*
+
+  N == 2;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes are <strong>identical</strong>.</p>
+
+  <div id="test">1 <br />2 </div>
+
+  <div id="reference">A</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-inset-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-inset-000.xht
new file mode 100644
index 000000000..4ae1b4ebf
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-inset-000.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'inset' border style</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-ridge-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="'border-style' values of -moz-column-rule are interpreted as in the collapsing border model in which case 'inset' value is drawn the same as 'ridge'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-gap: 0.2em;
+  -moz-column-rule: lime inset 0.2em;
+
+  /*
+
+  N == 2;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+
+  span {border-left: lime ridge 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div id="test">1 <br />2 </div>
+
+  <div id="reference">1234<span>5678</span></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001-ref.xht
new file mode 100644
index 000000000..d478fe264
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001-ref.xht
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  body
+  {
+  font: 1.25em/1 serif;
+  margin-left: 0em;
+  }
+
+  div:first-child, div + div + div {margin-left: 1em;}
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div><img src="support/swatch-gray.png" width="340" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="120" height="40" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="340" height="20" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001.xht
new file mode 100644
index 000000000..16d43cbba
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-large-001.xht
@@ -0,0 +1,73 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: excessively wide -moz-column-rule-width</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-09-03 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" />
+  <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Sep/0006.html" title="[css3-multicol] z-order of -moz-column-rule: below or above border?" />
+  <link rel="match" href="multicol-rule-large-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that if a column rule is wider than its gap, then the column rule will overlap adjacent column boxes; its painting will be above background of multi-column element but below the inline content inside the multicol element." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body
+  {
+  font: 1.25em/1 Ahem;
+  margin-left: 1em;
+  }
+
+  div
+  {
+  background-color: red;
+  border: gray solid 1em;
+  color: lime;
+  font-size: 1em;
+  orphans: 1;
+  widows: 1;
+  width: 15em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 1em;
+  -moz-column-rule-color: blue;
+  -moz-column-rule-style: solid;
+  -moz-column-rule-width: 17em;
+  }
+
+  /*
+
+  N == 4;
+
+  W == max(0, (available-width - ((N - 1) * -moz-column-gap)) / N);
+  W == max(0, (15em - ((4 - 1) * 1em)) / 4);
+  W == max(0, (15em - (3 * 1em)) / 4);
+  W == max(0, (15em - (3em)) / 4);
+  W == max(0, (12em) / 4);
+  W == max(0, 3em);
+  W == 3em;
+
+  */
+
+  /*
+  Since column rules do not take up space, then the test
+  should not generate an horizontal scrollbar.
+  */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+  1s cl
+  2n cl
+  3r cl
+  4t cl
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-none-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-none-000.xht
new file mode 100644
index 000000000..43a8ccd70
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-none-000.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'none' border style</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-hidden-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-gap: 0.2em;
+  -moz-column-rule: red none 0.2em;
+
+  /*
+
+  N == 2;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes are <strong>identical</strong>.</p>
+
+  <div id="test">1 <br />2 </div>
+
+  <div id="reference">A</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-outset-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-outset-000.xht
new file mode 100644
index 000000000..cddec7d5c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-outset-000.xht
@@ -0,0 +1,57 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'outset' border style</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-groove-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="'border-style' values of -moz-column-rule are interpreted as in the collapsing border model in which case 'outset' value is drawn the same as 'groove'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-gap: 0.2em;
+  -moz-column-rule: lime outset 0.2em;
+
+  /*
+
+  N == 2;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+
+  span {border-left: lime groove 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div id="test">1 <br />2 </div>
+
+  <div id="reference">1234<span>5678</span></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-percent-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-percent-001.xht
new file mode 100644
index 000000000..8eab762a1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-percent-001.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule-width and percentage unit (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-14 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" />
+  <link rel="match" href="multicol-containing-002-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+  <meta name="assert" content="This test checks that the -moz-column-rule-width property does not accept percentage unit in its values." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  color: green;
+  font: 1.25em/1 Ahem;
+  width: 19em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 1em;
+  -moz-column-rule-color: red;
+  -moz-column-rule-style: solid;
+  -moz-column-rule-width: 0;
+  -moz-column-rule-width: 200%;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>4444 1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 4444 1&nbsp;&nbsp; 1&nbsp;&nbsp; 1&nbsp;&nbsp; 4444 1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 4444 1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 4444 1&nbsp;&nbsp; 1&nbsp;&nbsp; 4444 &nbsp;&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1 4444 4444 1&nbsp;&nbsp; 1&nbsp;&nbsp; 4444 &nbsp;&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1 4444</div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-px-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-px-001.xht
new file mode 100644
index 000000000..4ae8133c2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-px-001.xht
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-rule</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/>
+<link rel="match" href="multicol-rule-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 15em;
+	orphans: 1;
+	widows: 1;
+
+	-moz-column-count: 4;
+	-moz-column-gap: 1em;
+	-moz-column-rule-color: blue;
+	-moz-column-rule-width: 16px;
+	-moz-column-rule-style: solid;
+}
+span {
+	background: blue;
+	position: absolute;
+	top: 0;
+	left: 3em;
+	height: 2em;
+	width: 16px;
+}
+span+span {
+	left: 7em;
+}
+span+span+span {
+	left: 11em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div id="one">
+	xx xx
+	xx xx
+	xx xx
+	xx xx
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ref.xht
new file mode 100644
index 000000000..a4bcad4b7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ref.xht
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-rule</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 15em;
+	height: 2em;
+}
+div div {
+	width: 2em;
+	height: 2em;
+	float: left;
+}
+.a {
+	color: blue;
+	width: 1em;
+	margin-left: 1em;
+}
+div+div+div {
+	left: 11em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<div>xx xx</div>
+	<div class="a">x x</div>
+	<div>xx xx</div>
+	<div class="a">x x</div>
+	<div>xx xx</div>
+	<div class="a">x x</div>
+	<div>xx xx</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000-ref.xht
new file mode 100644
index 000000000..69212b632
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  span {border-left: lime ridge 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div>1234<span>5678</span></div>
+
+  <div>1234<span>5678</span></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000.xht
new file mode 100644
index 000000000..690196335
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-ridge-000.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'ridge' border style</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-ridge-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-gap: 0.2em;
+  -moz-column-rule: lime ridge 0.2em;
+
+  /*
+
+  N == 2;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+
+  span {border-left: lime ridge 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div id="test">1 <br />2 </div>
+
+  <div id="reference">1234<span>5678</span></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001-ref.xht
new file mode 100644
index 000000000..9cc627227
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001-ref.xht
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  p
+  {
+  line-height: 1.25em;
+  margin: 1em 0em;
+  }
+
+  strong {line-height: 1;}
+
+  div
+  {
+  background-color: green;
+  height: 100px;
+  width: 100px;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001.xht
new file mode 100644
index 000000000..fc0521de1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-samelength-001.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-rule-width' has same lenght as '-moz-column-gap'</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" />
+  <link rel="match" href="multicol-rule-samelength-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  p
+  {
+  line-height: 1.25em;
+  margin: 1em 0em;
+  }
+
+  strong {line-height: 1;}
+
+  div#red-overlapped-reference
+  {
+  background-color: red;
+  height: 100px;
+  width: 100px;
+  }
+
+  div#test-overlapping-green
+  {
+  bottom: 100px;
+  color: transparent;
+  font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */
+  position: relative;
+  right: 40px;
+  width: 9em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 5em;
+  -moz-column-rule-color: green;
+  -moz-column-rule-style: solid;
+  -moz-column-rule-width: 5em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="red-overlapped-reference"></div>
+
+  <div id="test-overlapping-green">Le ft Co lu mn Ri gh Co lu mn</div>
+
+  <!--
+
+  Expected results
+    -moz-column-gap
+    -moz-column-rule
+     v=====v
+  *************
+  |Le|     |Ri|
+  |ft|     |gh|
+  |Co|     |Co|
+  |lu|     |lu|
+  |mn|     |mn|
+  *************
+
+  -->
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-shorthand-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-shorthand-001.xht
new file mode 100644
index 000000000..e8ae8951a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-shorthand-001.xht
@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-rule' shorthand</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crw" title="4.4. '-moz-column-rule-width'" />
+  <link rel="match" href="multicol-rule-samelength-001-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  p
+  {
+  line-height: 1.25em;
+  margin: 1em 0em;
+  }
+
+  strong {line-height: 1;}
+
+  div#red-overlapped-reference
+  {
+  background-color: red;
+  height: 100px;
+  width: 100px;
+  }
+
+  div#test-overlapping-green
+  {
+  bottom: 100px;
+  color: transparent;
+  font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */
+  position: relative;
+  right: 40px;
+  width: 9em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 5em;
+  -moz-column-rule: green solid 5em;
+  -moz-column-rule: normal red 5em;
+  -moz-column-rule: normal 5em red;
+  -moz-column-rule: red normal 5em;
+  -moz-column-rule: red 5em normal;
+  -moz-column-rule: 5em normal red;
+  -moz-column-rule: 5em red normal;
+  -moz-column-rule: red 5em red solid;
+  -moz-column-rule: red 5em solid red;
+  -moz-column-rule: red solid 5em red;
+  -moz-column-rule: red solid red 5em;
+  -moz-column-rule: 5em red solid red;
+  -moz-column-rule: solid red 5em red;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div id="red-overlapped-reference"></div>
+
+  <div id="test-overlapping-green">Le ft Co lu mn Ri gh Co lu mn</div>
+
+  <!--
+
+  Expected results
+    -moz-column-gap
+    -moz-column-rule
+     v=====v
+  *************
+  |Le|     |Ri|
+  |ft|     |gh|
+  |Co|     |Co|
+  |lu|     |lu|
+  |mn|     |mn|
+  *************
+
+  -->
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000-ref.xht
new file mode 100644
index 000000000..ddc0248cf
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  span {border-left: lime solid 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div>1234<span>5678</span></div>
+
+  <div>1234<span>5678</span></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000.xht
new file mode 100644
index 000000000..af8310448
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-solid-000.xht
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-rule shorthand with 'solid' border style</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-rule-solid-000-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  color: black;
+  font: 3.125em/1 Ahem;
+  margin-bottom: 0.2em;
+  width: 8.2em;
+  }
+
+  div#test
+  {
+  -moz-columns: 2;
+  -moz-column-gap: 0.2em;
+  -moz-column-rule: lime solid 0.2em;
+
+  /*
+
+  N == 2;
+
+  W == 200px;
+
+  */
+
+  orphans: 1;
+  widows: 1;
+  }
+
+  span {border-left: lime solid 0.2em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
+
+  <div id="test">1 <br />2 </div>
+
+  <div id="reference">1234<span>5678</span></div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-001.xht
new file mode 100644
index 000000000..419d19f25
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-001.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-count, stacking</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules"/>
+<link rel="match" href="multicol-rule-stacking-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: blue;
+	background: red;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 14em;
+	orphans: 1;
+	widows: 1;
+
+	-moz-column-count: 4;
+	-moz-column-gap: 1em;
+	-moz-column-rule: 28em solid blue;
+}
+span {
+	color: black;
+	position: relative;
+	z-index: 1;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	xx xx
+	xx xx
+	<span>xx xx</span>
+	xx xx
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-ref.xht
new file mode 100644
index 000000000..39f2bd921
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-stacking-ref.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-rule</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: blue;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 14em;
+	height: 2em;
+	position: relative;
+}
+span {
+	margin-left: 7.5em;
+	width: 2em;
+	height: 2em;
+	display: inline-block;
+}
+div div {
+	background: blue;
+	position: absolute;
+	height: 2em;
+	width: 2em;
+	top: 0;
+	left: -2em;
+}
+div div+div {
+	left: 13em;
+	width: 11.75em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<span>xx xx</span>
+	<div></div>
+	<div></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001-ref.xht
new file mode 100644
index 000000000..523b57085
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001-ref.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  p
+  {
+  line-height: 1.25em;
+  margin: 1em 0em;
+  }
+
+  strong {line-height: 1;}
+
+  div
+  {
+  border-collapse: collapse;
+  border-left: orange groove 100px;
+  color: transparent;
+  display: table;
+  font: 6.25em/1 Ahem;
+  }
+
+  div + div
+  {
+  position: relative;
+  top: 10px;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p>
+
+  <div>T</div>
+
+  <div>T</div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001.xht
new file mode 100644
index 000000000..133e5ab30
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-groove-001.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-rule-style' groove</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crs" title="4.3. '-moz-column-rule-style'" />
+  <link rel="match" href="multicol-rule-style-groove-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  p
+  {
+  line-height: 1.25em;
+  margin: 1em 0em;
+  }
+
+  strong {line-height: 1;}
+
+  div {color: transparent;}
+
+  div#reference
+  {
+  border-collapse: collapse;
+  border-left: orange groove 100px;
+  font: 6.25em/1 Ahem;
+  display: table;
+  }
+
+  div#test
+  {
+  font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */
+  position: relative;
+  right: 40px;
+  top: 0.5em;
+  width: 9em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 5em;
+  -moz-column-rule: orange groove 5em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p>
+
+  <div id="reference">T</div>
+
+  <div id="test">Le ft Co lu mn Ri gh Co lu mn</div>
+
+  <!--
+
+  Expected results
+    -moz-column-gap
+    -moz-column-rule
+     v=====v
+  *************
+  |Le|     |Ri|
+  |ft|     |gh|
+  |Co|     |Co|
+  |lu|     |lu|
+  |mn|     |mn|
+  *************
+
+  -->
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-inset-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-inset-001.xht
new file mode 100644
index 000000000..b6f4a2eea
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-inset-001.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-rule-style' inset</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crs" title="4.3. '-moz-column-rule-style'" />
+  <link rel="match" href="multicol-rule-style-ridge-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  p
+  {
+  line-height: 1.25em;
+  margin: 1em 0em;
+  }
+
+  strong {line-height: 1;}
+
+  div {color: transparent;}
+
+  div#reference
+  {
+  border-collapse: collapse;
+  border-left: orange inset 100px;
+  font: 6.25em/1 Ahem;
+  display: table;
+  }
+
+  div#test
+  {
+  font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */
+  position: relative;
+  right: 40px;
+  top: 0.5em;
+  width: 9em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 5em;
+  -moz-column-rule: orange inset 5em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p>
+
+  <div id="reference">T</div>
+
+  <div id="test">Le ft Co lu mn Ri gh Co lu mn</div>
+
+  <!--
+
+  Expected results
+    -moz-column-gap
+    -moz-column-rule
+     v=====v
+  *************
+  |Le|     |Ri|
+  |ft|     |gh|
+  |Co|     |Co|
+  |lu|     |lu|
+  |mn|     |mn|
+  *************
+
+  -->
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-outset-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-outset-001.xht
new file mode 100644
index 000000000..8a6c4adf3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-outset-001.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-rule-style' outset</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crs" title="4.3. '-moz-column-rule-style'" />
+  <link rel="match" href="multicol-rule-style-groove-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  p
+  {
+  line-height: 1.25em;
+  margin: 1em 0em;
+  }
+
+  strong {line-height: 1;}
+
+  div {color: transparent;}
+
+  div#reference
+  {
+  border-collapse: collapse;
+  border-left: orange outset 100px;
+  font: 6.25em/1 Ahem;
+  display: table;
+  }
+
+  div#test
+  {
+  font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */
+  position: relative;
+  right: 40px;
+  top: 0.5em;
+  width: 9em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 5em;
+  -moz-column-rule: orange outset 5em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p>
+
+  <div id="reference">T</div>
+
+  <div id="test">Le ft Co lu mn Ri gh Co lu mn</div>
+
+  <!--
+
+  Expected results
+    -moz-column-gap
+    -moz-column-rule
+     v=====v
+  *************
+  |Le|     |Ri|
+  |ft|     |gh|
+  |Co|     |Co|
+  |lu|     |lu|
+  |mn|     |mn|
+  *************
+
+  -->
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001-ref.xht
new file mode 100644
index 000000000..5e6f59c51
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001-ref.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  p
+  {
+  line-height: 1.25em;
+  margin: 1em 0em;
+  }
+
+  strong {line-height: 1;}
+
+  div
+  {
+  border-collapse: collapse;
+  border-left: orange ridge 100px;
+  color: transparent;
+  display: table;
+  font: 6.25em/1 Ahem;
+  }
+
+  div + div
+  {
+  position: relative;
+  top: 10px;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p>
+
+  <div>T</div>
+
+  <div>T</div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001.xht
new file mode 100644
index 000000000..88cdf1a59
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-rule-style-ridge-001.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-rule-style' ridge</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-15 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crs" title="4.3. '-moz-column-rule-style'" />
+  <link rel="match" href="multicol-rule-style-ridge-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body {margin: 8px;}
+
+  p
+  {
+  line-height: 1.25em;
+  margin: 1em 0em;
+  }
+
+  strong {line-height: 1;}
+
+  div {color: transparent;}
+
+  div#reference
+  {
+  border-collapse: collapse;
+  border-left: orange ridge 100px;
+  font: 6.25em/1 Ahem;
+  display: table;
+  }
+
+  div#test
+  {
+  font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */
+  position: relative;
+  right: 40px;
+  top: 0.5em;
+  width: 9em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 5em;
+  -moz-column-rule: orange ridge 5em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p>
+
+  <div id="reference">T</div>
+
+  <div id="test">Le ft Co lu mn Ri gh Co lu mn</div>
+
+  <!--
+
+  Expected results
+    -moz-column-gap
+    -moz-column-rule
+     v=====v
+  *************
+  |Le|     |Ri|
+  |ft|     |gh|
+  |Co|     |Co|
+  |lu|     |lu|
+  |mn|     |mn|
+  *************
+
+  -->
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-shorthand-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-shorthand-001.xht
new file mode 100644
index 000000000..5e5ccfd2b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-shorthand-001.xht
@@ -0,0 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | invalid</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/>
+<link rel="match" href="multicol-rule-ref.xht"/>
+<meta name="flags" content="ahem invalid"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 15em;
+	orphans: 1;
+	widows: 1;
+
+	-moz-column-count: 4;
+	-moz-column-gap: 1em;
+	-moz-column-rule: solid blue 1em;
+	column: normal red 1em;
+	-moz-columns: normal red 1em;
+}
+span {
+	background: blue;
+	position: absolute;
+	top: 0;
+	left: 3em;
+	height: 2em;
+	width: 1em;
+}
+span+span {
+	left: 7em;
+}
+span+span+span {
+	left: 11em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	xx xx
+	xx xx
+	xx xx
+	xx xx
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000-ref.xht
new file mode 100644
index 000000000..7c076f4e3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000-ref.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  font-size: 1.25em;
+  line-height: 1;
+  margin-bottom: 0.5em;
+  width: 10em;
+  }
+
+  img
+  {
+  padding-right: 4em;
+  vertical-align: top;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 3 rectangles are <strong>identical</strong>.</p>
+
+  <div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000.xht
new file mode 100644
index 000000000..e817b4f16
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-000.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-span (basic)</title>
+  <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-27 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 '-moz-column-rule'" />
+  <link rel="match" href="multicol-span-000-ref.xht" />
+  <meta name="flags" content="ahem image" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  color: lime;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 10em;
+  }
+
+  div#test, div.test2
+  {
+  -moz-columns: 2;
+  -moz-column-fill: balance;
+  -moz-column-gap: 0em;
+
+  /*
+
+  N == 2;
+
+  W == 5em;
+
+  */
+  }
+
+  div#test, div#reference {margin-bottom: 0.5em;}
+
+  div#column-span
+  {
+  -moz-column-span: all;
+  font: inherit;
+  }
+
+  img
+  {
+  padding-right: 4em;
+  vertical-align: top;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <p>Test passes if the 3 rectangles are <strong>identical</strong>.</p>
+
+  <div id="test">A<br />B<div id="-moz-column-span">123456</div>C<br />D</div>
+
+  <div id="reference"><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="120" height="20" alt="Image download support must be enabled" /><br /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-lime.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div class="test2">A<br />B</div>
+  <div>123456</div>
+  <div class="test2">C<br />D</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001-ref.xht
new file mode 100644
index 000000000..f00eb944e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001-ref.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div#inline-block
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  display: inline-block;
+  font-size: 1.25em;
+  }
+
+  div + div {line-height: 1;}
+
+  img {vertical-align: top;}
+
+  img.padding-left {padding-left: 1em;}
+
+  img.padding-left-right {padding: 0em 1em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div id="inline-block">
+
+    <div><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left-right" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" /></div>
+
+    <div><img src="support/black20x20.png" width="220" height="20" alt="Image download support must be enabled" /></div>
+
+    <div><img src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left" src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /><img class="padding-left-right" src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="40" height="40" alt="Image download support must be enabled" /></div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001.xht
new file mode 100644
index 000000000..5eefa4aa9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-001.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-span' element (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="match" href="multicol-span-all-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: navy;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 1em;
+
+  /*
+
+  N == 4;
+
+  W == 2em;
+
+  */
+
+  }
+
+  span {color: blue;}
+
+  span + span {color: pink;}
+
+  h4
+  {
+  background-color: black;
+  color: black;
+  font: inherit;
+  margin: 0;
+
+  -moz-column-span: all;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+    <span id="top-first-and-second-columns"> bl ue bl ue </span>
+    <span id="top-third-and-fourth-columns"> Pi nk Pi nk </span>
+    <h4> sPana </h4>
+    ab cd ef gh
+    ij kl mn oq
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002-ref.xht
new file mode 100644
index 000000000..b046cfaf4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002-ref.xht
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div#inline-block
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  display: inline-block;
+  font-size: 1.25em;
+  }
+
+  div + div {line-height: 1;}
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div id="inline-block">
+
+    <div><img src="support/swatch-blue.png" width="80" height="40" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="40" alt="Image download support must be enabled" /></div>
+
+    <div><img src="support/swatch-yellow.png" width="160" height="60" alt="Image download support must be enabled" /></div>
+
+    <div><img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /></div>
+
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002.xht
new file mode 100644
index 000000000..62def5e2b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-002.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-span' element - large margin-left and 'overflow: hidden'</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-16 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="match" href="multicol-span-all-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: navy;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  overflow: hidden;
+  widows: 1;
+  width: 8em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0em;
+
+  /*
+
+  N == 4;
+
+  W == 2em;
+
+  */
+
+  }
+
+  span {color: blue;}
+
+  span + span {color: pink;}
+
+  h4
+  {
+  background-color: black;
+  color: black;
+  font: inherit;
+  margin: 1em 0 1em 8em;
+
+  -moz-column-span: all;
+  /*
+  Since there is not sufficient space for the
+  spanning element, UA may treat the element as
+  '-moz-column-span: none'; in which case,
+  'overflow: hidden' will take care of
+  overflowed content out of multi-column box.
+  */
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+    <span id="top-first-and-second-columns"> bl ue bl ue </span>
+    <span id="top-third-and-fourth-columns"> Pi nk Pi nk </span>
+    <h4> sPana </h4>
+    ab cd ef gh
+    ij kl mn oq
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-003.xht
new file mode 100644
index 000000000..f9e30e617
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-003.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-span: all' (basic)</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-03 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="match" href="multicol-count-002-ref.xht"/>
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-column-span: all' spans across all column boxes and that content in the normal flow (in this test, the '55555 55555 55555 55555') that appears before the element is automatically balanced across all -moz-columns before the element appears." />
+
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  html {background-color: white;}
+
+  body
+  {
+  background-color: black;
+  font: 1.25em/1 Ahem;
+  padding-right: 1em;
+  width: 20em;
+  }
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0;
+  }
+
+  h4
+  {
+  background-color: black;
+  -moz-column-span: all;
+  color: yellow;
+  font: 1em/1 Ahem;
+  margin: 0em;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  55555 55555 55555 55555
+    <h4>&nbsp;4444 4444 4444 4444</h4>
+  1 22&nbsp; 1 22&nbsp; 1&nbsp;&nbsp;&nbsp;&nbsp; 1 333 1 333 1 333 55555 1 22&nbsp; 1 22&nbsp; 1&nbsp;&nbsp;&nbsp;&nbsp; 1 22&nbsp; 1 22&nbsp; 1 22&nbsp; 55555 1 333 1 333 1&nbsp;&nbsp;&nbsp;&nbsp; 4444 4444 1&nbsp;&nbsp;&nbsp;&nbsp; 55555 1 333 1 333 1&nbsp;&nbsp;&nbsp;&nbsp; 4444 4444 1&nbsp;&nbsp;&nbsp;&nbsp; 55555
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-003.xht
new file mode 100644
index 000000000..4e91382e1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-003.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicol | -moz-column-span: all | block-level child</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#spanning-columns"/>
+<link rel="match" href="multicol-span-all-block-sibling-3-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1;
+	color: black;
+	background: black;
+
+	-moz-column-count: 2;
+}
+h1 {
+	-moz-column-span: all;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<div>
+		<h1>foo</h1>
+		FAIL<br/>
+		FAIL<br/>
+		FAIL<br/>
+		FAIL<br/>
+		FAIL<br/>
+		FAIL<br/>
+		FAIL<br/>
+	</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-3-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-3-ref.xht
new file mode 100644
index 000000000..19466a679
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-block-sibling-3-ref.xht
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicol | -moz-column-span: all | block-level child</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1;
+	color: black;
+	background: black;
+}
+h1 {
+	margin-top: 0;
+	padding-top: 0.66em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<div>
+		<h1>FAIL</h1>
+		FAIL<br/>
+		FAIL<br/>
+		FAIL<br/>
+		FAIL<br/>
+	</div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001-ref.xht
new file mode 100644
index 000000000..fe82d6a11
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001-ref.xht
@@ -0,0 +1,109 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  div#rel-pos-wrapper
+  {
+  background-color: blue;
+  font-size: 1.25em;
+  height: 10em;
+  position: relative;
+  width: 12em;
+  }
+
+  div > div {position: absolute;}
+
+  div#first-black
+  {
+  background-color: black;
+  left: 7em;
+  height: 1em;
+  top: 0em;
+  width: 5em;
+  }
+
+  div#first-yellow
+  {
+  background-color: yellow;
+  left: 7em;
+  height: 3em;
+  top: 1em;
+  width: 1em;
+  }
+
+  div#first-white
+  {
+  background-color: white;
+  left: 10em;
+  height: 9em;
+  top: 1em;
+  width: 2em;
+  }
+
+  div#second-black
+  {
+  background-color: black;
+  left: 2em;
+  height: 1em;
+  top: 2em;
+  width: 3em;
+  }
+
+  div#second-yellow
+  {
+  background-color: yellow;
+  left: 2em;
+  height: 3em;
+  top: 3em;
+  width: 1em;
+  }
+
+  div#third-black
+  {
+  background-color: black;
+  left: 2em;
+  height: 1em;
+  top: 6em;
+  width: 3em;
+  }
+
+  div#third-yellow
+  {
+  background-color: yellow;
+  left: 2em;
+  height: 3em;
+  top: 7em;
+  width: 1em;
+  }
+
+  div#second-white
+  {
+  background-color: white;
+  left: 5em;
+  height: 4em;
+  top: 6em;
+  width: 7em;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div id="rel-pos-wrapper">
+
+    <div id="first-black"></div>
+    <div id="first-yellow"></div>
+    <div id="first-white"></div>
+    <div id="second-black"></div>
+    <div id="second-yellow"></div>
+    <div id="third-black"></div>
+    <div id="third-yellow"></div>
+    <div id="second-white"></div>
+
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001.xht
new file mode 100644
index 000000000..50896e563
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-001.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-span: all' element with block children (complex)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="bookmark" title="[css3-multicol] spanning element with only block children" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0318.html" />
+  <link rel="match" href="multicol-span-all-child-001-ref.xht" />
+  <meta name="flags" content="ahem may" />
+  <meta name="assert" content="This test checks how a spanning element with block children is rendered inside a multi-column element with a set height which is insufficient for rendering the entire spanning element. Since the available height (10em)is insufficient to render the spanning element (height needed: 3 times 4em) entirely inside the multi-column element, then UA may treat '-moz-column-span: all' as '-moz-column-span: none'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body
+  {
+  color: black;
+  font: 1.25em/1 Ahem;
+  height: 10em;
+  orphans: 1;
+  widows: 1;
+  width: 10em;
+
+  -moz-column-count: 2;
+  -moz-column-fill: auto;
+  -moz-column-gap: 0em;
+  }
+
+  div
+  {
+  background-color: yellow;
+  border: blue solid 2em;
+
+  -moz-column-span: all;
+  }
+
+  span
+  {
+  display: block;
+  height: 4em;
+  width: 5em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+    <span>block</span>
+    <span>block</span>
+    <span>block</span>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002-ref.xht
new file mode 100644
index 000000000..417bbe110
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002-ref.xht
@@ -0,0 +1,32 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  div#multi-column
+  {
+  background-color: black;
+  height: 8em;
+  width: 10em;
+  }
+
+  div#overflow
+  {
+  bottom: 8em;
+  font: 1em/1 serif;
+  margin-left: 10em;
+  position: relative;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div id="multi-column"></div>
+
+  <div id="overflow">abc deg<br />ghk mno</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002.xht
new file mode 100644
index 000000000..3afb4a78f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-child-002.xht
@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-span: all' element with block children (complex)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="bookmark" title="[css3-multicol] spanning element with only block children" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0318.html" />
+  <link rel="match" href="multicol-span-all-child-002-ref.xht" />
+  <meta name="flags" content="may" />
+  <meta name="assert" content="This test checks how spanning elements with block children is rendered inside a multi-column element with a set height which is insufficient for rendering both spanning elements entirely. Since available space (height of 8em) is insufficient to render both spanning elements (4 times 4em plus 2em) entirely inside the multi-column element, then UA may treat '-moz-column-span: all' as '-moz-column-span: none'." />
+  <style type="text/css"><![CDATA[
+  html {background-color: white;}
+
+  body
+  {
+  background-color: black;
+  height: 8em;
+  orphans: 1;
+  widows: 1;
+  width: 10em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 0em;
+
+  /*
+
+  N == 2;
+
+  W == 5em;
+
+  */
+
+  }
+
+  div, p
+  {
+  font: 1em/1 serif;
+  margin-top: 0em;
+
+  -moz-column-span: all;
+  }
+
+  span
+  {
+  color: black;
+  display: block;
+  height: 4em;
+  width: 5em;
+  }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+    <span>FAIL</span>
+    <span>FAIL</span>
+    <span>FAIL</span>
+    <span>FAIL</span>
+  </div>
+
+  <p>abc deg ghk mno</p>
+
+  <!--
+
+  Expected results:
+
+  ************************
+  |FAIL       |FAIL      |abc deg
+  |           |          |ghk mno
+  |           |          |
+  |           |          |
+  |FAIL       |FAIL      |
+  |           |          |
+  |           |          |
+  |           |          |
+  ************************
+
+  The test presumes, postulates that
+  "abc deg" occupies not more than 5em.
+
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001-ref.xht
new file mode 100644
index 000000000..6605ad8ef
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001-ref.xht
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-18 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  border: gray solid 1.25em;
+  width: 160px;
+  }
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div><img src="support/swatch-blue.png" width="80" height="40" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="40" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /> <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001.xht
new file mode 100644
index 000000000..21454a5dc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-001.xht
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-span: all' element and width exceeding available multi-colum width (complex)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-18 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="match" href="multicol-span-all-margin-001-ref.xht" />
+  <meta name="flags" content="ahem may" />
+  <meta name="assert" content="This test checks that when 'overflow' is set to 'hidden' on a multi-column element, then any spanning ('-moz-column-span: all') element exceeding the available width of the multi-column should be clipped accordingly." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: navy;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  overflow: hidden;
+  widows: 1;
+  width: 8em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0em;
+
+  /*
+
+  N == 4;
+
+  W == 2;
+
+  */
+  }
+
+  h4
+  {
+  background: black;
+  color: black;
+  font: inherit;
+  margin: 1em 0;
+  width: 11em;
+
+  -moz-column-span: all;
+
+  /*
+  This is the target of the test: the spanning element's
+  width (11em) exceeds the available width of the
+  multi-column element. The 3em exceeding such
+  width is first clipped at column box boundary.
+  */
+  }
+
+  span {color: blue;}
+
+  span + span {color: pink;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+    <span> bl ue bl ue </span>
+    <span> Pi nk Pi nk </span>
+    <h4> black </h4>
+    <h4> black </h4>
+    na vy na vy
+    na vy na vy
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002-ref.xht
new file mode 100644
index 000000000..1538f1402
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002-ref.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div {width: 240px;}
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+    <img src="support/swatch-gray.png" width="200" height="20" alt="Image download support must be enabled" /><br />
+
+  <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="100" height="20" alt="Image download support must be enabled" />
+
+  <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br />
+
+  <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20"
+alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br />
+
+  <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br />
+
+  <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br />
+
+  <img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><br />
+
+  <img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="40" alt="Image download support must be enabled" /><br />
+
+  <img src="support/swatch-gray.png" width="200" height="20" alt="Image download support must be enabled" />
+
+</div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002.xht
new file mode 100644
index 000000000..f240d3575
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-002.xht
@@ -0,0 +1,81 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-span: all' element</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="match" href="multicol-span-all-margin-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: navy;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 8em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0em;
+
+  /*
+
+  N == 4;
+
+  W == 2;
+
+  */
+  }
+
+  h4
+  {
+  font: inherit;
+  margin: 1em 0;
+  }
+
+  h4#orange
+  {
+  background: orange;
+  color: orange;
+  /*
+  In this test, the glyphs "or" are painted into 4th column box
+  and the glyphs "ang" are painted in the overflow area.
+  */
+  }
+
+  h4#black
+  {
+  background: black;
+  color: black;
+
+  -moz-column-span: all;
+  }
+
+  span {color: blue;}
+
+  span + span {color: pink;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+    <span> bl ue bl ue </span>
+    <span> Pi nk Pi nk </span>
+    <h4 id="orange"> orang </h4>
+    <h4 id="black"> black </h4>
+    na vy na vy
+    na vy na vy
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht
new file mode 100644
index 000000000..d6719f0b8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  border: gray solid 1.25em;
+  width: 160px;
+  }
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+    <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" />
+    <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" />
+    <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" />
+    <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" />
+    <img src="support/swatch-orange.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="80" height="20" alt="Image download support must be enabled" />
+    <img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" />
+    <img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/swatch-pink.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="40" height="20" alt="Image download support must be enabled" />
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001.xht
new file mode 100644
index 000000000..8655d8dbc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-bottom-001.xht
@@ -0,0 +1,84 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: '-moz-column-span: all' element with vertical margins and width exceeding available multi-colum width (complex)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="match" href="multicol-span-all-margin-bottom-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: navy;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 8em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0em;
+
+  /*
+
+  N == 4;
+
+  W == 2em;
+
+  */
+  }
+
+  h4
+  {
+  font: inherit;
+  margin: 1em 0;
+  }
+
+  h4#black
+  {
+  background: black;
+  color: black;
+
+  -moz-column-span: all;
+  }
+
+  h4#orange
+  {
+  background: orange;
+  color: orange;
+  /*
+  In this test, the glyphs "or" are painted into 1st column box.
+  "Content in the normal flow that extends into column
+  gaps (e.g., long words or images) is clipped in the
+  middle of the column gap."
+  Therefore, the glyphs "ang" are clipped and not painted.
+  */
+  }
+
+  span {color: blue;}
+
+  span + span {color: pink;}
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div>
+    na vy na vy
+    na vy na vy
+    <h4 id="black"> black </h4>
+    <h4 id="orange"> orang </h4>
+    <span> bl ue bl ue </span>
+    <span> Pi nk Pi nk </span>
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001-ref.xht
new file mode 100644
index 000000000..dee66329f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001-ref.xht
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  border: gray solid 1.25em;
+  width: 160px;
+  }
+
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+    <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" />
+    <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" />
+    <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" />
+    <img src="support/swatch-yellow.png" width="160" height="40" alt="Image download support must be enabled" />
+    <img src="support/black20x20.png" width="160" height="20" alt="Image download support must be enabled" />
+    <img src="support/swatch-yellow.png" width="160" height="20" alt="Image download support must be enabled" />
+    <img src="support/swatch-navy.png" width="160" height="40" alt="Image download support must be enabled" />
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001.xht
new file mode 100644
index 000000000..5eb4d6d8b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-001.xht
@@ -0,0 +1,75 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: vertically adjacent spanning elements with nested margins (complex)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="match" href="multicol-span-all-margin-nested-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="In this test, the first h4 element would collapse its margin bottom with the top margin of div#child if only div#child was also a spanning element, which is not: the bottom margin of the first h4 element is 8em wide while the top margin of div#child is only 2em wide (1 column box wide). That is why the bottom margin of the first h4 element should not collapse with the top margin of div#child." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#multi-column
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: navy;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  overflow: hidden;
+  widows: 1;
+  width: 8em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0em;
+
+  /*
+
+  N == 4;
+
+  W == 2em;
+
+  */
+  }
+
+  h4, div#child
+  {
+  background-color: black;
+  color: black;
+  font: inherit;
+  margin: 0;
+  }
+
+  h4
+  {
+  margin: 1em 0;
+  width: 11em;
+
+  -moz-column-span: all;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div id="multi-column">
+    na vy na vy
+    na vy na vy
+
+    <h4 id="first">black</h4>
+
+    <div id="child">
+      <h4 id="nested">black</h4>
+    </div>
+
+    na vy na vy
+    na vy na vy
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-002.xht
new file mode 100644
index 000000000..e646023bc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-002.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: vertically adjacent spanning elements with nested margins (complex)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-19 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="match" href="multicol-span-all-margin-nested-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="In this test, the first h4 element would collapse its margin bottom with the resulting (from a margin collapsing with its nested h4 element) of top margin of div#child if only div#child was also a spanning element, which is not: the bottom margin of the first h4 element is 8em wide while the top margin of div#child is only 2em wide (1 column box wide). That is why the bottom margin of the first h4 element should not collapse with the top margin of div#child." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#multi-column
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: navy;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  overflow: hidden;
+  widows: 1;
+  width: 8em;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0em;
+
+  /*
+
+  N == 4;
+
+  W == 2em;
+
+  */
+  }
+
+  h4, div#child
+  {
+  background-color: black;
+  color: black;
+  font: inherit;
+  margin: 1em 0;
+  }
+
+  div#child {margin: 1em 0 0;}
+
+  h4
+  {
+  width: 11em;
+
+  -moz-column-span: all;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div id="multi-column">
+    na vy na vy
+    na vy na vy
+
+    <h4 id="first">black</h4>
+
+    <div id="child">
+      <h4 id="nested">black</h4>
+    </div>
+
+    na vy na vy
+    na vy na vy
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-003.xht
new file mode 100644
index 000000000..417e3e140
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-003.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolomn | -moz-column-span inside block</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#spanning-columns"/>
+<link rel="match" href="multicol-span-all-margin-nested-3-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: black;
+	position: absolute;
+	orphans: 1;
+	widows: 1;
+
+	-moz-column-count: 4;
+}
+#spanned {
+	-moz-column-span: all;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<div>
+		<div id="spanned">x</div>
+	</div>
+	FAIL FAIL FAIL FAIL
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-3-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-3-ref.xht
new file mode 100644
index 000000000..a104a66c9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-3-ref.xht
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolomn | -moz-column-span inside block</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body>div {
+	background: black;
+	width: 22em;
+	height: 2em;
+	position: absolute;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht
new file mode 100644
index 000000000..36494c537
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht
@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-span</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#spanning-columns"/>
+<link rel="match" href="multicol-span-all-margin-nested-firstchild-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: navy;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 8em;
+	float: left;
+	orphans: 1;
+	widows: 1;
+	overflow: hidden;
+
+	-moz-column-count: 4;
+	-moz-column-gap: 0;
+}
+span, h6 {
+	font-family: ahem;
+	font-size: 1em;
+	font-weight: normal;
+	line-height: 1em;
+	color: black;
+	background: black;
+	padding: 0;
+	margin: 0;
+	display: block;
+}
+h6 {
+	margin: 1em 0;
+	width: 11em;
+	-moz-column-span: all;
+}
+span {
+	color: pink;
+	background: pink;
+	margin: 2em 0;
+}
+h6~h6 {
+	color: black;
+	background: black;
+	height: 1em;
+}
+h6~h6>span {
+	background: pink;
+	color: pink;
+	margin: -2em 0 0;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	xx xx xx xx
+	xx xx xx xx
+
+	<h6><span>xxxxx</span></h6>
+	<h6><span>xxxxx</span></h6>
+
+	xx xx xx xx
+	xx xx xx xx
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht
new file mode 100644
index 000000000..292272e30
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-span</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+}
+body>div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	color: navy;
+	background: yellow;
+	margin: 1em;
+	border: 1em solid gray;
+	width: 8em;
+	height: 13em;
+	position: relative;
+	float: left;
+	overflow: hidden;
+}
+div div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 8em;
+	height: 2em;
+	background: navy;
+}
+#s2 {
+	top: 11em;
+}
+#s3 {
+	background: black;
+	top: 3em;
+}
+#s4 {
+	background: pink;
+	top: 5em;
+	height: 1em;
+}
+#s5 {
+	background: black;
+	top: 6em;
+	height: 1em;
+}
+#s6 {
+	background: pink;
+	top: 7em;
+	height: 1em;
+}
+#s7 {
+	background: black;
+	top: 9em;
+	height: 1em;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+	<div></div>
+	<div id="s2"></div>
+	<div id="s3"></div>
+	<div id="s4"></div>
+	<div id="s5"></div>
+	<div id="s6"></div>
+	<div id="s7"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001-ref.xht
new file mode 100644
index 000000000..50addc377
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001-ref.xht
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  font-size: 1.25em;
+  line-height: 1;
+  }
+
+  img {vertical-align: top;}
+
+  img:first-child {padding-left: 5em;}
+
+  img#no-padding {padding-left: 0em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img id="no-padding" src="support/swatch-pink.png" width="220" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="120" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="120" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="20" height="20" alt="Image download support must be enabled" /><img src="support/swatch-navy.png" width="100" height="20" alt="Image download support must be enabled" /><img src="support/swatch-gray.png" width="20" height="20" alt="Image download support must be enabled" /></div>
+
+  <div><img src="support/swatch-gray.png" width="260" height="20" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001.xht
new file mode 100644
index 000000000..71c9eed9a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-float-001.xht
@@ -0,0 +1,70 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: floating a column-spanning element</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. '-moz-column-span'" />
+  <link rel="match" href="multicol-span-float-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-column-span' does not apply to floating element." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: navy;
+  font: 1.25em/1 Ahem;
+  margin-left: 5em;
+  orphans: 1;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 1em;
+
+  /*
+
+  N == 2;
+
+  W == 5em;
+
+  */
+  }
+
+  span
+  {
+  display: block;
+  font: inherit;
+  margin: 0;
+  width: 11em;
+
+  -moz-column-span: all;
+  }
+
+  span:first-child
+  {
+  background-color: pink;
+  color: pink;
+  float: right;
+  }
+
+  span + span {color: black;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+	<span>Pinkk</span>
+	<span>black</span>
+	navyy navyy
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001-ref.xht
new file mode 100644
index 000000000..5472e779c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001-ref.xht
@@ -0,0 +1,54 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  font: 1.25em/1 serif;
+  border: 1em solid gray;
+  width: 11em;
+  height: 5em;
+  position: relative;
+  }
+
+  img {position: absolute;}
+
+  img#first-blue {left: 0em; top: 0em;}
+
+  img#second-blue {left: 3em; top: 0em;}
+
+  img#first-pink {left: 6em; top: 0em;}
+
+  img#second-pink {left: 9em; top: 0em;}
+
+  img#black {left: 0em; top: 2em;}
+
+  img#first-yellow {left: 6em; top: 2em;}
+
+  img#second-yellow {left: 9em; top: 2em;}
+
+  img#first-orange {left: 0em; top: 3em;}
+
+  img#second-orange {left: 3em; top: 3em;}
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+	<img id="first-blue" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /> <img id="second-blue" src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /> <img id="first-pink" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" /> <img id="second-pink" src="support/swatch-pink.png" width="40" height="40" alt="Image download support must be enabled" />
+
+	<img id="black" src="support/black20x20.png" width="110" height="20" alt="Image download support must be enabled" />
+
+	<img id="first-yellow" src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" />
+	<img id="second-yellow" src="support/swatch-yellow.png" width="40" height="40" alt="Image download support must be enabled" />
+
+	<img id="first-orange" src="support/swatch-orange.png" width="40" height="40" alt="Image download support must be enabled" />
+	<img id="second-orange" src="support/swatch-orange.png" width="40" height="40" alt="Image download support must be enabled" />
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001.xht
new file mode 100644
index 000000000..e398eff8a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-span-none-001.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-span: none (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-22 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#spanning-columns" title="6.1. '-moz-column-span'" />
+  <link rel="match" href="multicol-span-none-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks how a '-moz-column-span: none' element is rendered: it should not span across all column boxes." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  border: gray solid 1em;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 11em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 1em;
+
+  /*
+
+  N == 2;
+
+  W == 5em;
+
+  */
+  }
+
+  h4
+  {
+  background: black;
+  color: black;
+  font: inherit;
+  margin: 0;
+  width: 11em;
+
+  -moz-column-span: none;
+  }
+
+  #column1-top {color: blue;}
+
+  #column1-bottom {color: orange;}
+
+  #column2-top {color: pink;}
+
+  #column2-bottom {color: yellow;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+    <span id="column1-top"> ab cd ef gh </span>
+    <h4> 1234567890123 </h4>
+    <span id="column1-bottom"> ij kl mn oq </span>
+    <span id="column2-top"> ab cd ef gh </span>
+    <span id="column2-bottom"> rs tu vw xy </span>
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001-ref.xht
new file mode 100644
index 000000000..fcc736a02
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001-ref.xht
@@ -0,0 +1,12 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <meta name="flags" content="image" />
+ </head>
+ <body>
+  <div><img src="support/black20x20.png" width="120" height="20" alt="Image download support must be enabled" /></div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001.xht
new file mode 100644
index 000000000..a4ca84f0e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-001.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-count and table-cell (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-table-cell-001-ref.xht"/>
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-column-count' applies to elements with 'display' set to 'table-cell'." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: red;
+  color: black;
+  display: table-cell;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 6;
+  -moz-column-gap: 0em;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>P<br />A<br />S<br />S<br />E<br />D</div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001-ref.xht
new file mode 100644
index 000000000..a2e4a8406
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001-ref.xht
@@ -0,0 +1,23 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  height: 360px;
+  width: 300px;
+  }
+
+  img + img {padding-left: 110px;}
+  ]]></style>
+
+ </head>
+ <body>
+  <div><img src="support/black20x20.png" width="60" height="360" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="60" height="360" alt="Image download support must be enabled" /></div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001.xht
new file mode 100644
index 000000000..84fc06b13
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-001.xht
@@ -0,0 +1,52 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-count and height of table-cell (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-table-cell-height-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  color: black;
+  display: table-cell;
+  font: 1.25em/1 Ahem;
+  height: 18em;
+  orphans: 1;
+  widows: 1;
+  width: 15em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 2em;
+
+  /*
+
+  N == 2;
+
+  W == 6.5em;
+
+  */
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+  111 222 333 444 555 666 777 888 999
+  111 222 333 444 555 666 777 888 999
+  111 222 333 444 555 666 777 888 999
+  111 222 333 444 555 666 777 888 999
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-002.xht
new file mode 100644
index 000000000..43b4407a8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-height-002.xht
@@ -0,0 +1,52 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-count and height of table-cell (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-table-cell-height-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that '-moz-column-count' applies to elements with 'display' set to 'table-cell' which can be constrained with a set height. A set height for a table-cell still remains the minimum height required by the content, even when its layout is influenced by, conditioned by a multi-column layout." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  color: black;
+  display: table-cell;
+  font: 1.25em/1 Ahem;
+  height: 0em;
+  orphans: 1;
+  widows: 1;
+  width: 15em;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 2em;
+
+  /*
+
+  N == 2;
+
+  W == 6.5em;
+
+  */
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>
+  111 222 333 444 555 666 777 888 999
+  111 222 333 444 555 666 777 888 999
+  111 222 333 444 555 666 777 888 999
+  111 222 333 444 555 666 777 888 999
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-001.xht
new file mode 100644
index 000000000..83fb6aa82
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-001.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | table-cell, vertical-align</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model"/>
+<link rel="match" href="multicol-table-cell-vertical-align-ref.xht"/>
+<meta name="flags" content="ahem"/>
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+<style type="text/css"><![CDATA[
+div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	vertical-align: middle;
+	color: white;
+	background: #3366CC;
+	width: 6em;
+	height: 400px;
+	display: table-cell;
+
+	-moz-column-count: 2;
+	-moz-column-gap: 0;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-ref.xht
new file mode 100644
index 000000000..023c9c6a0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-table-cell-vertical-align-ref.xht
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | table-cell, vertical-align</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+div {
+	font-family: ahem;
+	font-size: 1em;
+	line-height: 1em;
+	vertical-align: middle;
+	color: white;
+	background: #3366CC;
+	width: 6em;
+	height: 8em;
+}
+div+div {
+	margin-top: 10em;
+}
+]]></style>
+</head>
+
+<body>
+<div></div>
+<div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001-ref.xht
new file mode 100644
index 000000000..6588d840f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001-ref.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body
+  {
+  font: 1.25em/1 Ahem;
+  width: 30em;
+  }
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  orphans: 1;
+  widows: 1;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div>d da&nbsp; d da&nbsp; d da&nbsp; d da&nbsp; d da&nbsp;<br />
+
+  dam&nbsp;&nbsp; dam&nbsp;&nbsp; dam&nbsp;&nbsp; dam&nbsp;&nbsp; dam&nbsp;&nbsp;<br />
+
+  dame&nbsp; dame&nbsp; dame&nbsp; dame&nbsp; dame&nbsp;<br />
+
+  damer damer damer damer damer <br />
+
+  d da&nbsp; d da&nbsp; d da&nbsp; d da&nbsp;<br />
+
+  dam&nbsp;&nbsp; dam&nbsp;&nbsp; dam&nbsp;&nbsp; dam&nbsp;&nbsp;<br />
+
+  dame&nbsp; dame&nbsp; dame&nbsp; dame&nbsp;<br />
+
+  damer damer damer damer
+  </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001.xht
new file mode 100644
index 000000000..41d88287a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-001.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-width (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-width-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body
+  {
+  font: 1.25em/1 Ahem;
+  width: 30em;
+  }
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-gap: 0;
+  -moz-column-width: 6em;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002-ref.xht
new file mode 100644
index 000000000..59d54cadc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002-ref.xht
@@ -0,0 +1,32 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  table
+  {
+  background-color: yellow;
+  border-spacing: 0px;
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  }
+
+  td {padding: 0 1em 0 0;}
+
+  img, td {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+  <table>
+    <tr>
+      <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+      <td><img src="support/black20x20.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+      <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+      <td><img src="support/swatch-blue.png" width="40" height="40" alt="Image download support must be enabled" /></td>
+    </tr>
+  </table>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002.xht
new file mode 100644
index 000000000..8be661047
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-002.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-width (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-width-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-gap: 0;
+  -moz-column-width: 6em;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  bl ac bl ac
+    <span>
+    bl ue bl ue
+    </span>
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-003.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-003.xht
new file mode 100644
index 000000000..dc56c1e1f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-003.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-width (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-width-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div#multi-column
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  height: 2em;
+  orphans: 1;
+  position: relative;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-width: 6em;
+  -moz-column-gap: 0;
+  }
+
+  div > div
+  {
+  background-color: black;
+  height: 2em;
+  position: absolute;
+  top: 0;
+  width: 2em;
+  }
+
+  div#s2 {left: 3em;}
+
+  div#s3
+  {
+  background-color: blue;
+  left: 6em;
+  }
+
+  div#s4
+  {
+  background-color: blue;
+  left: 9em;
+  }
+  ]]></style>
+ </head>
+ <body>
+
+  <div id="multi-column">
+    <div></div>
+    <div id="s2"></div>
+    <div id="s3"></div>
+    <div id="s4"></div>
+  </div>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-001.xht
new file mode 100644
index 000000000..882520810
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-001.xht
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-count and -moz-column-width (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of -moz-columns" />
+  <link rel="match" href="multicol-width-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  body
+  {
+  font: 1.25em/1 Ahem;
+  width: 30em;
+  }
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+  orphans: 1;
+  widows: 1;
+
+  -moz-column-count: 5;
+  -moz-column-gap: 0;
+  -moz-column-width: 6em;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+	d da dam dame damer
+  </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-002.xht
new file mode 100644
index 000000000..07be600bd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-count-002.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: -moz-column-count and -moz-column-width (basic)</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cc" title="3.2 '-moz-column-count'" />
+  <link rel="match" href="multicol-count-002-ref.xht" />
+  <meta name="flags" content="ahem" />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  html {background-color: white;}
+
+  body
+  {
+  background-color: black;
+  font: 1.25em/1 Ahem;
+  padding-right: 1em;
+  width: 20em;
+  }
+
+  div
+  {
+  background-color: yellow;
+  color: black;
+
+  -moz-column-count: 4;
+  -moz-column-gap: 0;
+  -moz-column-width: 5em;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>55555 1&nbsp;&nbsp;&nbsp; 1 22&nbsp; 1 22&nbsp; 1&nbsp;&nbsp;&nbsp; 1 333 1 333 1 333 55555 55555 1&nbsp;&nbsp;&nbsp; 1 22&nbsp; 1 22&nbsp; 1&nbsp;&nbsp;&nbsp; 1 22&nbsp; 1 22&nbsp; 1 22&nbsp; 55555 55555 1&nbsp;&nbsp;&nbsp; 1 333 1 333 1&nbsp;&nbsp;&nbsp; 4444 4444 1&nbsp;&nbsp;&nbsp; 55555 55555 1&nbsp;&nbsp;&nbsp; 1 333 1 333 1&nbsp;&nbsp;&nbsp; 4444 4444 1&nbsp;&nbsp;&nbsp; 55555
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-001.xht
new file mode 100644
index 000000000..b1cfa9f3f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-001.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-width</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns"/>
+<link rel="match" href="multicol-width-ems-ref.xht"/>
+<meta name="flags" content=""/>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+	width: 40em;
+}
+div {
+	font-family: monospace;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	orphans: 1;
+	widows: 1;
+
+	-moz-column-width: 8em;
+	-moz-column-gap: 0;
+}
+]]></style>
+</head>
+
+<body>
+<div>
+	one two three four
+	five six seven eight
+	nineten eleven twelve
+	thirtn fourtnfiftn sixtn
+	seventn eightn ninetn twenty
+	hundred thousand million billion
+	trillion
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-ref.xht
new file mode 100644
index 000000000..bc31ca34f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-ems-ref.xht
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>multicolumn | -moz-column-width</title>
+<link rel="author" title="Opera Software ASA" href="http://www.opera.com/"/>
+<style type="text/css"><![CDATA[
+body {
+	margin: 0;
+	width: 40em;
+}
+div {
+	font-family: monospace;
+	font-size: 1em;
+	line-height: 1em;
+	color: black;
+	background: yellow;
+	orphans: 1;
+	widows: 1;
+}
+span {
+	float: left;
+	width: 8em;
+}
+div::after {
+	content: "";
+	clear: both;
+	display: block;
+}
+]]></style>
+</head>
+
+<body>
+
+<div>
+<span>
+	one two three four
+	five six seven eight
+</span>
+<span>
+	nineten eleven twelve
+	thirtn
+</span>
+<span>
+	fourtnfiftn sixtn
+	seventn eightn
+</span>
+<span>
+	ninetn twenty
+	hundred thousand
+</span>
+<span>
+	million billion
+	trillion
+</span>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001-ref.xht
new file mode 100644
index 000000000..a583e30f3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001-ref.xht
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  table
+  {
+  background-color: yellow;
+  border-spacing: 0px;
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  }
+
+  td {padding: 0 1em 0 0;}
+
+  img, td {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+  <table>
+    <tr>
+      <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td>
+      <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td>
+      <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td>
+      <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td>
+    </tr>
+
+    <tr>
+      <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td>
+      <td><img src="support/swatch-blue.png" width="40" height="20" alt="Image download support must be enabled" /></td>
+      <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td>
+      <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td>
+    </tr>
+  </table>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001.xht
new file mode 100644
index 000000000..f4d05d35e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-invalid-001.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: invalid -moz-column-width</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" />
+  <link rel="match" href="multicol-width-invalid-001-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+  <meta name="assert" content="This test checks that '-moz-column-width: bzzt' is invalid (generating a parsing error) and therefore will be ignored." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-gap: 0;
+  -moz-column-width: bzzt;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  bl ac
+    <span>
+    bl ue
+    </span>
+    <span>
+    bl ue
+    </span>
+  bl ac
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-001.xht
new file mode 100644
index 000000000..7b174378d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-001.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: large -moz-column-width</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-23 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" />
+  <link rel="match" href="multicol-width-invalid-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that a set '-moz-column-width' may be wider (to fill the available space). In this test, the actual -moz-column-width will be increased to 12em." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-gap: 0;
+  -moz-column-width: 9em;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  bl ac
+    <span>
+    bl ue
+    </span>
+    <span>
+    bl ue
+    </span>
+  bl ac
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-002.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-002.xht
new file mode 100644
index 000000000..59148eaae
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-large-002.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: large -moz-column-width</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" />
+  <link rel="match" href="multicol-width-invalid-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that a set '-moz-column-width' equal in width to the whole available space of the multi-column will use it all for its column box." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-gap: 0;
+  -moz-column-width: 12em;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  bl ac
+    <span>
+    bl ue
+    </span>
+    <span>
+    bl ue
+    </span>
+  bl ac
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-negative-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-negative-001.xht
new file mode 100644
index 000000000..c1d652ca2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-negative-001.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: negative -moz-column-width</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" />
+  <link rel="match" href="multicol-count-002-ref.xht" />
+  <meta name="flags" content="ahem invalid" />
+  <meta name="assert" content="This test checks that a set '-moz-column-width' can not be negative." />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: black;
+  border: black solid 1em;
+  color: yellow;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 19em;
+
+  -moz-column-width: -100px;
+  -moz-column-gap: 0;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div>4444 4444 4444 4444 1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;1 1&nbsp;&nbsp;1 1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;&nbsp; 4444 4444 4444 4444 1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1 1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1 &nbsp;&nbsp;&nbsp;1 1&nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;1 4444 4444</div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001-ref.xht
new file mode 100644
index 000000000..eb427d1da
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001-ref.xht
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  table
+  {
+  background-color: yellow;
+  border-spacing: 0px;
+  border: gray solid 1em;
+  font: 1.25em/1 serif;
+  }
+
+  td {padding: 0 4em 0 0;}
+
+  img, td {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+  <table>
+    <tr>
+      <td><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="80" height="20" alt="Image download support must be enabled" /><img src="support/black20x20.png" width="40" height="20" alt="Image download support must be enabled" /></td>
+    </tr>
+  </table>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001.xht
new file mode 100644
index 000000000..cb9f841ce
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-width-small-001.xht
@@ -0,0 +1,61 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: narrow -moz-column-width</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements" title="8.1. Overflow inside multicol elements" />
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" />
+  <link rel="match" href="multicol-width-small-001-ref.xht" />
+  <meta name="flags" content="ahem" />
+  <meta name="assert" content="This test checks that a set '-moz-column-width' which is small with regards to width of multi-column element. In this test, in-flow content that extends into column gaps is clipped in the middle of the column gap. " />
+<style type="text/css"><![CDATA[
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
+]]></style>
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: yellow;
+  border: gray solid 1em;
+  color: black;
+  font: 1.25em/1 Ahem;
+  orphans: 1;
+  widows: 1;
+  width: 12em;
+
+  -moz-column-gap: 0;
+  -moz-column-width: 1em;
+  }
+
+  span {color: blue;}
+  ]]></style>
+ </head>
+ <body>
+  <div>
+  Bl ac
+    <span>
+    bl ue
+    </span>
+    <span>
+    bl ue
+    </span>
+  Bl ac
+  </div>
+
+  <!--
+
+  Expected results
+
+  *************************
+  *B|a|b|u|b|u|B|a| | | | *
+  *************************
+
+  Every "l", "c" and "e" glyphs are clipped.
+
+  -->
+
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001-ref.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001-ref.xht
new file mode 100644
index 000000000..273bb43ec
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001-ref.xht
@@ -0,0 +1,15 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 -->
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+  img {vertical-align: top;}
+  ]]></style>
+ </head>
+ <body>
+  <div><img src="support/swatch-lime.png" width="100" height="300" alt="Image download support must be enabled" /></div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001.xht b/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001.xht
new file mode 100644
index 000000000..82cd7be38
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/multicol-zero-height-001.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Multi-column Layout Test: multi-column element with zero height</title>
+  <link rel="author" title="Opera Software ASA" href="http://www.opera.com/" />
+  <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-08-24 -->
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cw" title="3.1. '-moz-column-width'" />
+  <link rel="match" href="multicol-zero-height-001-ref.xht" />
+  <meta name="flags" content="" />
+  <style type="text/css"><![CDATA[
+  div#multi-column
+  {
+  height: 0;
+  orphans: 1;
+  widows: 1;
+  width: 200px;
+
+  -moz-column-count: 2;
+  -moz-column-gap: 0;
+
+  /*
+
+  N == 2;
+
+  W == 100px;
+
+  */
+  }
+
+  div > div
+  {
+  background-color: lime;
+  float: left;
+  height: 300px;
+  width: 100px;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <div id="multi-column">
+    <div></div>
+  </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/reference/multicol-basic-ref.html b/layout/reftests/w3c-css/received/css-multicol-1/reference/multicol-basic-ref.html
new file mode 100644
index 000000000..c5bf98f09
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/reference/multicol-basic-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<!-- Submitted from TestTWF Paris -->
+<head>
+	<title>CSS Test reference</title>
+	<link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/>
+	<link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact">
+	<meta name="flags" content="ahem"/>
+
+<style type="text/css">
+@font-face {
+  font-family: Ahem;
+  src: url("../../../../fonts/Ahem.ttf");
+}
+</style>
+	<style type="text/css">
+		.multicol-wrapper>*{
+			font-family: Ahem;
+		}
+
+		div.multicol-wrapper{
+			border: thin solid black;
+			display: inline-block;
+			margin: 1em auto;
+			width: 360px;
+		}
+
+		.multicol-basic-ref{
+			background: yellow;
+			width: 360px;
+			border-spacing: 0;
+			border-collapse: collapse;
+			padding: 0;
+		}
+
+		.multicol-basic-ref td{
+			padding: 0;
+		}
+		.multicol-basic-ref-item{
+			padding: 0;
+			width: 120px;
+			background: #000;
+			border-spacing: 0;
+			border-collapse: collapse;
+			display: inline;
+			border: none;
+		}
+
+		.item-1{
+			background: purple;
+			color: purple;
+		}
+
+		.item-2{
+			background: orange;
+			color: orange;
+		}
+
+		.item-3{
+			background: blue;
+			color: blue;
+		}
+	</style>
+</head>
+<body>
+<p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
+<div class="multicol-wrapper">
+	<table class="multicol-basic-ref">
+		<tr>
+			<td><div class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td>
+			<td><div class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td>
+			<td><div class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</div></td>
+		</tr>
+	</table>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-green.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-green.png
new file mode 100644
index 000000000..b98ca0ba0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-green.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-lime.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-lime.png
new file mode 100644
index 000000000..cb397fb09
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-lime.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-maroon.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-maroon.png
new file mode 100644
index 000000000..3f86b0721
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-maroon.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-navy.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-navy.png
new file mode 100644
index 000000000..9b9a03955
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-navy.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-red.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-red.png
new file mode 100644
index 000000000..6bd73ac10
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-red.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-white.png b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-white.png
new file mode 100644
index 000000000..dd43faec5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/1x1-white.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-gg-rr.png b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-gg-rr.png
new file mode 100644
index 000000000..84f5b2a4f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-gg-rr.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-green.png b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-green.png
new file mode 100644
index 000000000..b3c8cf3eb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-green.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-red.png b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-red.png
new file mode 100644
index 000000000..823f125b8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/60x60-red.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/a-green.css b/layout/reftests/w3c-css/received/css-multicol-1/support/a-green.css
new file mode 100644
index 000000000..b0dbb071d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/a-green.css
@@ -0,0 +1 @@
+.a { color: green; }
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/b-green.css b/layout/reftests/w3c-css/received/css-multicol-1/support/b-green.css
new file mode 100644
index 000000000..a0473f5ca
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/b-green.css
@@ -0,0 +1 @@
+.b { color: green; }
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/black20x20.png b/layout/reftests/w3c-css/received/css-multicol-1/support/black20x20.png
new file mode 100644
index 000000000..ebf7027ee
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/black20x20.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/c-red.css b/layout/reftests/w3c-css/received/css-multicol-1/support/c-red.css
new file mode 100644
index 000000000..d4ba5c64e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/c-red.css
@@ -0,0 +1 @@
+.c { color: red; }
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/cat.png b/layout/reftests/w3c-css/received/css-multicol-1/support/cat.png
new file mode 100644
index 000000000..85dd73248
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/cat.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/import-green.css b/layout/reftests/w3c-css/received/css-multicol-1/support/import-green.css
new file mode 100644
index 000000000..537104e66
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/import-green.css
@@ -0,0 +1 @@
+.import { color: green; }
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/import-red.css b/layout/reftests/w3c-css/received/css-multicol-1/support/import-red.css
new file mode 100644
index 000000000..9945ef471
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/import-red.css
@@ -0,0 +1 @@
+.import { color: red; }
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rgr-grg.png b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rgr-grg.png
new file mode 100644
index 000000000..6fcfeb488
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rgr-grg.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rrg-rgg.png b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rrg-rgg.png
new file mode 100644
index 000000000..fcf4f3fd7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-grg-rrg-rgg.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-rgr-grg-rgr.png b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-rgr-grg-rgr.png
new file mode 100644
index 000000000..db8ed5cf7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-rgr-grg-rgr.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-tr.png b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-tr.png
new file mode 100644
index 000000000..8b4b25364
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/pattern-tr.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/red20x20.png b/layout/reftests/w3c-css/received/css-multicol-1/support/red20x20.png
new file mode 100644
index 000000000..5d44ef210
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/red20x20.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/square-purple.png b/layout/reftests/w3c-css/received/css-multicol-1/support/square-purple.png
new file mode 100644
index 000000000..0f522d787
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/square-purple.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/square-teal.png b/layout/reftests/w3c-css/received/css-multicol-1/support/square-teal.png
new file mode 100644
index 000000000..e567f51b9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/square-teal.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/square-white.png b/layout/reftests/w3c-css/received/css-multicol-1/support/square-white.png
new file mode 100644
index 000000000..5853cbb23
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/square-white.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-blue.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-blue.png
new file mode 100644
index 000000000..bf2759634
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-blue.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-gray.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-gray.png
new file mode 100644
index 000000000..92c73561f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-gray.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-green.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-green.png
new file mode 100644
index 000000000..0aa79b0c8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-green.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-lime.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-lime.png
new file mode 100644
index 000000000..55fd7fdae
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-lime.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-navy.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-navy.png
new file mode 100644
index 000000000..28dae8a3e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-navy.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-orange.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-orange.png
new file mode 100644
index 000000000..d3cd498b5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-orange.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-pink.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-pink.png
new file mode 100644
index 000000000..95b84499a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-pink.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-purple.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-purple.png
new file mode 100644
index 000000000..73bea7751
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-purple.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-red.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-red.png
new file mode 100644
index 000000000..1caf25c99
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-red.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-white.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-white.png
new file mode 100644
index 000000000..1a7d4323d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-white.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-yellow.png b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-yellow.png
new file mode 100644
index 000000000..1591aa0e2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/swatch-yellow.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/test-bl.png b/layout/reftests/w3c-css/received/css-multicol-1/support/test-bl.png
new file mode 100644
index 000000000..904e24e99
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/test-bl.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/test-br.png b/layout/reftests/w3c-css/received/css-multicol-1/support/test-br.png
new file mode 100644
index 000000000..f413ff5c1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/test-br.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/test-outer.png b/layout/reftests/w3c-css/received/css-multicol-1/support/test-outer.png
new file mode 100644
index 000000000..82eeace7f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/test-outer.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/test-tl.png b/layout/reftests/w3c-css/received/css-multicol-1/support/test-tl.png
new file mode 100644
index 000000000..f6ac0ef7e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/test-tl.png
diff --git a/layout/reftests/w3c-css/received/css-multicol-1/support/test-tr.png b/layout/reftests/w3c-css/received/css-multicol-1/support/test-tr.png
new file mode 100644
index 000000000..59843ae54
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-multicol-1/support/test-tr.png
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-001.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-001.xml
new file mode 100644
index 000000000..c40bb7f11
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-001.xml
@@ -0,0 +1,20 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/>
+  <link rel="match" href="reftest/ref-lime-1.xml"/>
+  <title>CSS Namespaces Test Suite: prefix case-sensitivity</title>
+  <style>
+   @namespace Foo "y";
+   @namespace foo "x";
+   test { background:red }
+   Foo|test { background:lime }
+   foo|test { background:red }
+   FOO|test { background:red }
+  </style>
+ </head>
+ <body>
+  <p><test xmlns="y">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-002.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-002.xml
new file mode 100644
index 000000000..cc78f3f0a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-002.xml
@@ -0,0 +1,17 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/>
+  <link rel="match" href="reftest/ref-lime-1.xml"/>
+  <title>CSS Namespaces Test Suite: empty string prefix (Explicit element namespace)</title>
+  <style>
+   @namespace foo "";
+   t { background:red }
+   foo|t { background:lime }
+  </style>
+ </head>
+ <body>
+  <p><t xmlns="">This sentence should have a green background.</t></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-003.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-003.xml
new file mode 100644
index 000000000..0b6f3293d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-003.xml
@@ -0,0 +1,15 @@
+<root>
+ <head xmlns="http://www.w3.org/1999/xhtml">
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/>
+  <link rel="match" href="reftest/ref-lime-1-generic.xml"/>
+  <title>CSS Namespaces Test Suite: empty string prefix (Implied element namespace)</title>
+  <style>
+   @namespace foo "";
+   t { background:red }
+   foo|t { background:lime }
+  </style>
+ </head>
+ <t>This sentence should have a green background.</t>
+</root>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-004.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-004.xml
new file mode 100644
index 000000000..70c3bd1ed
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-004.xml
@@ -0,0 +1,18 @@
+<root>
+ <head xmlns="http://www.w3.org/1999/xhtml">
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/>
+  <link rel="match" href="reftest/ref-lime-2-generic.xml"/>
+  <title>CSS Namespaces Test Suite: empty string default namespace</title>
+  <style>
+   @namespace "";
+   @namespace x "test";
+   *|t, *|root { display:block }
+   *|t, t[x] { background:lime }
+   t { background:red }
+  </style>
+ </head>
+ <t x="">This sentence should have a green background.</t>
+ <t xmlns="test">This sentence should have a green background.</t>
+</root>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-005.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-005.xml
new file mode 100644
index 000000000..458b5aa3e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-005.xml
@@ -0,0 +1,18 @@
+<root>
+ <head xmlns="http://www.w3.org/1999/xhtml">
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="author" title="Boris Zbarsky" href="https://bugzilla.mozilla.org/show_bug.cgi?id=458381#c4"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/>
+  <link rel="match" href="reftest/ref-lime-2-generic.xml"/>
+  <title>CSS Namespaces Test Suite: no default namespace</title>
+  <style>
+   @namespace x "test";
+   root *|* { background:red; display:block }
+   head { display:none }
+   t { background: lime }
+  </style>
+ </head>
+ <t>This sentence should have a green background.</t>
+ <t xmlns="test">This sentence should have a green background.</t>
+</root>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/prefix-006.xml b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-006.xml
new file mode 100644
index 000000000..0bf59915a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/prefix-006.xml
@@ -0,0 +1,23 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#prefixes"/>
+  <link rel="match" href="reftest/ref-lime-2.xml"/>
+  <title>CSS Namespaces Test Suite: no prefix</title>
+  <style>
+   @namespace "test";
+   |t { background:lime }
+   t { background:red }
+  </style>
+  <style>
+   @namespace "test";
+   t2 { background:lime }
+   |t2 { background:red }
+  </style>
+ </head>
+ <body>
+  <p><t xmlns="">This sentence should have a green background.</t></p>
+  <p><t2 xmlns="test">This sentence should have a green background.</t2></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-block.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-block.xml
new file mode 100644
index 000000000..c26b6fcf2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-block.xml
@@ -0,0 +1,10 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/"/>
+  <link rel="author" title="Mozilla" href="http://mozilla.org/"/>
+  <title>CSS Namespaces Test Suite reference</title>
+ </head>
+ <body>
+  <p style="background: lime">This sentence should have a green background.</p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-generic.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-generic.xml
new file mode 100644
index 000000000..12c5c012d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1-generic.xml
@@ -0,0 +1,11 @@
+<root>
+ <head xmlns="http://www.w3.org/1999/xhtml">
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/"/>
+  <link rel="author" title="Mozilla" href="http://mozilla.org/"/>
+  <title>CSS Namespaces Test Suite reference</title>
+  <style>
+   t { background:lime }
+  </style>
+ </head>
+ <t>This sentence should have a green background.</t>
+</root>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1.xml
new file mode 100644
index 000000000..9509a4bd3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-1.xml
@@ -0,0 +1,10 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/"/>
+  <link rel="author" title="Mozilla" href="http://mozilla.org/"/>
+  <title>CSS Namespaces Test Suite reference</title>
+ </head>
+ <body>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2-generic.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2-generic.xml
new file mode 100644
index 000000000..047be4221
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2-generic.xml
@@ -0,0 +1,13 @@
+<root>
+ <head xmlns="http://www.w3.org/1999/xhtml">
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/"/>
+  <link rel="author" title="Mozilla" href="http://mozilla.org/"/>
+  <title>CSS Namespaces Test Suite reference</title>
+  <style>
+   t, root { display:block }
+   t { background:lime }
+  </style>
+ </head>
+ <t>This sentence should have a green background.</t>
+ <t>This sentence should have a green background.</t>
+</root>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2.xml
new file mode 100644
index 000000000..f2fa08395
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-2.xml
@@ -0,0 +1,11 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/"/>
+  <link rel="author" title="Mozilla" href="http://mozilla.org/"/>
+  <title>CSS Namespaces Test Suite reference</title>
+ </head>
+ <body>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-3.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-3.xml
new file mode 100644
index 000000000..e50faba6b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-3.xml
@@ -0,0 +1,12 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/"/>
+  <link rel="author" title="Mozilla" href="http://mozilla.org/"/>
+  <title>CSS Namespaces Test Suite reference</title>
+ </head>
+ <body>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-5.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-5.xml
new file mode 100644
index 000000000..9c45f9de7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-5.xml
@@ -0,0 +1,14 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/"/>
+  <link rel="author" title="Mozilla" href="http://mozilla.org/"/>
+  <title>CSS Namespaces Test Suite reference</title>
+ </head>
+ <body>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-6.xml b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-6.xml
new file mode 100644
index 000000000..d67da1ac3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/reftest/ref-lime-6.xml
@@ -0,0 +1,15 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/"/>
+  <link rel="author" title="Mozilla" href="http://mozilla.org/"/>
+  <title>CSS Namespaces Test Suite reference</title>
+ </head>
+ <body>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+  <p><test style="background: lime">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/scope-001.xml b/layout/reftests/w3c-css/received/css-namespaces-3/scope-001.xml
new file mode 100644
index 000000000..bed4171ef
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/scope-001.xml
@@ -0,0 +1,20 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#scope"/>
+  <link rel="match" href="reftest/ref-lime-1.xml"/>
+  <meta name="flags" content="invalid"/>
+  <title>CSS Namespaces Test Suite: scope &lt;style></title>
+  <style>
+   @namespace x url("test");
+   test { background:lime }
+  </style>
+  <style>
+   x|test { background:red }
+  </style>
+ </head>
+ <body>
+  <p><test xmlns="test">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/scope-002.xml b/layout/reftests/w3c-css/received/css-namespaces-3/scope-002.xml
new file mode 100644
index 000000000..d25eb8178
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/scope-002.xml
@@ -0,0 +1,21 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#scope"/>
+  <link rel="match" href="reftest/ref-lime-1.xml"/>
+  <title>CSS Namespaces Test Suite: scope @import</title>
+  <style>
+   test { background:lime }
+  </style>
+  <style>
+   @import url("support/scope-002a.css");
+   @import url("support/scope-002b.css");
+   @namespace w "test";
+   x|test { background:red }
+  </style>
+ </head>
+ <body>
+  <p><test xmlns="test">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/support/fail.css b/layout/reftests/w3c-css/received/css-namespaces-3/support/fail.css
new file mode 100644
index 000000000..1c2d64c7e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/support/fail.css
@@ -0,0 +1 @@
+* { background:red ! important }
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002a.css b/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002a.css
new file mode 100644
index 000000000..a8d20ba81
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002a.css
@@ -0,0 +1,3 @@
+@namespace x url("test");
+@namespace y url("test");
+w|test { background:red }
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002b.css b/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002b.css
new file mode 100644
index 000000000..0c0d032a0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/support/scope-002b.css
@@ -0,0 +1,2 @@
+y|test { background: red }
+
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/support/syntax-007.css b/layout/reftests/w3c-css/received/css-namespaces-3/support/syntax-007.css
new file mode 100644
index 000000000..65d1fa73a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/support/syntax-007.css
@@ -0,0 +1,5 @@
+@charset "UTF-8";
+@namespace url("test");
+@namespace url("test2");
+*|test { background:lime }
+test { background:red }
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-001.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-001.xml
new file mode 100644
index 000000000..01c57e07c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-001.xml
@@ -0,0 +1,16 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-1-block.xml"/>
+  <title>CSS Namespaces Test Suite: @namespace case-insensitivity</title>
+  <style>
+   @NAmespace x "http://www.w3.org/1999/xhtml";
+   x|p { background: lime }
+  </style>
+ </head>
+ <body>
+  <p>This sentence should have a green background.</p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-002.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-002.xml
new file mode 100644
index 000000000..cb04b9c8d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-002.xml
@@ -0,0 +1,16 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-1-block.xml"/>
+  <title>CSS Namespaces Test Suite: @namespace syntax with escapes</title>
+  <style>
+   @\N\000041 mes\pac\65  x "http://www.w3.org/1999/xhtml";
+   x|p { background: lime }
+  </style>
+ </head>
+ <body>
+  <p>This sentence should have a green background.</p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-003.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-003.xml
new file mode 100644
index 000000000..256286eeb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-003.xml
@@ -0,0 +1,39 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-5.xml"/>
+  <title>CSS Namespaces Test Suite: @namespace default namespace syntax</title>
+  <style>
+   *|test { background:red }
+  </style>
+  <style>
+   @namespace url(test-a);
+   test { background:lime }
+  </style>
+  <style>
+   @namespace url('test-b');
+   test { background:lime }
+  </style>
+  <style>
+   @namespace url("test-c");
+   test { background:lime }
+  </style>
+  <style>
+   @namespace 'test-d';
+   test { background:lime }
+  </style>
+  <style>
+   @namespace "test-e";
+   test { background:lime }
+  </style>
+ </head>
+ <body>
+  <p><test xmlns="test-a">This sentence should have a green background.</test></p>
+  <p><test xmlns="test-b">This sentence should have a green background.</test></p>
+  <p><test xmlns="test-c">This sentence should have a green background.</test></p>
+  <p><test xmlns="test-d">This sentence should have a green background.</test></p>
+  <p><test xmlns="test-e">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-004.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-004.xml
new file mode 100644
index 000000000..335bca98d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-004.xml
@@ -0,0 +1,17 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-1.xml"/>
+  <title>CSS Namespaces Test Suite: @namespace url() with escape</title>
+  <style>
+   @namespace u\00072l("test");
+   *|test { background:red }
+   test { background: lime }
+  </style>
+ </head>
+ <body>
+  <p><test xmlns="test">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-005.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-005.xml
new file mode 100644
index 000000000..164bea1ec
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-005.xml
@@ -0,0 +1,27 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-5.xml"/>
+  <title>CSS Namespaces Test Suite: @namespace string and url() syntax</title>
+  <style>
+   test { background:red }
+  </style>
+  <style>
+   @namespace a url(test-a);
+   @namespace b url('test-b');
+   @namespace c url("test-c");
+   @namespace d 'test-d';
+   @namespace e "test-e";
+   a|test, b|test, c|test, d|test, e|test { background:lime }
+  </style>
+ </head>
+ <body>
+  <p><test xmlns="test-a">This sentence should have a green background.</test></p>
+  <p><test xmlns="test-b">This sentence should have a green background.</test></p>
+  <p><test xmlns="test-c">This sentence should have a green background.</test></p>
+  <p><test xmlns="test-d">This sentence should have a green background.</test></p>
+  <p><test xmlns="test-e">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-006.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-006.xml
new file mode 100644
index 000000000..1c5975a85
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-006.xml
@@ -0,0 +1,20 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-1.xml"/>
+  <meta name="flags" content="invalid"/>
+  <title>CSS Namespaces Test Suite: invalid ordering of @namespace and @import</title>
+  <style>
+   @namespace x u\00072l("test");
+   @import url("support/fail.css");
+   @namespace url("test2");
+   x|test { background:lime }
+   test { background:red }
+  </style>
+ </head>
+ <body>
+  <p><test xmlns="test">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-007.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-007.xml
new file mode 100644
index 000000000..6022d1c7e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-007.xml
@@ -0,0 +1,13 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-1.xml"/>
+  <title>CSS Namespaces Test Suite: @namespace and @charset</title>
+  <link rel="stylesheet" href="support/syntax-007.css"/>
+ </head>
+ <body>
+  <p><test xmlns="test">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-008.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-008.xml
new file mode 100644
index 000000000..4cb4e2339
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-008.xml
@@ -0,0 +1,23 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-2.xml"/>
+  <title>CSS Namespaces Test Suite: escapes in prefix</title>
+  <style>
+   @namespace \72x url("test");
+   t { background:red }
+   r\78|t { background:lime }
+  </style>
+  <style>
+   @namespace \032  url("test"); /* two spaces, see CSS 2.1, 4.1.3 */
+   t2 { background:red }
+   \32|t2 { background:lime }
+  </style>
+ </head>
+ <body>
+  <p><t xmlns="test">This sentence should have a green background.</t></p>
+  <p><t2 xmlns="test">This sentence should have a green background.</t2></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-009.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-009.xml
new file mode 100644
index 000000000..9f69fec67
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-009.xml
@@ -0,0 +1,18 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-1.xml"/>
+  <title>CSS Namespaces Test Suite: escaped vertical bar in qualified name</title>
+  <style>
+   @namespace x "test";
+   test { background:red }
+   x|test { background:lime }
+   x\00007Ctest { background:red }
+  </style>
+ </head>
+ <body>
+  <p><test xmlns="test">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-010.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-010.xml
new file mode 100644
index 000000000..e175a7bd3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-010.xml
@@ -0,0 +1,36 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-3.xml"/>
+  <meta name="flags" content="invalid"/>
+  <title>CSS Namespaces Test Suite: duplicate @namespace declarations</title>
+  <style>
+   @namespace "1";
+   @namespace dummy "yummy";
+   @namespace "2";
+   *|t { background:lime }
+   t { background:red }
+  </style>
+  <style>
+   @namespace "1";
+   @namespace dummy "yummy";
+   @namespace "2";
+   *|t2 { background:red }
+   t2 { background:lime }
+  </style>
+  <style>
+   @namespace x "1";
+   @namespace dummy "yummy";
+   @namespace x "2";
+   *|t3 { background:red }
+   x|t3 { background:lime }
+  </style>
+ </head>
+ <body>
+  <p><t xmlns="1">This sentence should have a green background.</t></p>
+  <p><t2 xmlns="2">This sentence should have a green background.</t2></p>
+  <p><t3 xmlns="2">This sentence should have a green background.</t3></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-011.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-011.xml
new file mode 100644
index 000000000..e60cbe115
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-011.xml
@@ -0,0 +1,47 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-6.xml"/>
+  <title>CSS Namespaces Test Suite: string comparison (no URI resolving)</title>
+  <style>
+   @namespace url("http://example.com/");
+   *|t { background:lime }
+   t { background:red }
+  </style>
+  <style>
+   @namespace url("http://example.com/");
+   *|t2 { background:lime }
+   t2 { background:red }
+  </style>
+  <style>
+   @namespace url("HTTP://example.com/");
+   *|t3 { background:lime }
+   t3 { background:red }
+  </style>
+  <style>
+   @namespace url("http://example.COM/");
+   *|t4 { background:lime }
+   t4 { background:red }
+  </style>
+  <style>
+   @namespace url("%41");
+   *|t5 { background:lime }
+   t5 { background:red }
+  </style>
+  <style>
+   @namespace url("A");
+   *|t6 { background:lime }
+   t6 { background:red }
+  </style>
+ </head>
+ <body>
+  <p><t xmlns="HTTP://example.com/">This sentence should have a green background.</t></p>
+  <p><t2 xmlns="http://example.COM/">This sentence should have a green background.</t2></p>
+  <p><t3 xmlns="http://example.com/">This sentence should have a green background.</t3></p>
+  <p><t4 xmlns="http://example.com/">This sentence should have a green background.</t4></p>
+  <p><t5 xmlns="A">This sentence should have a green background.</t5></p>
+  <p><t6 xmlns="%41">This sentence should have a green background.</t6></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-012.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-012.xml
new file mode 100644
index 000000000..557ba5065
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-012.xml
@@ -0,0 +1,31 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-3.xml"/>
+  <title>CSS Namespaces Test Suite: whitespace and comment handling</title>
+  <style>
+   test { background:red }
+  </style>
+  <style>
+   @namespace/* test */
+   a
+   url(
+test-a );
+
+   @namespace/**/b/**/url(	'test-b'
+);
+
+   @namespace	c	url("test-c"
+);
+
+   a|test, b|test, c|test { background:lime }
+  </style>
+ </head>
+ <body>
+  <p><test xmlns="test-a">This sentence should have a green background.</test></p>
+  <p><test xmlns="test-b">This sentence should have a green background.</test></p>
+  <p><test xmlns="test-c">This sentence should have a green background.</test></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-013.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-013.xml
new file mode 100644
index 000000000..983e2e62d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-013.xml
@@ -0,0 +1,44 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-5.xml"/>
+  <meta name="flags" content="invalid"/>
+  <title>CSS Namespaces Test Suite: @namespace error handling</title>
+  <style>
+   t, t2, t3, t4, t5 { background:red }
+  </style>
+  <style>
+   @namespace "test" {}
+   t { background:lime }
+  </style>
+  <style id="a">@namespace x "test</style>
+  <script>
+   document.getElementById("a").sheet.insertRule("x|t2 {background:lime }", 1)
+  </script>
+  <style>
+   @namespace "fail;
+   ; t3 { background:lime }
+  </style>
+  <style>
+   @namespace url('fail);
+     t4 { background:red !important; }
+   );
+   t4 { background:lime }
+  </style>
+  <style>
+   @namespace url(test);
+   @namespace url('test' x);
+   t5 { background:lime }
+  </style>
+ </head>
+ <body>
+  <p><t>This sentence should have a green background.</t></p>
+  <p><t2 xmlns="test">This sentence should have a green background.</t2></p>
+  <p><t3>This sentence should have a green background.</t3></p>
+  <p><t4>This sentence should have a green background.</t4></p>
+  <p><t5 xmlns="test">This sentence should have a green background.</t5></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-014.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-014.xml
new file mode 100644
index 000000000..d57d8991c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-014.xml
@@ -0,0 +1,31 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-3.xml"/>
+  <meta name="flags" content="invalid"/>
+  <title>CSS Namespaces Test Suite: @namespace and invalid at-rules</title>
+  <style>
+   t, t2, t3 { background:red }
+  </style>
+  <style>
+   @import x {}
+   @namespace x "test";
+   x|t { background:lime }
+  </style>
+  <style>
+   @namespace x "test-top";
+   @foobar this is funny { not:sure }
+   @namespace "test";
+   @foobar this is funner;
+   t2 { background:lime }
+   x|t3 { background:lime }
+   </style>
+ </head>
+ <body>
+  <p><t xmlns="test">This sentence should have a green background.</t></p>
+  <p><t2 xmlns="test">This sentence should have a green background.</t2></p>
+  <p><t3 xmlns="test-top">This sentence should have a green background.</t3></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-namespaces-3/syntax-015.xml b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-015.xml
new file mode 100644
index 000000000..4460ddf55
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-namespaces-3/syntax-015.xml
@@ -0,0 +1,18 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <link rel="author" title="Anne van Kesteren" href="http://annevankesteren.nl/"/>
+  <link rel="author" title="Opera Software ASA" href="http://opera.com/"/>
+  <link rel="help" href="http://www.w3.org/TR/css-namespaces-3/#syntax"/>
+  <link rel="match" href="reftest/ref-lime-1.xml"/>
+  <title>CSS Namespaces Test Suite: invalid URI</title>
+  <style>
+   @namespace x url("test");
+   @namespace x url("}x&lt; >x{");
+   t { background:lime }
+   x|t { background:red }
+  </style>
+ </head>
+ <body>
+  <p><t xmlns="test">This sentence should have a green background.</t></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html
new file mode 100644
index 000000000..d538eebdd
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-cast.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (colors)
+	</title>
+	<meta name="assert" content="
+		Invalid color values in referenced attributes are replaced by the fallback value
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: red; width: 200px; height: 200px; }
+
+			#outer { background: attr(data-test color, green); }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="qqffuutt"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html
new file mode 100644
index 000000000..92258893b
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-invalid-fallback.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (colors)
+	</title>
+	<meta name="assert" content="
+		When the fallback value of an attr() function is invalid, the delcaration is ignored.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; width: 200px; height: 200px; }
+
+			#outer { background: attr(data-test color, qqffuutt); }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="red"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html
new file mode 100644
index 000000000..8817e6b94
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-color-valid.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (colors)
+	</title>
+	<meta name="assert" content="
+		The value of the reference attribute is used correctly in the layout when it's a color.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: red; width: 200px; height: 200px; }
+
+			#outer { background: attr(data-test color); }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="green"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html
new file mode 100644
index 000000000..a56c144c3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (types)
+	</title>
+	<meta name="assert" content="
+		When the type of an att() function is known and unexpected, the declaration is ingored
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; width: attr(data-test color); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="green"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html
new file mode 100644
index 000000000..69766c0e1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-002.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (types)
+	</title>
+	<meta name="assert" content="
+		When the type of an att() function is known and unexpected, the declaration is ignored
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; width: attr(data-test number); height: 200px; }
+			/* NOTE: while '0' is a valid length AND a valid number, the number type isn't a valid representation of a length. */
+			/* The reason for this is that most numbers aren't valid length */
+			/* ! Spec need some updates to make those assumptions clearly valid (see Tab Atkins for details) */
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="0"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html
new file mode 100644
index 000000000..69766c0e1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-invalid-type-003.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (types)
+	</title>
+	<meta name="assert" content="
+		When the type of an att() function is known and unexpected, the declaration is ignored
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; width: attr(data-test number); height: 200px; }
+			/* NOTE: while '0' is a valid length AND a valid number, the number type isn't a valid representation of a length. */
+			/* The reason for this is that most numbers aren't valid length */
+			/* ! Spec need some updates to make those assumptions clearly valid (see Tab Atkins for details) */
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="0"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html
new file mode 100644
index 000000000..930832363
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-cast.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (length)
+	</title>
+	<meta name="assert" content="
+		When the value of referenced attribute isn't a valid length, the fallback value is unsed instead.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: attr(data-test length, 200px); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="qqffuutt"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html
new file mode 100644
index 000000000..6a5d4dfe6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-invalid-fallback.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (length)
+	</title>
+	<meta name="assert" content="
+		When the attr() fallback is an invalid length, the delcaration is correctly ignored.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; width: attr(data-test length, invalid); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="300px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html
new file mode 100644
index 000000000..b8a042fd4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero-nofallback.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (length)
+	</title>
+	<meta name="assert" content="
+		The value of referenced attribute is used correctly as a length (even if it's 0).
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+			#outer2 { background: red; }
+
+			#outer { width: 200px; height: 200px; }
+			#outer2 { width: 200px; width: attr(data-test length); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+	<div id="outer2" data-test="0"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html
new file mode 100644
index 000000000..fcdebc6fa
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid-zero.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (length)
+	</title>
+	<meta name="assert" content="
+		The value of referenced attribute is used correctly as a length (even if it's 0).
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+			#outer2 { background: red; }
+
+			#outer { width: 200px; height: 200px; }
+			#outer2 { width: 200px; width: attr(data-test length, 0); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+	<div id="outer2" data-test="0"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html
new file mode 100644
index 000000000..c78258ffe
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-length-valid.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (length)
+	</title>
+	<meta name="assert" content="
+		The value of referenced attribute is used correctly as a length.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: attr(data-test length); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="200px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html
new file mode 100644
index 000000000..93b2d2182
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-cast.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attributes references (pixels)
+	</title>
+	<meta name="assert" content="
+		When the value of the referenced attribute is not a pixel value, the fallback value is used instead.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: attr(data-test px, 200); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="300px"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html
new file mode 100644
index 000000000..778697d0d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-invalid-fallback.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (pixels)
+	</title>
+	<meta name="assert" content="
+		When the fallback of a pixel attribute reference is invalid, the declaration is ignored.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; width: attr(data-test px, 300px); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="300"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html b/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html
new file mode 100644
index 000000000..ec96924a6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/attr-px-valid.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (pixels)
+	</title>
+	<meta name="assert" content="
+		Attribute references for pixel values are replaced correctly at computed time.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: attr(data-test px); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="200"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html
new file mode 100644
index 000000000..3e035fecf
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-calc.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Calc() inside calc()
+	</title>
+	<meta name="assert" content="
+		The calc() function notation is allowed inside a calc() notation.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; overflow: hidden; }
+			#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
+			#outer { height: calc(calc(100%));
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html
new file mode 100644
index 000000000..af5996963
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units and Media Queries Test:
+		Calc function inside media queries
+	</title>
+	<meta name="assert" content="
+		The calc() expression is supported in the min-width media query.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+	<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+		html { background: red; }
+		@media (min-width: calc(100px)) {
+			html { background: green; }
+		}
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html
new file mode 100644
index 000000000..4b7d7c870
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/calc-in-media-queries-002.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units and Media Queries Test:
+		Calc function inside media queries
+	</title>
+	<meta name="assert" content="
+		The calc() expression is supported in the min-width media query properly (=with range clamping).
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+	<link rel="help" href="http://www.w3.org/TR/css3-mediaqueries/#width">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+		html { background: red; }
+		@media (min-width: calc(-100px)) { /* should clamp to 0px */
+			html { background: green; }
+		}
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html b/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html
new file mode 100644
index 000000000..a88416a2c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/calc-invalid-range-clamping.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Range clamping into calc() expressions
+	</title>
+	<meta name="assert" content="
+		A calc expression can evaluate to a value which is outside the validity range.
+		If it does, this value must be clamped into the range.
+		The declaration must not be ignored.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/>
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"/>
+
+	<link
+		rel="match"
+		href="reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { background: green; width: 200px; height: 200px; }
+			#outer { border-radius: 10px; border-radius: calc(-10px); }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html b/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html
new file mode 100644
index 000000000..1d9033d7e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/calc-parenthesis-stack.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Calc() inside calc()
+	</title>
+	<meta name="assert" content="
+		The calc() function notation is allowed inside a calc() notation.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; overflow: hidden; }
+			#outer { position: absolute; top: 0px; left: 0px; background: green; width: 100%; }
+			#outer { height: calc((((((((((((((((((((((((100%)))))))))))))))))))))))); }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html b/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html
new file mode 100644
index 000000000..8bb0b893c
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/ch-unit-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ch unit</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<link rel="help" href="https://drafts.csswg.org/css-values-3/#font-relative-lengths">
+<meta name="flags" content="">
+<link rel="match" href="reference/ch-unit-001-ref.html">
+<meta name="assert" content="The ch unit is equal to the used advance measure of the 0 (ZERO, U+0030) glyph found in the font used to render it.">
+<style>
+span {
+	background: green;
+	color: green;
+	top: 0; bottom: 0;
+	position: absolute;
+}
+div {
+	background: red;
+	color: red;
+	position: relative;
+	height: 10ch;
+	width: 5ch;
+	float: left;
+}
+
+div + div {
+	width: auto;
+}
+
+div + div span {
+	width: 5ch;
+}
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div><span>00000</span></div>
+  <div><span></span>00000</div>
+</body>
diff --git a/layout/reftests/w3c-css/received/css-values-3/initial-background-color.html b/layout/reftests/w3c-css/received/css-values-3/initial-background-color.html
new file mode 100644
index 000000000..f38226651
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/initial-background-color.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units + CSS Background and Borders Test:
+		Initial property and background-color
+	</title>
+	<meta name="assert" content="
+		The initial keyword is supported on background-color.
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: green; overflow: hidden; }
+			#outer { position: absolute; top: 0px; left: 0px; red; width: 100%; height: 100%; }
+			#outer { background: red; background-color: initial; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html b/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html
new file mode 100644
index 000000000..f3da3ddb3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/reference/200-200-green.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are interpolated correctly (reference rendering)
+	</title>
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: 200px; height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html b/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html
new file mode 100644
index 000000000..c70532129
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/reference/all-green.html
@@ -0,0 +1 @@
+<html style="background: green"></html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html
new file mode 100644
index 000000000..499d43094
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/reference/ch-unit-001-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Values and Units Test Reference File</title>
+<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<meta name="flags" content="">
+<style>
+div {
+	background: green;
+	height: 10ch;
+	width: 10ch;
+	float: left;
+}
+
+</style>
+<body>
+  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+  <div></div>
+</body>
diff --git a/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html b/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html
new file mode 100644
index 000000000..eb5b15d4a
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/reference/vh_not_refreshing_on_chrome-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<!-- Submitted from TestTWF Paris -->
+<head>
+
+	<title>CSS Reference File</title>
+	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
+
+	<style type="text/css">
+
+		* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
+
+		#frameTest { width: 600px; height: 200px; border: 1px solid #000; }
+
+	</style>
+
+	<script type="text/javascript">
+		var height = 200;
+
+		function resizeReference() {
+
+			var frameTest = document.getElementById('frameTest');
+
+			// let's resize the iframe vertically only, showing that the vh sizes is not updated.
+			if (height <= 300) {
+
+				//frameTest.style.width = height++ + "px";
+				frameTest.style.height = height++ + "px";
+
+				setTimeout(resizeReference, 10);
+
+			} else {
+
+				// uncomment the next line to see how a width resize triggers a layout recalculation
+				//frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px";
+
+			}
+
+		}
+
+		setTimeout(resizeReference, 10);
+	</script>
+
+</head>
+<body>
+
+<iframe id="frameTest" src="vh_not_refreshing_on_chrome_iframe-ref.html" frameborder="0"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png
new file mode 100644
index 000000000..b98ca0ba0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-green.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png
new file mode 100644
index 000000000..cb397fb09
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-lime.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png
new file mode 100644
index 000000000..3f86b0721
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-maroon.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png
new file mode 100644
index 000000000..9b9a03955
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-navy.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png
new file mode 100644
index 000000000..6bd73ac10
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-red.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png b/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png
new file mode 100644
index 000000000..dd43faec5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/1x1-white.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png
new file mode 100644
index 000000000..84f5b2a4f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/60x60-gg-rr.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png
new file mode 100644
index 000000000..b3c8cf3eb
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/60x60-green.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png b/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png
new file mode 100644
index 000000000..823f125b8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/60x60-red.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/README b/layout/reftests/w3c-css/received/css-values-3/support/README
new file mode 100644
index 000000000..2e5f2ad07
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/README
@@ -0,0 +1,28 @@
+CSS Global Support Directory
+============================
+
+This directory contains common support files (such as images and external
+style sheets). These are sync'ed into the support directories of all our
+test suites. If you have test-suite-specific support files, please add
+them to the appropriate test-suite-specific support/ directory.
+
+If you add to a support/ directory, please run the tools/supportprop.py
+script from the top of the repository to cascade support files into the
+lower-level support directories.
+
+Description of the Common Support File Collection
+-------------------------------------------------
+
+The 1x1-* images are all exactly one pixel.
+
+The swatch-* images all use 15x15 cells.
+
+The square-* images all use 15x15 cells with one pixel borders.
+
+The pattern-* images use cells of various sizes:
+
+   pattern-grg-rgr-grg.png   20x20
+   pattern-rgr-grg-rgr.png   20x20
+   pattern-tr.png            15x15
+   pattern-grg-rrg-rgg.png   15x15
+
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/a-green.css b/layout/reftests/w3c-css/received/css-values-3/support/a-green.css
new file mode 100644
index 000000000..b0dbb071d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/a-green.css
@@ -0,0 +1 @@
+.a { color: green; }
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/b-green.css b/layout/reftests/w3c-css/received/css-values-3/support/b-green.css
new file mode 100644
index 000000000..a0473f5ca
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/b-green.css
@@ -0,0 +1 @@
+.b { color: green; }
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/c-red.css b/layout/reftests/w3c-css/received/css-values-3/support/c-red.css
new file mode 100644
index 000000000..d4ba5c64e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/c-red.css
@@ -0,0 +1 @@
+.c { color: red; }
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/cat.png b/layout/reftests/w3c-css/received/css-values-3/support/cat.png
new file mode 100644
index 000000000..85dd73248
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/cat.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/import-green.css b/layout/reftests/w3c-css/received/css-values-3/support/import-green.css
new file mode 100644
index 000000000..537104e66
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/import-green.css
@@ -0,0 +1 @@
+.import { color: green; }
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/import-red.css b/layout/reftests/w3c-css/received/css-values-3/support/import-red.css
new file mode 100644
index 000000000..9945ef471
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/import-red.css
@@ -0,0 +1 @@
+.import { color: red; }
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png
new file mode 100644
index 000000000..9b88fbd81
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rgr-grg.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png
new file mode 100644
index 000000000..fcf4f3fd7
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-grg-rrg-rgg.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png
new file mode 100644
index 000000000..d454e3a63
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-rgr-grg-rgr.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png b/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png
new file mode 100644
index 000000000..8b4b25364
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/pattern-tr.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png
new file mode 100644
index 000000000..cf2eea6b4
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50%.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png
new file mode 100644
index 000000000..9f4658366
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-h-50px.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png
new file mode 100644
index 000000000..a837eca22
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-100px.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png
new file mode 100644
index 000000000..841410280
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/ruler-v-50px.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png b/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png
new file mode 100644
index 000000000..0f522d787
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/square-purple.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png b/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png
new file mode 100644
index 000000000..e567f51b9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/square-teal.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/square-white.png b/layout/reftests/w3c-css/received/css-values-3/support/square-white.png
new file mode 100644
index 000000000..5853cbb23
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/square-white.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/README b/layout/reftests/w3c-css/received/css-values-3/support/support/README
new file mode 100644
index 000000000..ea8cb9ef3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/support/README
@@ -0,0 +1,4 @@
+The swatch-green.png file in this directory is really a RED swatch,
+and the swatch-red.png file is really a green swatch.
+
+This directory is used to test relative URIs.
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png
new file mode 100644
index 000000000..1caf25c99
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-green.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png
new file mode 100644
index 000000000..0aa79b0c8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/support/swatch-red.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png
new file mode 100644
index 000000000..bf2759634
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-blue.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png
new file mode 100644
index 000000000..0aa79b0c8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-green.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png
new file mode 100644
index 000000000..55fd7fdae
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-lime.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png
new file mode 100644
index 000000000..d3cd498b5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-orange.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png
new file mode 100644
index 000000000..1caf25c99
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-red.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png
new file mode 100644
index 000000000..0293ce89d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-teal.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png
new file mode 100644
index 000000000..1a7d4323d
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-white.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png b/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png
new file mode 100644
index 000000000..1591aa0e2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/swatch-yellow.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png b/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png
new file mode 100644
index 000000000..904e24e99
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/test-bl.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-br.png b/layout/reftests/w3c-css/received/css-values-3/support/test-br.png
new file mode 100644
index 000000000..f413ff5c1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/test-br.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png b/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png
new file mode 100644
index 000000000..e473bf80e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/test-inner-half-size.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png b/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png
new file mode 100644
index 000000000..82eeace7f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/test-outer.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png b/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png
new file mode 100644
index 000000000..f6ac0ef7e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/test-tl.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png b/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png
new file mode 100644
index 000000000..59843ae54
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/support/test-tr.png
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html
new file mode 100644
index 000000000..3a422d4ce
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support-pct.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are supported inside calc expressions.
+	</title>
+	<meta name="assert" content="
+		Check that viewport units add correctly to percentages in calc() expressions
+	" />
+
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; }
+			#target { position: absolute; background: green; width: calc(100vw + 50%); height: calc(100vh + 50%); top: -50%; left: -50%; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html
new file mode 100644
index 000000000..0e98941ab
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-calc-support.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are supported inside calc expressions.
+	</title>
+	<meta name="assert" content="
+		Check that viewport units add correctly to pixels in calc() expressions
+	" />
+
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/>
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; }
+			#target { position: absolute; background: green; width: calc(100vw + 50px); height: calc(100vh + 50px); top: -50px; left: -50px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html b/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html
new file mode 100644
index 000000000..1affbd093
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-em-inherit.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		0vh and 0vw are correctly treated as 0px
+	</title>
+	<meta name="assert" content="
+		0vh and 0vw are correctly treated as 0px
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; font-size: 100vw; }
+			#target { background: green; width: 1rem; height: 1em; font-size: 100vh; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-inherit.html b/layout/reftests/w3c-css/received/css-values-3/vh-inherit.html
new file mode 100644
index 000000000..99890e309
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-inherit.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are inherited properly
+	</title>
+	<meta name="assert" content="
+		Viewport units are inherited properly
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; }
+			#outer { position: relative; background: green; width: 50vw; height: 100vh; }
+			#inner { position: absolute; background: green; left: 100%; width: inherit; height: inherit; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"><div id="inner"></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html
new file mode 100644
index 000000000..293d686c8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-pct.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are interpolated correctly
+	</title>
+	<meta name="assert" content="
+		The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/>
+	<link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			@keyframes anim {
+				from { width: 0%; height: 0%; }
+				to   { width: 200vw; height: 200vh; }
+			}
+
+			html, body { margin: 0px; padding: 0px; height: 100%; }
+
+			html { background: red; overflow: hidden; }
+			#outer { position: relative; background: green; }
+			#outer { animation: anim 2000000s; animation-delay: -1000000s; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html
new file mode 100644
index 000000000..f07135743
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-px.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are interpolated correctly
+	</title>
+	<meta name="assert" content="
+		The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/>
+	<link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			@keyframes anim {
+				from { width: 0px; height: 0px; }
+				to   { width: 200vw; height: 200vh; }
+			}
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; overflow: hidden; }
+			#outer { position: relative; background: green; }
+			#outer { animation: anim 2000000s; animation-delay: -1000000s; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html
new file mode 100644
index 000000000..d6671174e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-interpolate-vh.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewport units are interpolated correctly
+	</title>
+	<meta name="assert" content="
+		The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"/>
+	<link rel="help" href="http://www.w3.org/TR/css3-animations/#animations"/>
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			@keyframes anim {
+				from { width: 75vw; height: 75vh; }
+				to   { width: 125vw; height: 125vh; }
+			}
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: red; overflow: hidden; }
+			#outer { position: relative; background: green; }
+			#outer { animation: anim 2000000s; animation-delay: -1000000s; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html
new file mode 100644
index 000000000..c79ace6df
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-atviewport.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewports units are supported in @viewport rules
+	</title>
+	<meta name="assert" content="
+		Viewports units are supported in @viewport rules
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/>
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" />
+	<link rel="help" href="https://drafts.csswg.org/css-device-adapt-1/" />
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; overflow: hidden; }
+
+			@viewport { width: 1vw; }
+
+			html { background: red; }
+			#target { background: green; width: 100vw; height: 100vh; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html
new file mode 100644
index 000000000..06b2375a8
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-margin.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewports units are supported in margin properties
+	</title>
+	<meta name="assert" content="
+		Viewports units are supported in margin properties
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: green; }
+			#target { background: red; width: 100%; height: 100%; margin-left: -100vw; margin-top: -100vh; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html
new file mode 100644
index 000000000..4b06a09fc
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-origin.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewports units are supported in transform properties
+	</title>
+	<meta name="assert" content="
+		Viewports units are supported in transform properties
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+	<link rel="help" href="http://www.w3.org/TR/css3-2d-transforms/#css-values">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; overflow: hidden; }
+
+			html { background: green; }
+			iframe { width: 400px; height: 400px; margin: 0px; padding: 0px; border: 0px none transparent; }
+
+	</style>
+
+</head>
+<body>
+
+	<iframe src="iframe/vh-support-transform-origin-iframe.html"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html
new file mode 100644
index 000000000..e273026a0
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-support-transform-translate.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewports units are supported in transform properties
+	</title>
+	<meta name="assert" content="
+		Viewports units are supported in transform properties (translate)
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+	<link rel="help" href="http://www.w3.org/TR/css3-2d-transforms/#css-values">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; overflow: hidden; }
+
+			html { background: green; }
+			iframe { width: 400px; height: 400px; margin: 0px; padding: 0px; border: 0px none transparent; }
+
+	</style>
+
+</head>
+<body>
+
+	<iframe src="iframe/vh-support-transform-translate-iframe.html"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-support.html
new file mode 100644
index 000000000..c65b5493f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-support.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Viewports units are supported in sizing properties
+	</title>
+	<meta name="assert" content="
+		Viewports units are supported in sizing properties
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			#target { background: green; width: 100vw; height: 100vh; }
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html b/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html
new file mode 100644
index 000000000..1c1bcd176
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh-zero-support.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		0vh and 0vw are correctly treated as 0px
+	</title>
+	<meta name="assert" content="
+		0vh and 0vw are correctly treated as 0px
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+	<link
+		rel="match"
+		href="reference/all-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: green; }
+			#target { background: red; width: 0vw; height: 0vh; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="target"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html
new file mode 100644
index 000000000..11b973a29
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome.html
@@ -0,0 +1,53 @@
+<!-- Submitted from TestTWF Paris -->
+<!DOCTYPE html>
+<html>
+<head>
+	<title>CSS Values and Units Test: vh-based dimension doesn't change when the element's other dimension doesn't change.</title>
+	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+	<link rel="match" href="reference/vh_not_refreshing_on_chrome-ref.html">
+	<meta name="assert" content="vh-based dimension doesn't change when the element's other dimension doesn't change.">
+	<!-- This test exhibits a bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8 -->
+
+	<style type="text/css">
+
+		* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
+
+		#frameTest { width: 600px; height: 200px; border: 1px solid #000; }
+
+	</style>
+
+	<script type="text/javascript">
+		var height = 200;
+
+		function resizeReference() {
+
+			var frameTest = document.getElementById('frameTest');
+
+			// let's resize the iframe vertically only, showing that the vh sizes is not updated.
+			if (height <= 300) {
+
+				//frameTest.style.width = height++ + "px";
+				frameTest.style.height = height++ + "px";
+
+				setTimeout(resizeReference, 10);
+
+			} else {
+
+				// uncomment the next line to see how a width resize triggers a layout recalculation
+				//frameTest.style.width = (parseInt(window.getComputedStyle(document.getElementById('frameTest'))['width'], 10) + 1) + "px";
+
+			}
+
+		}
+
+		setTimeout(resizeReference, 10);
+	</script>
+
+</head>
+<body>
+
+<iframe id="frameTest" src="vh_not_refreshing_on_chrome_iframe.html" frameborder="0"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html
new file mode 100644
index 000000000..89ed75a52
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-values-3/vh_not_refreshing_on_chrome_iframe.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<!-- Submitted from TestTWF Paris -->
+<head>
+
+	<title>CSS Values and Units Test: vh-based dimension doesn't change when the element other dimension doesn't change.</title>
+	<meta name="assert" content="vh-based dimension doesn't change when the element other dimension doesn't change. Bug for Chrome 19.0.1084.56 / Mac OS X 10.6.8">
+	<link rel="author" title="Marc Bourlon" href="mailto:marc@bourlon.com">
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" title="5.1.2. Viewport-percentage lengths: the 'vw', 'vh', 'vmin', 'vmax' units">
+	<link rel="match" href="reference/vh_not_refreshing_on_chrome-ref.html">
+
+	<style type="text/css">
+
+		* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
+
+			/* the first test box has its vertical dimension is set to some vh units */
+		#testBoxWithVhOnly { background: #F00; width: 60px; height: 20vh; float: left; }
+
+			/* the second test box, with fixed height */
+		#testBoxNotGrownHorizontallyByJS { background: #F0F; width: 20vh; height: 60px; float: left; }
+
+			/* third box, changed by using CSS transition */
+		#testBoxWithTransition { background: #FF0; width: 20vh; height: 40px; float: left;
+			transition-property:       width, height;
+			transition-duration:       1.5s;
+			transition-delay:          0;
+		}
+
+			/* the reference box, growing in both directions (height by js, width by vh unit */
+		#referenceBoxGrownHorizontallyByJS { background: #0F0; width: 20vh; height: 40px; float: left; }
+
+		p { clear: both; margin: 10px 0; }
+
+	</style>
+
+</head>
+<body>
+
+<p>
+	All boxes should end up the same size. The green box is the reference one.
+</p>
+
+<div id="testBoxWithVhOnly"></div>
+<div id="testBoxNotGrownHorizontallyByJS"></div>
+<div id="testBoxWithTransition"></div>
+<div id="referenceBoxGrownHorizontallyByJS"></div>
+
+<script type="text/javascript">
+
+	// In case this file was opened by mistake, redirects to proper test
+	if (window.top.location.href  === document.location.href) {
+
+		window.top.location.href = "vh_not_refreshing_on_chrome.html";
+
+	}
+
+	function setDimension(id, dimension, value) {
+
+		var element = document.getElementById(id);
+
+		element.style[dimension] = value + "px";
+
+	}
+
+	function animate() {
+
+		var viewportHeight = document.documentElement.clientHeight;
+
+		var sizeH = 20;
+
+		var referenceDimension = Math.round(sizeH * viewportHeight / 100);
+
+		setDimension('referenceBoxGrownHorizontallyByJS', 'height', referenceDimension);
+
+		setTimeout(animate, 20);
+	}
+
+	setTimeout(animate, 20);
+
+	var transitionedTestBoxStyle = document.getElementById('testBoxWithTransition').style;
+	transitionedTestBoxStyle.height = "60px";
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/import.log b/layout/reftests/w3c-css/received/import.log
new file mode 100644
index 000000000..66988c5a1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/import.log
@@ -0,0 +1,466 @@
+Importing revision: d261d6def2373f64d94b113860b29d3e45a02bd1
+from repository: https://hg.csswg.org/test
+Importing css-conditional-3/at-media-whitespace-optional-001.html to css-conditional-3/at-media-whitespace-optional-001.html
+Importing css-conditional-3/reference/background-lime.html to css-conditional-3/reference/background-lime.html
+Importing css-conditional-3/at-media-whitespace-optional-002.html to css-conditional-3/at-media-whitespace-optional-002.html
+Importing css-conditional-3/at-supports-001.html to css-conditional-3/at-supports-001.html
+Importing css-conditional-3/at-supports-001-ref.html to css-conditional-3/at-supports-001-ref.html
+Importing css-conditional-3/at-supports-002.html to css-conditional-3/at-supports-002.html
+Importing css-conditional-3/at-supports-003.html to css-conditional-3/at-supports-003.html
+Importing css-conditional-3/at-supports-004.html to css-conditional-3/at-supports-004.html
+Importing css-conditional-3/at-supports-005.html to css-conditional-3/at-supports-005.html
+Importing css-conditional-3/at-supports-006.html to css-conditional-3/at-supports-006.html
+Importing css-conditional-3/at-supports-007.html to css-conditional-3/at-supports-007.html
+Importing css-conditional-3/at-supports-008.html to css-conditional-3/at-supports-008.html
+Importing css-conditional-3/at-supports-009.html to css-conditional-3/at-supports-009.html
+Importing css-conditional-3/at-supports-010.html to css-conditional-3/at-supports-010.html
+Importing css-conditional-3/at-supports-011.html to css-conditional-3/at-supports-011.html
+Importing css-conditional-3/at-supports-012.html to css-conditional-3/at-supports-012.html
+Importing css-conditional-3/at-supports-013.html to css-conditional-3/at-supports-013.html
+Importing css-conditional-3/at-supports-014.html to css-conditional-3/at-supports-014.html
+Importing css-conditional-3/at-supports-015.html to css-conditional-3/at-supports-015.html
+Importing css-conditional-3/at-supports-016.html to css-conditional-3/at-supports-016.html
+Importing css-conditional-3/at-supports-017.html to css-conditional-3/at-supports-017.html
+Importing css-conditional-3/at-supports-018.html to css-conditional-3/at-supports-018.html
+Importing css-conditional-3/at-supports-019.html to css-conditional-3/at-supports-019.html
+Importing css-conditional-3/at-supports-020.html to css-conditional-3/at-supports-020.html
+Importing css-conditional-3/at-supports-021.html to css-conditional-3/at-supports-021.html
+Importing css-conditional-3/at-supports-022.html to css-conditional-3/at-supports-022.html
+Importing css-conditional-3/at-supports-023.html to css-conditional-3/at-supports-023.html
+Importing css-conditional-3/at-supports-024.html to css-conditional-3/at-supports-024.html
+Importing css-conditional-3/at-supports-025.html to css-conditional-3/at-supports-025.html
+Importing css-conditional-3/at-supports-026.html to css-conditional-3/at-supports-026.html
+Importing css-conditional-3/at-supports-027.html to css-conditional-3/at-supports-027.html
+Importing css-conditional-3/at-supports-027-ref.html to css-conditional-3/at-supports-027-ref.html
+Importing css-conditional-3/at-supports-028.html to css-conditional-3/at-supports-028.html
+Importing css-conditional-3/at-supports-029.html to css-conditional-3/at-supports-029.html
+Importing css-conditional-3/at-supports-030.html to css-conditional-3/at-supports-030.html
+Importing css-conditional-3/at-supports-031.html to css-conditional-3/at-supports-031.html
+Importing css-conditional-3/at-supports-032.html to css-conditional-3/at-supports-032.html
+Importing css-conditional-3/at-supports-033.html to css-conditional-3/at-supports-033.html
+Importing css-conditional-3/at-supports-034.html to css-conditional-3/at-supports-034.html
+Importing css-conditional-3/at-supports-035.html to css-conditional-3/at-supports-035.html
+Importing css-conditional-3/at-supports-036.html to css-conditional-3/at-supports-036.html
+Importing css-conditional-3/at-supports-037.html to css-conditional-3/at-supports-037.html
+Importing css-conditional-3/at-supports-038.html to css-conditional-3/at-supports-038.html
+Importing css-conditional-3/at-supports-039.html to css-conditional-3/at-supports-039.html
+Importing css-multicol-1/multicol-basic-001.html to css-multicol-1/multicol-basic-001.html
+Importing css-multicol-1/support/1x1-green.png to css-multicol-1/support/1x1-green.png
+Importing css-multicol-1/support/1x1-lime.png to css-multicol-1/support/1x1-lime.png
+Importing css-multicol-1/support/1x1-maroon.png to css-multicol-1/support/1x1-maroon.png
+Importing css-multicol-1/support/1x1-navy.png to css-multicol-1/support/1x1-navy.png
+Importing css-multicol-1/support/1x1-red.png to css-multicol-1/support/1x1-red.png
+Importing css-multicol-1/support/1x1-white.png to css-multicol-1/support/1x1-white.png
+Importing css-multicol-1/support/60x60-gg-rr.png to css-multicol-1/support/60x60-gg-rr.png
+Importing css-multicol-1/support/60x60-green.png to css-multicol-1/support/60x60-green.png
+Importing css-multicol-1/support/60x60-red.png to css-multicol-1/support/60x60-red.png
+Importing css-multicol-1/support/a-green.css to css-multicol-1/support/a-green.css
+Importing css-multicol-1/support/b-green.css to css-multicol-1/support/b-green.css
+Importing css-multicol-1/support/black20x20.png to css-multicol-1/support/black20x20.png
+Importing css-multicol-1/support/c-red.css to css-multicol-1/support/c-red.css
+Importing css-multicol-1/support/cat.png to css-multicol-1/support/cat.png
+Importing css-multicol-1/support/import-green.css to css-multicol-1/support/import-green.css
+Importing css-multicol-1/support/import-red.css to css-multicol-1/support/import-red.css
+Importing css-multicol-1/support/pattern-grg-rgr-grg.png to css-multicol-1/support/pattern-grg-rgr-grg.png
+Importing css-multicol-1/support/pattern-grg-rrg-rgg.png to css-multicol-1/support/pattern-grg-rrg-rgg.png
+Importing css-multicol-1/support/pattern-rgr-grg-rgr.png to css-multicol-1/support/pattern-rgr-grg-rgr.png
+Importing css-multicol-1/support/pattern-tr.png to css-multicol-1/support/pattern-tr.png
+Importing css-multicol-1/support/red20x20.png to css-multicol-1/support/red20x20.png
+Importing css-multicol-1/support/square-purple.png to css-multicol-1/support/square-purple.png
+Importing css-multicol-1/support/square-teal.png to css-multicol-1/support/square-teal.png
+Importing css-multicol-1/support/square-white.png to css-multicol-1/support/square-white.png
+Importing css-multicol-1/support/swatch-blue.png to css-multicol-1/support/swatch-blue.png
+Importing css-multicol-1/support/swatch-gray.png to css-multicol-1/support/swatch-gray.png
+Importing css-multicol-1/support/swatch-green.png to css-multicol-1/support/swatch-green.png
+Importing css-multicol-1/support/swatch-lime.png to css-multicol-1/support/swatch-lime.png
+Importing css-multicol-1/support/swatch-navy.png to css-multicol-1/support/swatch-navy.png
+Importing css-multicol-1/support/swatch-orange.png to css-multicol-1/support/swatch-orange.png
+Importing css-multicol-1/support/swatch-pink.png to css-multicol-1/support/swatch-pink.png
+Importing css-multicol-1/support/swatch-purple.png to css-multicol-1/support/swatch-purple.png
+Importing css-multicol-1/support/swatch-red.png to css-multicol-1/support/swatch-red.png
+Importing css-multicol-1/support/swatch-white.png to css-multicol-1/support/swatch-white.png
+Importing css-multicol-1/support/swatch-yellow.png to css-multicol-1/support/swatch-yellow.png
+Importing css-multicol-1/support/test-bl.png to css-multicol-1/support/test-bl.png
+Importing css-multicol-1/support/test-br.png to css-multicol-1/support/test-br.png
+Importing css-multicol-1/support/test-outer.png to css-multicol-1/support/test-outer.png
+Importing css-multicol-1/support/test-tl.png to css-multicol-1/support/test-tl.png
+Importing css-multicol-1/support/test-tr.png to css-multicol-1/support/test-tr.png
+Importing css-multicol-1/reference/multicol-basic-ref.html to css-multicol-1/reference/multicol-basic-ref.html
+Importing css-multicol-1/multicol-basic-002.html to css-multicol-1/multicol-basic-002.html
+Importing css-multicol-1/multicol-basic-003.html to css-multicol-1/multicol-basic-003.html
+Importing css-multicol-1/multicol-basic-004.html to css-multicol-1/multicol-basic-004.html
+Importing css-multicol-1/multicol-block-clip-001.xht to css-multicol-1/multicol-block-clip-001.xht
+Importing css-multicol-1/multicol-block-clip-001-ref.xht to css-multicol-1/multicol-block-clip-001-ref.xht
+Importing css-multicol-1/multicol-block-clip-002.xht to css-multicol-1/multicol-block-clip-002.xht
+Importing css-multicol-1/multicol-block-clip-002-ref.xht to css-multicol-1/multicol-block-clip-002-ref.xht
+Importing css-multicol-1/multicol-br-inside-avoidcolumn-001.xht to css-multicol-1/multicol-br-inside-avoidcolumn-001.xht
+Importing css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht to css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht
+Importing css-multicol-1/multicol-break-000.xht to css-multicol-1/multicol-break-000.xht
+Importing css-multicol-1/multicol-break-000-ref.xht to css-multicol-1/multicol-break-000-ref.xht
+Importing css-multicol-1/multicol-break-001.xht to css-multicol-1/multicol-break-001.xht
+Importing css-multicol-1/multicol-break-001-ref.xht to css-multicol-1/multicol-break-001-ref.xht
+Importing css-multicol-1/multicol-clip-001.xht to css-multicol-1/multicol-clip-001.xht
+Importing css-multicol-1/multicol-clip-001-ref.xht to css-multicol-1/multicol-clip-001-ref.xht
+Importing css-multicol-1/multicol-clip-002.xht to css-multicol-1/multicol-clip-002.xht
+Importing css-multicol-1/multicol-clip-002-ref.xht to css-multicol-1/multicol-clip-002-ref.xht
+Importing css-multicol-1/multicol-collapsing-001.xht to css-multicol-1/multicol-collapsing-001.xht
+Importing css-multicol-1/multicol-collapsing-001-ref.xht to css-multicol-1/multicol-collapsing-001-ref.xht
+Importing css-multicol-1/multicol-columns-001.xht to css-multicol-1/multicol-columns-001.xht
+Importing css-multicol-1/multicol-columns-001-ref.xht to css-multicol-1/multicol-columns-001-ref.xht
+Importing css-multicol-1/multicol-columns-002.xht to css-multicol-1/multicol-columns-002.xht
+Importing css-multicol-1/multicol-columns-003.xht to css-multicol-1/multicol-columns-003.xht
+Importing css-multicol-1/multicol-columns-004.xht to css-multicol-1/multicol-columns-004.xht
+Importing css-multicol-1/multicol-columns-005.xht to css-multicol-1/multicol-columns-005.xht
+Importing css-multicol-1/multicol-columns-006.xht to css-multicol-1/multicol-columns-006.xht
+Importing css-multicol-1/multicol-columns-007.xht to css-multicol-1/multicol-columns-007.xht
+Importing css-multicol-1/multicol-columns-invalid-001.xht to css-multicol-1/multicol-columns-invalid-001.xht
+Importing css-multicol-1/multicol-columns-invalid-001-ref.xht to css-multicol-1/multicol-columns-invalid-001-ref.xht
+Importing css-multicol-1/multicol-columns-invalid-002.xht to css-multicol-1/multicol-columns-invalid-002.xht
+Importing css-multicol-1/multicol-columns-toolong-001.xht to css-multicol-1/multicol-columns-toolong-001.xht
+Importing css-multicol-1/multicol-containing-001.xht to css-multicol-1/multicol-containing-001.xht
+Importing css-multicol-1/multicol-containing-001-ref.xht to css-multicol-1/multicol-containing-001-ref.xht
+Importing css-multicol-1/multicol-containing-002.xht to css-multicol-1/multicol-containing-002.xht
+Importing css-multicol-1/multicol-containing-002-ref.xht to css-multicol-1/multicol-containing-002-ref.xht
+Importing css-multicol-1/multicol-count-001.xht to css-multicol-1/multicol-count-001.xht
+Importing css-multicol-1/multicol-count-002.xht to css-multicol-1/multicol-count-002.xht
+Importing css-multicol-1/multicol-count-002-ref.xht to css-multicol-1/multicol-count-002-ref.xht
+Importing css-multicol-1/multicol-count-computed-001.xht to css-multicol-1/multicol-count-computed-001.xht
+Importing css-multicol-1/multicol-count-computed-ref.xht to css-multicol-1/multicol-count-computed-ref.xht
+Importing css-multicol-1/multicol-count-computed-002.xht to css-multicol-1/multicol-count-computed-002.xht
+Importing css-multicol-1/multicol-count-computed-2-ref.xht to css-multicol-1/multicol-count-computed-2-ref.xht
+Importing css-multicol-1/multicol-count-computed-003.xht to css-multicol-1/multicol-count-computed-003.xht
+Importing css-multicol-1/multicol-count-computed-003-ref.xht to css-multicol-1/multicol-count-computed-003-ref.xht
+Importing css-multicol-1/multicol-count-computed-004.xht to css-multicol-1/multicol-count-computed-004.xht
+Importing css-multicol-1/multicol-count-computed-004-ref.xht to css-multicol-1/multicol-count-computed-004-ref.xht
+Importing css-multicol-1/multicol-count-computed-005.xht to css-multicol-1/multicol-count-computed-005.xht
+Importing css-multicol-1/multicol-count-large-001.xht to css-multicol-1/multicol-count-large-001.xht
+Importing css-multicol-1/multicol-count-large-ref.xht to css-multicol-1/multicol-count-large-ref.xht
+Importing css-multicol-1/multicol-count-large-002.xht to css-multicol-1/multicol-count-large-002.xht
+Importing css-multicol-1/multicol-count-large-2-ref.xht to css-multicol-1/multicol-count-large-2-ref.xht
+Importing css-multicol-1/multicol-count-negative-001.xht to css-multicol-1/multicol-count-negative-001.xht
+Importing css-multicol-1/multicol-count-negative-002.xht to css-multicol-1/multicol-count-negative-002.xht
+Importing css-multicol-1/multicol-count-non-integer-001.xht to css-multicol-1/multicol-count-non-integer-001.xht
+Importing css-multicol-1/multicol-count-non-integer-002.xht to css-multicol-1/multicol-count-non-integer-002.xht
+Importing css-multicol-1/multicol-count-non-integer-003.xht to css-multicol-1/multicol-count-non-integer-003.xht
+Importing css-multicol-1/multicol-fill-000.xht to css-multicol-1/multicol-fill-000.xht
+Importing css-multicol-1/multicol-fill-000-ref.xht to css-multicol-1/multicol-fill-000-ref.xht
+Importing css-multicol-1/multicol-fill-001.xht to css-multicol-1/multicol-fill-001.xht
+Importing css-multicol-1/multicol-fill-001-ref.xht to css-multicol-1/multicol-fill-001-ref.xht
+Importing css-multicol-1/multicol-fill-auto-001.xht to css-multicol-1/multicol-fill-auto-001.xht
+Importing css-multicol-1/multicol-fill-auto-001-ref.xht to css-multicol-1/multicol-fill-auto-001-ref.xht
+Importing css-multicol-1/multicol-fill-auto-002.xht to css-multicol-1/multicol-fill-auto-002.xht
+Importing css-multicol-1/multicol-fill-auto-002-ref.xht to css-multicol-1/multicol-fill-auto-002-ref.xht
+Importing css-multicol-1/multicol-fill-auto-003.xht to css-multicol-1/multicol-fill-auto-003.xht
+Importing css-multicol-1/multicol-fill-auto-003-ref.xht to css-multicol-1/multicol-fill-auto-003-ref.xht
+Importing css-multicol-1/multicol-fill-auto-block-children-001.xht to css-multicol-1/multicol-fill-auto-block-children-001.xht
+Importing css-multicol-1/multicol-fill-auto-block-children-ref.xht to css-multicol-1/multicol-fill-auto-block-children-ref.xht
+Importing css-multicol-1/multicol-fill-auto-block-children-002.xht to css-multicol-1/multicol-fill-auto-block-children-002.xht
+Importing css-multicol-1/multicol-fill-auto-block-children-002-ref.xht to css-multicol-1/multicol-fill-auto-block-children-002-ref.xht
+Importing css-multicol-1/multicol-fill-auto.xht to css-multicol-1/multicol-fill-auto.xht
+Importing css-multicol-1/multicol-fill-ref.xht to css-multicol-1/multicol-fill-ref.xht
+Importing css-multicol-1/multicol-fill-balance-001.xht to css-multicol-1/multicol-fill-balance-001.xht
+Importing css-multicol-1/multicol-fill-balance-001-ref.xht to css-multicol-1/multicol-fill-balance-001-ref.xht
+Importing css-multicol-1/multicol-gap-000.xht to css-multicol-1/multicol-gap-000.xht
+Importing css-multicol-1/multicol-gap-000-ref.xht to css-multicol-1/multicol-gap-000-ref.xht
+Importing css-multicol-1/multicol-gap-001.xht to css-multicol-1/multicol-gap-001.xht
+Importing css-multicol-1/multicol-gap-001-ref.xht to css-multicol-1/multicol-gap-001-ref.xht
+Importing css-multicol-1/multicol-gap-002.xht to css-multicol-1/multicol-gap-002.xht
+Importing css-multicol-1/multicol-gap-002-ref.xht to css-multicol-1/multicol-gap-002-ref.xht
+Importing css-multicol-1/multicol-gap-003.xht to css-multicol-1/multicol-gap-003.xht
+Importing css-multicol-1/multicol-gap-fraction-001.xht to css-multicol-1/multicol-gap-fraction-001.xht
+Importing css-multicol-1/multicol-gap-fraction-001-ref.xht to css-multicol-1/multicol-gap-fraction-001-ref.xht
+Importing css-multicol-1/multicol-gap-large-001.xht to css-multicol-1/multicol-gap-large-001.xht
+Importing css-multicol-1/multicol-gap-large-001-ref.xht to css-multicol-1/multicol-gap-large-001-ref.xht
+Importing css-multicol-1/multicol-gap-large-002.xht to css-multicol-1/multicol-gap-large-002.xht
+Importing css-multicol-1/multicol-gap-large-002-ref.xht to css-multicol-1/multicol-gap-large-002-ref.xht
+Importing css-multicol-1/multicol-gap-negative-001.xht to css-multicol-1/multicol-gap-negative-001.xht
+Importing css-multicol-1/multicol-height-001.xht to css-multicol-1/multicol-height-001.xht
+Importing css-multicol-1/multicol-height-001-ref.xht to css-multicol-1/multicol-height-001-ref.xht
+Importing css-multicol-1/multicol-height-block-child-001.xht to css-multicol-1/multicol-height-block-child-001.xht
+Importing css-multicol-1/multicol-height-block-child-001-ref.xht to css-multicol-1/multicol-height-block-child-001-ref.xht
+Importing css-multicol-1/multicol-inherit-001.xht to css-multicol-1/multicol-inherit-001.xht
+Importing css-multicol-1/multicol-inherit-001-ref.xht to css-multicol-1/multicol-inherit-001-ref.xht
+Importing css-multicol-1/multicol-inherit-002.xht to css-multicol-1/multicol-inherit-002.xht
+Importing css-multicol-1/multicol-inherit-002-ref.xht to css-multicol-1/multicol-inherit-002-ref.xht
+Importing css-multicol-1/multicol-inherit-003.xht to css-multicol-1/multicol-inherit-003.xht
+Importing css-multicol-1/multicol-inherit-3-ref.xht to css-multicol-1/multicol-inherit-3-ref.xht
+Importing css-multicol-1/multicol-inherit-004.xht to css-multicol-1/multicol-inherit-004.xht
+Importing css-multicol-1/multicol-inherit-4-ref.xht to css-multicol-1/multicol-inherit-4-ref.xht
+Importing css-multicol-1/multicol-list-item-001.xht to css-multicol-1/multicol-list-item-001.xht
+Importing css-multicol-1/multicol-list-item-001-ref.xht to css-multicol-1/multicol-list-item-001-ref.xht
+Importing css-multicol-1/multicol-margin-001.xht to css-multicol-1/multicol-margin-001.xht
+Importing reference/ref-filled-green-100px-square.xht to reference/ref-filled-green-100px-square.xht
+Importing css-multicol-1/multicol-margin-002.xht to css-multicol-1/multicol-margin-002.xht
+Importing css-multicol-1/multicol-margin-child-001.xht to css-multicol-1/multicol-margin-child-001.xht
+Importing css-multicol-1/multicol-margin-child-001-ref.xht to css-multicol-1/multicol-margin-child-001-ref.xht
+Importing css-multicol-1/multicol-nested-002.xht to css-multicol-1/multicol-nested-002.xht
+Importing css-multicol-1/multicol-nested-002-ref.xht to css-multicol-1/multicol-nested-002-ref.xht
+Importing css-multicol-1/multicol-nested-005.xht to css-multicol-1/multicol-nested-005.xht
+Importing css-multicol-1/multicol-nested-005-ref.xht to css-multicol-1/multicol-nested-005-ref.xht
+Importing css-multicol-1/multicol-nested-column-rule-001.xht to css-multicol-1/multicol-nested-column-rule-001.xht
+Importing css-multicol-1/multicol-nested-column-rule-001-ref.xht to css-multicol-1/multicol-nested-column-rule-001-ref.xht
+Importing css-multicol-1/multicol-nested-margin-001.xht to css-multicol-1/multicol-nested-margin-001.xht
+Importing css-multicol-1/multicol-nested-margin-001-ref.xht to css-multicol-1/multicol-nested-margin-001-ref.xht
+Importing css-multicol-1/multicol-nested-margin-002.xht to css-multicol-1/multicol-nested-margin-002.xht
+Importing css-multicol-1/multicol-nested-margin-002-ref.xht to css-multicol-1/multicol-nested-margin-002-ref.xht
+Importing css-multicol-1/multicol-nested-margin-003.xht to css-multicol-1/multicol-nested-margin-003.xht
+Importing css-multicol-1/multicol-nested-margin-003-ref.xht to css-multicol-1/multicol-nested-margin-003-ref.xht
+Importing css-multicol-1/multicol-nested-margin-004.xht to css-multicol-1/multicol-nested-margin-004.xht
+Importing css-multicol-1/multicol-nested-margin-004-ref.xht to css-multicol-1/multicol-nested-margin-004-ref.xht
+Importing css-multicol-1/multicol-nested-margin-005.xht to css-multicol-1/multicol-nested-margin-005.xht
+Importing css-multicol-1/multicol-overflow-000.xht to css-multicol-1/multicol-overflow-000.xht
+Importing css-multicol-1/multicol-overflow-000-ref.xht to css-multicol-1/multicol-overflow-000-ref.xht
+Importing css-multicol-1/multicol-overflowing-001.xht to css-multicol-1/multicol-overflowing-001.xht
+Importing css-multicol-1/multicol-overflowing-001-ref.xht to css-multicol-1/multicol-overflowing-001-ref.xht
+Importing css-multicol-1/multicol-red.png to css-multicol-1/multicol-red.png
+Importing css-multicol-1/multicol-reduce-000.xht to css-multicol-1/multicol-reduce-000.xht
+Importing css-multicol-1/multicol-reduce-000-ref.xht to css-multicol-1/multicol-reduce-000-ref.xht
+Importing css-multicol-1/multicol-rule-000.xht to css-multicol-1/multicol-rule-000.xht
+Importing css-multicol-1/multicol-rule-000-ref.xht to css-multicol-1/multicol-rule-000-ref.xht
+Importing css-multicol-1/multicol-rule-001.xht to css-multicol-1/multicol-rule-001.xht
+Importing css-multicol-1/multicol-rule-001-ref.xht to css-multicol-1/multicol-rule-001-ref.xht
+Importing css-multicol-1/multicol-rule-002.xht to css-multicol-1/multicol-rule-002.xht
+Importing css-multicol-1/multicol-rule-ref.xht to css-multicol-1/multicol-rule-ref.xht
+Importing css-multicol-1/multicol-rule-003.xht to css-multicol-1/multicol-rule-003.xht
+Importing css-multicol-1/multicol-rule-003-ref.xht to css-multicol-1/multicol-rule-003-ref.xht
+Importing css-multicol-1/multicol-rule-004.xht to css-multicol-1/multicol-rule-004.xht
+Importing css-multicol-1/multicol-rule-004-ref.xht to css-multicol-1/multicol-rule-004-ref.xht
+Importing css-multicol-1/multicol-rule-color-001.xht to css-multicol-1/multicol-rule-color-001.xht
+Importing css-multicol-1/multicol-rule-color-001-ref.xht to css-multicol-1/multicol-rule-color-001-ref.xht
+Importing css-multicol-1/multicol-rule-color-inherit-001.xht to css-multicol-1/multicol-rule-color-inherit-001.xht
+Importing css-multicol-1/multicol-rule-color-inherit-001-ref.xht to css-multicol-1/multicol-rule-color-inherit-001-ref.xht
+Importing css-multicol-1/multicol-rule-color-inherit-002.xht to css-multicol-1/multicol-rule-color-inherit-002.xht
+Importing css-multicol-1/multicol-rule-dashed-000.xht to css-multicol-1/multicol-rule-dashed-000.xht
+Importing css-multicol-1/multicol-rule-dashed-000-ref.xht to css-multicol-1/multicol-rule-dashed-000-ref.xht
+Importing css-multicol-1/multicol-rule-dotted-000.xht to css-multicol-1/multicol-rule-dotted-000.xht
+Importing css-multicol-1/multicol-rule-dotted-000-ref.xht to css-multicol-1/multicol-rule-dotted-000-ref.xht
+Importing css-multicol-1/multicol-rule-double-000.xht to css-multicol-1/multicol-rule-double-000.xht
+Importing css-multicol-1/multicol-rule-double-000-ref.xht to css-multicol-1/multicol-rule-double-000-ref.xht
+Importing css-multicol-1/multicol-rule-fraction-001.xht to css-multicol-1/multicol-rule-fraction-001.xht
+Importing css-multicol-1/multicol-rule-fraction-001-ref.xht to css-multicol-1/multicol-rule-fraction-001-ref.xht
+Importing css-multicol-1/multicol-rule-fraction-002.xht to css-multicol-1/multicol-rule-fraction-002.xht
+Importing css-multicol-1/multicol-rule-fraction-002-ref.xht to css-multicol-1/multicol-rule-fraction-002-ref.xht
+Importing css-multicol-1/multicol-rule-fraction-003.xht to css-multicol-1/multicol-rule-fraction-003.xht
+Importing css-multicol-1/multicol-rule-fraction-3-ref.xht to css-multicol-1/multicol-rule-fraction-3-ref.xht
+Importing css-multicol-1/multicol-rule-groove-000.xht to css-multicol-1/multicol-rule-groove-000.xht
+Importing css-multicol-1/multicol-rule-groove-000-ref.xht to css-multicol-1/multicol-rule-groove-000-ref.xht
+Importing css-multicol-1/multicol-rule-hidden-000.xht to css-multicol-1/multicol-rule-hidden-000.xht
+Importing css-multicol-1/multicol-rule-hidden-000-ref.xht to css-multicol-1/multicol-rule-hidden-000-ref.xht
+Importing css-multicol-1/multicol-rule-inset-000.xht to css-multicol-1/multicol-rule-inset-000.xht
+Importing css-multicol-1/multicol-rule-ridge-000-ref.xht to css-multicol-1/multicol-rule-ridge-000-ref.xht
+Importing css-multicol-1/multicol-rule-large-001.xht to css-multicol-1/multicol-rule-large-001.xht
+Importing css-multicol-1/multicol-rule-large-001-ref.xht to css-multicol-1/multicol-rule-large-001-ref.xht
+Importing css-multicol-1/multicol-rule-none-000.xht to css-multicol-1/multicol-rule-none-000.xht
+Importing css-multicol-1/multicol-rule-outset-000.xht to css-multicol-1/multicol-rule-outset-000.xht
+Importing css-multicol-1/multicol-rule-percent-001.xht to css-multicol-1/multicol-rule-percent-001.xht
+Importing css-multicol-1/multicol-rule-px-001.xht to css-multicol-1/multicol-rule-px-001.xht
+Importing css-multicol-1/multicol-rule-ridge-000.xht to css-multicol-1/multicol-rule-ridge-000.xht
+Importing css-multicol-1/multicol-rule-samelength-001.xht to css-multicol-1/multicol-rule-samelength-001.xht
+Importing css-multicol-1/multicol-rule-samelength-001-ref.xht to css-multicol-1/multicol-rule-samelength-001-ref.xht
+Importing css-multicol-1/multicol-rule-shorthand-001.xht to css-multicol-1/multicol-rule-shorthand-001.xht
+Warning: href attribute found empty in ../../../../csswg-test/css-multicol-1\multicol-rule-shorthand-2.xht
+Importing css-multicol-1/multicol-rule-solid-000.xht to css-multicol-1/multicol-rule-solid-000.xht
+Importing css-multicol-1/multicol-rule-solid-000-ref.xht to css-multicol-1/multicol-rule-solid-000-ref.xht
+Importing css-multicol-1/multicol-rule-stacking-001.xht to css-multicol-1/multicol-rule-stacking-001.xht
+Importing css-multicol-1/multicol-rule-stacking-ref.xht to css-multicol-1/multicol-rule-stacking-ref.xht
+Importing css-multicol-1/multicol-rule-style-groove-001.xht to css-multicol-1/multicol-rule-style-groove-001.xht
+Importing css-multicol-1/multicol-rule-style-groove-001-ref.xht to css-multicol-1/multicol-rule-style-groove-001-ref.xht
+Importing css-multicol-1/multicol-rule-style-inset-001.xht to css-multicol-1/multicol-rule-style-inset-001.xht
+Importing css-multicol-1/multicol-rule-style-ridge-001-ref.xht to css-multicol-1/multicol-rule-style-ridge-001-ref.xht
+Importing css-multicol-1/multicol-rule-style-outset-001.xht to css-multicol-1/multicol-rule-style-outset-001.xht
+Importing css-multicol-1/multicol-rule-style-ridge-001.xht to css-multicol-1/multicol-rule-style-ridge-001.xht
+Importing css-multicol-1/multicol-shorthand-001.xht to css-multicol-1/multicol-shorthand-001.xht
+Importing css-multicol-1/multicol-span-000.xht to css-multicol-1/multicol-span-000.xht
+Importing css-multicol-1/multicol-span-000-ref.xht to css-multicol-1/multicol-span-000-ref.xht
+Importing css-multicol-1/multicol-span-all-001.xht to css-multicol-1/multicol-span-all-001.xht
+Importing css-multicol-1/multicol-span-all-001-ref.xht to css-multicol-1/multicol-span-all-001-ref.xht
+Importing css-multicol-1/multicol-span-all-002.xht to css-multicol-1/multicol-span-all-002.xht
+Importing css-multicol-1/multicol-span-all-002-ref.xht to css-multicol-1/multicol-span-all-002-ref.xht
+Importing css-multicol-1/multicol-span-all-003.xht to css-multicol-1/multicol-span-all-003.xht
+Importing css-multicol-1/multicol-span-all-block-sibling-003.xht to css-multicol-1/multicol-span-all-block-sibling-003.xht
+Importing css-multicol-1/multicol-span-all-block-sibling-3-ref.xht to css-multicol-1/multicol-span-all-block-sibling-3-ref.xht
+Importing css-multicol-1/multicol-span-all-child-001.xht to css-multicol-1/multicol-span-all-child-001.xht
+Importing css-multicol-1/multicol-span-all-child-001-ref.xht to css-multicol-1/multicol-span-all-child-001-ref.xht
+Importing css-multicol-1/multicol-span-all-child-002.xht to css-multicol-1/multicol-span-all-child-002.xht
+Importing css-multicol-1/multicol-span-all-child-002-ref.xht to css-multicol-1/multicol-span-all-child-002-ref.xht
+Importing css-multicol-1/multicol-span-all-margin-001.xht to css-multicol-1/multicol-span-all-margin-001.xht
+Importing css-multicol-1/multicol-span-all-margin-001-ref.xht to css-multicol-1/multicol-span-all-margin-001-ref.xht
+Importing css-multicol-1/multicol-span-all-margin-002.xht to css-multicol-1/multicol-span-all-margin-002.xht
+Importing css-multicol-1/multicol-span-all-margin-002-ref.xht to css-multicol-1/multicol-span-all-margin-002-ref.xht
+Importing css-multicol-1/multicol-span-all-margin-bottom-001.xht to css-multicol-1/multicol-span-all-margin-bottom-001.xht
+Importing css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht to css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht
+Importing css-multicol-1/multicol-span-all-margin-nested-001.xht to css-multicol-1/multicol-span-all-margin-nested-001.xht
+Importing css-multicol-1/multicol-span-all-margin-nested-001-ref.xht to css-multicol-1/multicol-span-all-margin-nested-001-ref.xht
+Importing css-multicol-1/multicol-span-all-margin-nested-002.xht to css-multicol-1/multicol-span-all-margin-nested-002.xht
+Importing css-multicol-1/multicol-span-all-margin-nested-003.xht to css-multicol-1/multicol-span-all-margin-nested-003.xht
+Importing css-multicol-1/multicol-span-all-margin-nested-3-ref.xht to css-multicol-1/multicol-span-all-margin-nested-3-ref.xht
+Importing css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht to css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht
+Importing css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht to css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht
+Importing css-multicol-1/multicol-span-float-001.xht to css-multicol-1/multicol-span-float-001.xht
+Importing css-multicol-1/multicol-span-float-001-ref.xht to css-multicol-1/multicol-span-float-001-ref.xht
+Importing css-multicol-1/multicol-span-none-001.xht to css-multicol-1/multicol-span-none-001.xht
+Importing css-multicol-1/multicol-span-none-001-ref.xht to css-multicol-1/multicol-span-none-001-ref.xht
+Importing css-multicol-1/multicol-table-cell-001.xht to css-multicol-1/multicol-table-cell-001.xht
+Importing css-multicol-1/multicol-table-cell-001-ref.xht to css-multicol-1/multicol-table-cell-001-ref.xht
+Importing css-multicol-1/multicol-table-cell-height-001.xht to css-multicol-1/multicol-table-cell-height-001.xht
+Importing css-multicol-1/multicol-table-cell-height-001-ref.xht to css-multicol-1/multicol-table-cell-height-001-ref.xht
+Importing css-multicol-1/multicol-table-cell-height-002.xht to css-multicol-1/multicol-table-cell-height-002.xht
+Importing css-multicol-1/multicol-table-cell-vertical-align-001.xht to css-multicol-1/multicol-table-cell-vertical-align-001.xht
+Importing css-multicol-1/multicol-table-cell-vertical-align-ref.xht to css-multicol-1/multicol-table-cell-vertical-align-ref.xht
+Importing css-multicol-1/multicol-width-001.xht to css-multicol-1/multicol-width-001.xht
+Importing css-multicol-1/multicol-width-001-ref.xht to css-multicol-1/multicol-width-001-ref.xht
+Importing css-multicol-1/multicol-width-002.xht to css-multicol-1/multicol-width-002.xht
+Importing css-multicol-1/multicol-width-002-ref.xht to css-multicol-1/multicol-width-002-ref.xht
+Importing css-multicol-1/multicol-width-003.xht to css-multicol-1/multicol-width-003.xht
+Importing css-multicol-1/multicol-width-count-001.xht to css-multicol-1/multicol-width-count-001.xht
+Importing css-multicol-1/multicol-width-count-002.xht to css-multicol-1/multicol-width-count-002.xht
+Importing css-multicol-1/multicol-width-ems-001.xht to css-multicol-1/multicol-width-ems-001.xht
+Importing css-multicol-1/multicol-width-ems-ref.xht to css-multicol-1/multicol-width-ems-ref.xht
+Importing css-multicol-1/multicol-width-invalid-001.xht to css-multicol-1/multicol-width-invalid-001.xht
+Importing css-multicol-1/multicol-width-invalid-001-ref.xht to css-multicol-1/multicol-width-invalid-001-ref.xht
+Importing css-multicol-1/multicol-width-large-001.xht to css-multicol-1/multicol-width-large-001.xht
+Importing css-multicol-1/multicol-width-large-002.xht to css-multicol-1/multicol-width-large-002.xht
+Importing css-multicol-1/multicol-width-negative-001.xht to css-multicol-1/multicol-width-negative-001.xht
+Importing css-multicol-1/multicol-width-small-001.xht to css-multicol-1/multicol-width-small-001.xht
+Importing css-multicol-1/multicol-width-small-001-ref.xht to css-multicol-1/multicol-width-small-001-ref.xht
+Importing css-multicol-1/multicol-zero-height-001.xht to css-multicol-1/multicol-zero-height-001.xht
+Importing css-multicol-1/multicol-zero-height-001-ref.xht to css-multicol-1/multicol-zero-height-001-ref.xht
+Importing css-namespaces-3/prefix-001.xml to css-namespaces-3/prefix-001.xml
+Importing css-namespaces-3/support/fail.css to css-namespaces-3/support/fail.css
+Importing css-namespaces-3/support/scope-002a.css to css-namespaces-3/support/scope-002a.css
+Importing css-namespaces-3/support/scope-002b.css to css-namespaces-3/support/scope-002b.css
+Importing css-namespaces-3/support/syntax-007.css to css-namespaces-3/support/syntax-007.css
+Importing css-namespaces-3/reftest/ref-lime-1.xml to css-namespaces-3/reftest/ref-lime-1.xml
+Importing css-namespaces-3/prefix-002.xml to css-namespaces-3/prefix-002.xml
+Importing css-namespaces-3/prefix-003.xml to css-namespaces-3/prefix-003.xml
+Importing css-namespaces-3/reftest/ref-lime-1-generic.xml to css-namespaces-3/reftest/ref-lime-1-generic.xml
+Importing css-namespaces-3/prefix-004.xml to css-namespaces-3/prefix-004.xml
+Importing css-namespaces-3/reftest/ref-lime-2-generic.xml to css-namespaces-3/reftest/ref-lime-2-generic.xml
+Importing css-namespaces-3/prefix-005.xml to css-namespaces-3/prefix-005.xml
+Importing css-namespaces-3/prefix-006.xml to css-namespaces-3/prefix-006.xml
+Importing css-namespaces-3/reftest/ref-lime-2.xml to css-namespaces-3/reftest/ref-lime-2.xml
+Importing css-namespaces-3/scope-001.xml to css-namespaces-3/scope-001.xml
+Importing css-namespaces-3/scope-002.xml to css-namespaces-3/scope-002.xml
+Importing css-namespaces-3/syntax-001.xml to css-namespaces-3/syntax-001.xml
+Importing css-namespaces-3/reftest/ref-lime-1-block.xml to css-namespaces-3/reftest/ref-lime-1-block.xml
+Importing css-namespaces-3/syntax-002.xml to css-namespaces-3/syntax-002.xml
+Importing css-namespaces-3/syntax-003.xml to css-namespaces-3/syntax-003.xml
+Importing css-namespaces-3/reftest/ref-lime-5.xml to css-namespaces-3/reftest/ref-lime-5.xml
+Importing css-namespaces-3/syntax-004.xml to css-namespaces-3/syntax-004.xml
+Importing css-namespaces-3/syntax-005.xml to css-namespaces-3/syntax-005.xml
+Importing css-namespaces-3/syntax-006.xml to css-namespaces-3/syntax-006.xml
+Importing css-namespaces-3/syntax-007.xml to css-namespaces-3/syntax-007.xml
+Importing css-namespaces-3/syntax-008.xml to css-namespaces-3/syntax-008.xml
+Importing css-namespaces-3/syntax-009.xml to css-namespaces-3/syntax-009.xml
+Importing css-namespaces-3/syntax-010.xml to css-namespaces-3/syntax-010.xml
+Importing css-namespaces-3/reftest/ref-lime-3.xml to css-namespaces-3/reftest/ref-lime-3.xml
+Importing css-namespaces-3/syntax-011.xml to css-namespaces-3/syntax-011.xml
+Importing css-namespaces-3/reftest/ref-lime-6.xml to css-namespaces-3/reftest/ref-lime-6.xml
+Importing css-namespaces-3/syntax-012.xml to css-namespaces-3/syntax-012.xml
+Importing css-namespaces-3/syntax-013.xml to css-namespaces-3/syntax-013.xml
+Importing css-namespaces-3/syntax-014.xml to css-namespaces-3/syntax-014.xml
+Importing css-namespaces-3/syntax-015.xml to css-namespaces-3/syntax-015.xml
+Importing css-values-3/attr-color-invalid-cast.html to css-values-3/attr-color-invalid-cast.html
+Importing css-values-3/support/1x1-green.png to css-values-3/support/1x1-green.png
+Importing css-values-3/support/1x1-lime.png to css-values-3/support/1x1-lime.png
+Importing css-values-3/support/1x1-maroon.png to css-values-3/support/1x1-maroon.png
+Importing css-values-3/support/1x1-navy.png to css-values-3/support/1x1-navy.png
+Importing css-values-3/support/1x1-red.png to css-values-3/support/1x1-red.png
+Importing css-values-3/support/1x1-white.png to css-values-3/support/1x1-white.png
+Importing css-values-3/support/60x60-gg-rr.png to css-values-3/support/60x60-gg-rr.png
+Importing css-values-3/support/60x60-green.png to css-values-3/support/60x60-green.png
+Importing css-values-3/support/60x60-red.png to css-values-3/support/60x60-red.png
+Importing css-values-3/support/a-green.css to css-values-3/support/a-green.css
+Importing css-values-3/support/b-green.css to css-values-3/support/b-green.css
+Importing css-values-3/support/c-red.css to css-values-3/support/c-red.css
+Importing css-values-3/support/cat.png to css-values-3/support/cat.png
+Importing css-values-3/support/import-green.css to css-values-3/support/import-green.css
+Importing css-values-3/support/import-red.css to css-values-3/support/import-red.css
+Importing css-values-3/support/pattern-grg-rgr-grg.png to css-values-3/support/pattern-grg-rgr-grg.png
+Importing css-values-3/support/pattern-grg-rrg-rgg.png to css-values-3/support/pattern-grg-rrg-rgg.png
+Importing css-values-3/support/pattern-rgr-grg-rgr.png to css-values-3/support/pattern-rgr-grg-rgr.png
+Importing css-values-3/support/pattern-tr.png to css-values-3/support/pattern-tr.png
+Importing css-values-3/support/README to css-values-3/support/README
+Importing css-values-3/support/ruler-h-50%.png to css-values-3/support/ruler-h-50%.png
+Importing css-values-3/support/ruler-h-50px.png to css-values-3/support/ruler-h-50px.png
+Importing css-values-3/support/ruler-v-100px.png to css-values-3/support/ruler-v-100px.png
+Importing css-values-3/support/ruler-v-50px.png to css-values-3/support/ruler-v-50px.png
+Importing css-values-3/support/square-purple.png to css-values-3/support/square-purple.png
+Importing css-values-3/support/square-teal.png to css-values-3/support/square-teal.png
+Importing css-values-3/support/square-white.png to css-values-3/support/square-white.png
+Importing css-values-3/support/swatch-blue.png to css-values-3/support/swatch-blue.png
+Importing css-values-3/support/swatch-green.png to css-values-3/support/swatch-green.png
+Importing css-values-3/support/swatch-lime.png to css-values-3/support/swatch-lime.png
+Importing css-values-3/support/swatch-orange.png to css-values-3/support/swatch-orange.png
+Importing css-values-3/support/swatch-red.png to css-values-3/support/swatch-red.png
+Importing css-values-3/support/swatch-teal.png to css-values-3/support/swatch-teal.png
+Importing css-values-3/support/swatch-white.png to css-values-3/support/swatch-white.png
+Importing css-values-3/support/swatch-yellow.png to css-values-3/support/swatch-yellow.png
+Importing css-values-3/support/test-bl.png to css-values-3/support/test-bl.png
+Importing css-values-3/support/test-br.png to css-values-3/support/test-br.png
+Importing css-values-3/support/test-inner-half-size.png to css-values-3/support/test-inner-half-size.png
+Importing css-values-3/support/test-outer.png to css-values-3/support/test-outer.png
+Importing css-values-3/support/test-tl.png to css-values-3/support/test-tl.png
+Importing css-values-3/support/test-tr.png to css-values-3/support/test-tr.png
+Importing css-values-3/support/support/README to css-values-3/support/support/README
+Importing css-values-3/support/support/swatch-green.png to css-values-3/support/support/swatch-green.png
+Importing css-values-3/support/support/swatch-red.png to css-values-3/support/support/swatch-red.png
+Importing css-values-3/reference/200-200-green.html to css-values-3/reference/200-200-green.html
+Importing css-values-3/attr-color-invalid-fallback.html to css-values-3/attr-color-invalid-fallback.html
+Importing css-values-3/attr-color-valid.html to css-values-3/attr-color-valid.html
+Importing css-values-3/attr-invalid-type-001.html to css-values-3/attr-invalid-type-001.html
+Importing css-values-3/attr-invalid-type-002.html to css-values-3/attr-invalid-type-002.html
+Importing css-values-3/attr-invalid-type-003.html to css-values-3/attr-invalid-type-003.html
+Importing css-values-3/attr-length-invalid-cast.html to css-values-3/attr-length-invalid-cast.html
+Importing css-values-3/attr-length-invalid-fallback.html to css-values-3/attr-length-invalid-fallback.html
+Importing css-values-3/attr-length-valid-zero-nofallback.html to css-values-3/attr-length-valid-zero-nofallback.html
+Importing css-values-3/attr-length-valid-zero.html to css-values-3/attr-length-valid-zero.html
+Importing css-values-3/attr-length-valid.html to css-values-3/attr-length-valid.html
+Importing css-values-3/attr-px-invalid-cast.html to css-values-3/attr-px-invalid-cast.html
+Importing css-values-3/attr-px-invalid-fallback.html to css-values-3/attr-px-invalid-fallback.html
+Importing css-values-3/attr-px-valid.html to css-values-3/attr-px-valid.html
+Importing css-values-3/calc-in-calc.html to css-values-3/calc-in-calc.html
+Importing css-values-3/reference/all-green.html to css-values-3/reference/all-green.html
+Importing css-values-3/calc-in-media-queries-001.html to css-values-3/calc-in-media-queries-001.html
+Importing css-values-3/calc-in-media-queries-002.html to css-values-3/calc-in-media-queries-002.html
+Importing css-values-3/calc-invalid-range-clamping.html to css-values-3/calc-invalid-range-clamping.html
+Importing css-values-3/calc-parenthesis-stack.html to css-values-3/calc-parenthesis-stack.html
+Importing css-values-3/ch-unit-001.html to css-values-3/ch-unit-001.html
+Importing css-values-3/reference/ch-unit-001-ref.html to css-values-3/reference/ch-unit-001-ref.html
+Importing css-values-3/initial-background-color.html to css-values-3/initial-background-color.html
+Importing css-values-3/vh-calc-support-pct.html to css-values-3/vh-calc-support-pct.html
+Importing css-values-3/vh-calc-support.html to css-values-3/vh-calc-support.html
+Importing css-values-3/vh-em-inherit.html to css-values-3/vh-em-inherit.html
+Importing css-values-3/vh-inherit.html to css-values-3/vh-inherit.html
+Importing css-values-3/vh-interpolate-pct.html to css-values-3/vh-interpolate-pct.html
+Importing css-values-3/vh-interpolate-px.html to css-values-3/vh-interpolate-px.html
+Importing css-values-3/vh-interpolate-vh.html to css-values-3/vh-interpolate-vh.html
+Importing css-values-3/vh-support-atviewport.html to css-values-3/vh-support-atviewport.html
+Importing css-values-3/vh-support-margin.html to css-values-3/vh-support-margin.html
+Importing css-values-3/vh-support-transform-origin.html to css-values-3/vh-support-transform-origin.html
+Importing css-values-3/vh-support-transform-translate.html to css-values-3/vh-support-transform-translate.html
+Importing css-values-3/vh-support.html to css-values-3/vh-support.html
+Importing css-values-3/vh-zero-support.html to css-values-3/vh-zero-support.html
+Importing css-values-3/vh_not_refreshing_on_chrome.html to css-values-3/vh_not_refreshing_on_chrome.html
+Importing css-values-3/reference/vh_not_refreshing_on_chrome-ref.html to css-values-3/reference/vh_not_refreshing_on_chrome-ref.html
+Importing css-values-3/vh_not_refreshing_on_chrome_iframe.html to css-values-3/vh_not_refreshing_on_chrome_iframe.html
+Importing selectors-4/focus-within-001.html to selectors-4/focus-within-001.html
+Importing selectors-4/focus-within-001-ref.html to selectors-4/focus-within-001-ref.html
+Importing selectors-4/focus-within-002.html to selectors-4/focus-within-002.html
+Importing selectors-4/focus-within-003.html to selectors-4/focus-within-003.html
+Importing selectors-4/focus-within-004.html to selectors-4/focus-within-004.html
+Importing selectors-4/focus-within-005.html to selectors-4/focus-within-005.html
+Importing selectors-4/focus-within-006.html to selectors-4/focus-within-006.html
+Importing selectors-4/focus-within-shadow-001.html to selectors-4/focus-within-shadow-001.html
+Importing selectors-4/focus-within-shadow-001-ref.html to selectors-4/focus-within-shadow-001-ref.html
+Importing selectors-4/focus-within-shadow-002.html to selectors-4/focus-within-shadow-002.html
+Importing selectors-4/focus-within-shadow-003.html to selectors-4/focus-within-shadow-003.html
+Importing selectors-4/focus-within-shadow-004.html to selectors-4/focus-within-shadow-004.html
+Importing selectors-4/focus-within-shadow-005.html to selectors-4/focus-within-shadow-005.html
+Importing selectors-4/of-type-selectors.xhtml to selectors-4/of-type-selectors.xhtml
+Importing selectors-4/of-type-selectors-ref.xhtml to selectors-4/of-type-selectors-ref.xhtml
+Importing selectors-4/selector-required.html to selectors-4/selector-required.html
+Importing selectors-4/selector-required-ref.html to selectors-4/selector-required-ref.html
+Importing selectors-4/selectors-dir-selector-ltr-001.html to selectors-4/selectors-dir-selector-ltr-001.html
+Importing selectors-4/selectors-dir-selector-ref.html to selectors-4/selectors-dir-selector-ref.html
+Importing selectors-4/selectors-dir-selector-rtl-001.html to selectors-4/selectors-dir-selector-rtl-001.html
diff --git a/layout/reftests/w3c-css/received/reference/ref-filled-green-100px-square.xht b/layout/reftests/w3c-css/received/reference/ref-filled-green-100px-square.xht
new file mode 100644
index 000000000..05a137944
--- /dev/null
+++ b/layout/reftests/w3c-css/received/reference/ref-filled-green-100px-square.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <style type="text/css"><![CDATA[
+  div
+  {
+  background-color: green;
+  height: 100px;
+  width: 100px;
+  }
+  ]]></style>
+ </head>
+ <body>
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+  <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/reftest-stylo.list b/layout/reftests/w3c-css/received/reftest-stylo.list
new file mode 100644
index 000000000..3c80dab8f
--- /dev/null
+++ b/layout/reftests/w3c-css/received/reftest-stylo.list
@@ -0,0 +1,103 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# THIS FILE IS AUTOGENERATED BY import-tests.py
+# DO NOT EDIT!
+== css-conditional-3/at-media-whitespace-optional-001.html css-conditional-3/at-media-whitespace-optional-001.html
+== css-conditional-3/at-media-whitespace-optional-002.html css-conditional-3/at-media-whitespace-optional-002.html
+== css-conditional-3/at-supports-001.html css-conditional-3/at-supports-001.html
+== css-conditional-3/at-supports-002.html css-conditional-3/at-supports-002.html
+== css-conditional-3/at-supports-003.html css-conditional-3/at-supports-003.html
+== css-conditional-3/at-supports-004.html css-conditional-3/at-supports-004.html
+== css-conditional-3/at-supports-005.html css-conditional-3/at-supports-005.html
+== css-conditional-3/at-supports-006.html css-conditional-3/at-supports-006.html
+== css-conditional-3/at-supports-007.html css-conditional-3/at-supports-007.html
+== css-conditional-3/at-supports-008.html css-conditional-3/at-supports-008.html
+== css-conditional-3/at-supports-009.html css-conditional-3/at-supports-009.html
+== css-conditional-3/at-supports-010.html css-conditional-3/at-supports-010.html
+== css-conditional-3/at-supports-011.html css-conditional-3/at-supports-011.html
+== css-conditional-3/at-supports-012.html css-conditional-3/at-supports-012.html
+== css-conditional-3/at-supports-013.html css-conditional-3/at-supports-013.html
+== css-conditional-3/at-supports-014.html css-conditional-3/at-supports-014.html
+== css-conditional-3/at-supports-015.html css-conditional-3/at-supports-015.html
+== css-conditional-3/at-supports-016.html css-conditional-3/at-supports-016.html
+== css-conditional-3/at-supports-017.html css-conditional-3/at-supports-017.html
+== css-conditional-3/at-supports-018.html css-conditional-3/at-supports-018.html
+== css-conditional-3/at-supports-019.html css-conditional-3/at-supports-019.html
+== css-conditional-3/at-supports-020.html css-conditional-3/at-supports-020.html
+== css-conditional-3/at-supports-021.html css-conditional-3/at-supports-021.html
+== css-conditional-3/at-supports-022.html css-conditional-3/at-supports-022.html
+== css-conditional-3/at-supports-023.html css-conditional-3/at-supports-023.html
+== css-conditional-3/at-supports-024.html css-conditional-3/at-supports-024.html
+== css-conditional-3/at-supports-025.html css-conditional-3/at-supports-025.html
+== css-conditional-3/at-supports-026.html css-conditional-3/at-supports-026.html
+== css-conditional-3/at-supports-027.html css-conditional-3/at-supports-027.html
+== css-conditional-3/at-supports-028.html css-conditional-3/at-supports-028.html
+== css-conditional-3/at-supports-029.html css-conditional-3/at-supports-029.html
+== css-conditional-3/at-supports-030.html css-conditional-3/at-supports-030.html
+== css-conditional-3/at-supports-031.html css-conditional-3/at-supports-031.html
+== css-conditional-3/at-supports-032.html css-conditional-3/at-supports-032.html
+== css-conditional-3/at-supports-033.html css-conditional-3/at-supports-033.html
+== css-conditional-3/at-supports-034.html css-conditional-3/at-supports-034.html
+== css-conditional-3/at-supports-035.html css-conditional-3/at-supports-035.html
+== css-conditional-3/at-supports-036.html css-conditional-3/at-supports-036.html
+== css-conditional-3/at-supports-037.html css-conditional-3/at-supports-037.html
+== css-conditional-3/at-supports-038.html css-conditional-3/at-supports-038.html
+== css-conditional-3/at-supports-039.html css-conditional-3/at-supports-039.html
+== css-namespaces-3/prefix-001.xml css-namespaces-3/prefix-001.xml
+== css-namespaces-3/prefix-002.xml css-namespaces-3/prefix-002.xml
+== css-namespaces-3/prefix-003.xml css-namespaces-3/prefix-003.xml
+== css-namespaces-3/prefix-004.xml css-namespaces-3/prefix-004.xml
+== css-namespaces-3/prefix-005.xml css-namespaces-3/prefix-005.xml
+== css-namespaces-3/prefix-006.xml css-namespaces-3/prefix-006.xml
+== css-namespaces-3/scope-001.xml css-namespaces-3/scope-001.xml
+== css-namespaces-3/scope-002.xml css-namespaces-3/scope-002.xml
+== css-namespaces-3/syntax-001.xml css-namespaces-3/syntax-001.xml
+== css-namespaces-3/syntax-002.xml css-namespaces-3/syntax-002.xml
+== css-namespaces-3/syntax-003.xml css-namespaces-3/syntax-003.xml
+== css-namespaces-3/syntax-004.xml css-namespaces-3/syntax-004.xml
+== css-namespaces-3/syntax-005.xml css-namespaces-3/syntax-005.xml
+== css-namespaces-3/syntax-006.xml css-namespaces-3/syntax-006.xml
+== css-namespaces-3/syntax-007.xml css-namespaces-3/syntax-007.xml
+== css-namespaces-3/syntax-008.xml css-namespaces-3/syntax-008.xml
+== css-namespaces-3/syntax-009.xml css-namespaces-3/syntax-009.xml
+== css-namespaces-3/syntax-010.xml css-namespaces-3/syntax-010.xml
+== css-namespaces-3/syntax-011.xml css-namespaces-3/syntax-011.xml
+== css-namespaces-3/syntax-012.xml css-namespaces-3/syntax-012.xml
+== css-namespaces-3/syntax-013.xml css-namespaces-3/syntax-013.xml
+== css-namespaces-3/syntax-014.xml css-namespaces-3/syntax-014.xml
+== css-namespaces-3/syntax-015.xml css-namespaces-3/syntax-015.xml
+== css-values-3/attr-color-invalid-cast.html css-values-3/attr-color-invalid-cast.html
+== css-values-3/attr-color-invalid-fallback.html css-values-3/attr-color-invalid-fallback.html
+== css-values-3/attr-color-valid.html css-values-3/attr-color-valid.html
+== css-values-3/attr-invalid-type-001.html css-values-3/attr-invalid-type-001.html
+== css-values-3/attr-invalid-type-002.html css-values-3/attr-invalid-type-002.html
+== css-values-3/attr-invalid-type-003.html css-values-3/attr-invalid-type-003.html
+== css-values-3/attr-length-invalid-cast.html css-values-3/attr-length-invalid-cast.html
+== css-values-3/attr-length-invalid-fallback.html css-values-3/attr-length-invalid-fallback.html
+== css-values-3/attr-length-valid-zero-nofallback.html css-values-3/attr-length-valid-zero-nofallback.html
+== css-values-3/attr-length-valid-zero.html css-values-3/attr-length-valid-zero.html
+== css-values-3/attr-length-valid.html css-values-3/attr-length-valid.html
+== css-values-3/attr-px-invalid-cast.html css-values-3/attr-px-invalid-cast.html
+== css-values-3/attr-px-invalid-fallback.html css-values-3/attr-px-invalid-fallback.html
+== css-values-3/attr-px-valid.html css-values-3/attr-px-valid.html
+== css-values-3/calc-in-calc.html css-values-3/calc-in-calc.html
+skip == css-values-3/calc-in-media-queries-001.html css-values-3/calc-in-media-queries-001.html
+skip == css-values-3/calc-in-media-queries-002.html css-values-3/calc-in-media-queries-002.html
+== css-values-3/calc-invalid-range-clamping.html css-values-3/calc-invalid-range-clamping.html
+== css-values-3/calc-parenthesis-stack.html css-values-3/calc-parenthesis-stack.html
+fuzzy-if(OSX,40,6) == css-values-3/ch-unit-001.html css-values-3/ch-unit-001.html
+== css-values-3/initial-background-color.html css-values-3/initial-background-color.html
+== css-values-3/vh-calc-support-pct.html css-values-3/vh-calc-support-pct.html
+== css-values-3/vh-calc-support.html css-values-3/vh-calc-support.html
+== css-values-3/vh-em-inherit.html css-values-3/vh-em-inherit.html
+== css-values-3/vh-inherit.html css-values-3/vh-inherit.html
+== css-values-3/vh-interpolate-pct.html css-values-3/vh-interpolate-pct.html
+== css-values-3/vh-interpolate-px.html css-values-3/vh-interpolate-px.html
+== css-values-3/vh-interpolate-vh.html css-values-3/vh-interpolate-vh.html
+== css-values-3/vh-support-atviewport.html css-values-3/vh-support-atviewport.html
+== css-values-3/vh-support-margin.html css-values-3/vh-support-margin.html
+skip == css-values-3/vh-support-transform-origin.html css-values-3/vh-support-transform-origin.html
+skip == css-values-3/vh-support-transform-translate.html css-values-3/vh-support-transform-translate.html
+== css-values-3/vh-support.html css-values-3/vh-support.html
+== css-values-3/vh-zero-support.html css-values-3/vh-zero-support.html
+skip == css-values-3/vh_not_refreshing_on_chrome.html css-values-3/vh_not_refreshing_on_chrome.html
+skip == css-values-3/vh_not_refreshing_on_chrome_iframe.html css-values-3/vh_not_refreshing_on_chrome_iframe.html
diff --git a/layout/reftests/w3c-css/received/reftest.list b/layout/reftests/w3c-css/received/reftest.list
new file mode 100644
index 000000000..494ab4d12
--- /dev/null
+++ b/layout/reftests/w3c-css/received/reftest.list
@@ -0,0 +1,257 @@
+# THIS FILE IS AUTOGENERATED BY import-tests.py
+# DO NOT EDIT!
+== css-conditional-3/at-media-whitespace-optional-001.html css-conditional-3/reference/background-lime.html
+== css-conditional-3/at-media-whitespace-optional-002.html css-conditional-3/reference/background-lime.html
+== css-conditional-3/at-supports-001.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-002.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-003.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-004.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-005.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-006.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-007.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-008.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-009.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-010.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-011.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-012.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-013.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-014.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-015.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-016.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-017.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-018.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-019.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-020.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-021.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-022.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-023.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-024.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-025.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-026.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-027.html css-conditional-3/at-supports-027-ref.html
+== css-conditional-3/at-supports-028.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-029.html css-conditional-3/at-supports-027-ref.html
+== css-conditional-3/at-supports-030.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-031.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-032.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-033.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-034.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-035.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-036.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-037.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-038.html css-conditional-3/at-supports-001-ref.html
+== css-conditional-3/at-supports-039.html css-conditional-3/at-supports-001-ref.html
+HTTP(../../..) == css-multicol-1/multicol-basic-001.html css-multicol-1/reference/multicol-basic-ref.html
+HTTP(../../..) == css-multicol-1/multicol-basic-002.html css-multicol-1/reference/multicol-basic-ref.html
+HTTP(../../..) == css-multicol-1/multicol-basic-003.html css-multicol-1/reference/multicol-basic-ref.html
+HTTP(../../..) == css-multicol-1/multicol-basic-004.html css-multicol-1/reference/multicol-basic-ref.html
+fails HTTP(../../..) == css-multicol-1/multicol-block-clip-001.xht css-multicol-1/multicol-block-clip-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-block-clip-002.xht css-multicol-1/multicol-block-clip-002-ref.xht
+fails == css-multicol-1/multicol-br-inside-avoidcolumn-001.xht css-multicol-1/multicol-br-inside-avoidcolumn-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-break-000.xht css-multicol-1/multicol-break-000-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-break-001.xht css-multicol-1/multicol-break-001-ref.xht
+fuzzy(135,1008) HTTP(../../..) == css-multicol-1/multicol-clip-001.xht css-multicol-1/multicol-clip-001-ref.xht
+fuzzy(135,702) HTTP(../../..) == css-multicol-1/multicol-clip-002.xht css-multicol-1/multicol-clip-002-ref.xht
+fuzzy(135,467) HTTP(../../..) == css-multicol-1/multicol-collapsing-001.xht css-multicol-1/multicol-collapsing-001-ref.xht
+fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-001.xht css-multicol-1/multicol-columns-001-ref.xht
+fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-002.xht css-multicol-1/multicol-columns-001-ref.xht
+fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-003.xht css-multicol-1/multicol-columns-001-ref.xht
+fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-004.xht css-multicol-1/multicol-columns-001-ref.xht
+fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-005.xht css-multicol-1/multicol-columns-001-ref.xht
+fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-006.xht css-multicol-1/multicol-columns-001-ref.xht
+fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-columns-007.xht css-multicol-1/multicol-columns-001-ref.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-columns-invalid-001.xht css-multicol-1/multicol-columns-invalid-001-ref.xht
+fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-columns-invalid-002.xht css-multicol-1/multicol-columns-invalid-001-ref.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-columns-toolong-001.xht css-multicol-1/multicol-columns-invalid-001-ref.xht
+fuzzy(135,530) HTTP(../../..) == css-multicol-1/multicol-containing-001.xht css-multicol-1/multicol-containing-001-ref.xht
+fuzzy(215,241) HTTP(../../..) == css-multicol-1/multicol-containing-002.xht css-multicol-1/multicol-containing-002-ref.xht
+fuzzy(87,180) HTTP(../../..) == css-multicol-1/multicol-count-001.xht css-multicol-1/multicol-columns-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-count-002.xht css-multicol-1/multicol-count-002-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-count-computed-001.xht css-multicol-1/multicol-count-computed-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-count-computed-002.xht css-multicol-1/multicol-count-computed-2-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-count-computed-003.xht css-multicol-1/multicol-count-computed-003-ref.xht
+fuzzy-if(winWidget||OSX||gtkWidget,112,861) fails-if(Android) HTTP(../../..) == css-multicol-1/multicol-count-computed-004.xht css-multicol-1/multicol-count-computed-004-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-count-computed-005.xht css-multicol-1/multicol-count-computed-003-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-count-large-001.xht css-multicol-1/multicol-count-large-ref.xht
+fuzzy(255,132) HTTP(../../..) == css-multicol-1/multicol-count-large-002.xht css-multicol-1/multicol-count-large-2-ref.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-count-negative-001.xht css-multicol-1/multicol-columns-invalid-001-ref.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-count-negative-002.xht css-multicol-1/multicol-columns-invalid-001-ref.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-count-non-integer-001.xht css-multicol-1/multicol-columns-invalid-001-ref.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-count-non-integer-002.xht css-multicol-1/multicol-columns-invalid-001-ref.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-count-non-integer-003.xht css-multicol-1/multicol-columns-invalid-001-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-fill-000.xht css-multicol-1/multicol-fill-000-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-fill-001.xht css-multicol-1/multicol-fill-001-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-fill-auto-001.xht css-multicol-1/multicol-fill-auto-001-ref.xht
+fuzzy(135,80) HTTP(../../..) == css-multicol-1/multicol-fill-auto-002.xht css-multicol-1/multicol-fill-auto-002-ref.xht
+fuzzy(135,3270) HTTP(../../..) == css-multicol-1/multicol-fill-auto-003.xht css-multicol-1/multicol-fill-auto-003-ref.xht
+fails == css-multicol-1/multicol-fill-auto-block-children-001.xht css-multicol-1/multicol-fill-auto-block-children-ref.xht
+fails == css-multicol-1/multicol-fill-auto-block-children-002.xht css-multicol-1/multicol-fill-auto-block-children-002-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-fill-auto.xht css-multicol-1/multicol-fill-ref.xht
+fuzzy(135,80) HTTP(../../..) == css-multicol-1/multicol-fill-balance-001.xht css-multicol-1/multicol-fill-balance-001-ref.xht
+fuzzy(135,821) HTTP(../../..) == css-multicol-1/multicol-gap-000.xht css-multicol-1/multicol-gap-000-ref.xht
+fuzzy(255,290) HTTP(../../..) == css-multicol-1/multicol-gap-001.xht css-multicol-1/multicol-gap-001-ref.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-gap-002.xht css-multicol-1/multicol-gap-002-ref.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-gap-003.xht css-multicol-1/multicol-gap-002-ref.xht
+fuzzy(107,1823) HTTP(../../..) == css-multicol-1/multicol-gap-fraction-001.xht css-multicol-1/multicol-gap-fraction-001-ref.xht
+fuzzy-if(winWidget||OSX||gtkWidget,204,1048) fuzzy-if(skiaContent,208,1048) fails-if(Android) HTTP(../../..) == css-multicol-1/multicol-gap-large-001.xht css-multicol-1/multicol-gap-large-001-ref.xht
+fuzzy(225,920) HTTP(../../..) == css-multicol-1/multicol-gap-large-002.xht css-multicol-1/multicol-gap-large-002-ref.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-gap-negative-001.xht css-multicol-1/multicol-gap-002-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-height-001.xht css-multicol-1/multicol-height-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-height-block-child-001.xht css-multicol-1/multicol-height-block-child-001-ref.xht
+fuzzy(255,3762) HTTP(../../..) == css-multicol-1/multicol-inherit-001.xht css-multicol-1/multicol-inherit-001-ref.xht
+fuzzy(135,1893) HTTP(../../..) == css-multicol-1/multicol-inherit-002.xht css-multicol-1/multicol-inherit-002-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-inherit-003.xht css-multicol-1/multicol-inherit-3-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-inherit-004.xht css-multicol-1/multicol-inherit-4-ref.xht
+fuzzy(96,264) HTTP(../../..) == css-multicol-1/multicol-list-item-001.xht css-multicol-1/multicol-list-item-001-ref.xht
+fuzzy(73,1200) HTTP(../../..) == css-multicol-1/multicol-margin-001.xht reference/ref-filled-green-100px-square.xht
+fuzzy(73,1200) HTTP(../../..) == css-multicol-1/multicol-margin-002.xht reference/ref-filled-green-100px-square.xht
+fuzzy(243,3322) fuzzy-if(skiaContent,244,3322) HTTP(../../..) == css-multicol-1/multicol-margin-child-001.xht css-multicol-1/multicol-margin-child-001-ref.xht
+fuzzy(255,4008) HTTP(../../..) == css-multicol-1/multicol-nested-002.xht css-multicol-1/multicol-nested-002-ref.xht
+fuzzy(255,4109) HTTP(../../..) == css-multicol-1/multicol-nested-005.xht css-multicol-1/multicol-nested-005-ref.xht
+fuzzy(225,13600) HTTP(../../..) == css-multicol-1/multicol-nested-column-rule-001.xht css-multicol-1/multicol-nested-column-rule-001-ref.xht
+fuzzy(204,2463) fuzzy-if(skiaContent,208,2463) HTTP(../../..) == css-multicol-1/multicol-nested-margin-001.xht css-multicol-1/multicol-nested-margin-001-ref.xht
+fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-nested-margin-002.xht css-multicol-1/multicol-nested-margin-002-ref.xht
+fuzzy(204,2371) fuzzy-if(skiaContent,208,2371) HTTP(../../..) == css-multicol-1/multicol-nested-margin-003.xht css-multicol-1/multicol-nested-margin-003-ref.xht
+fuzzy(225,2529) HTTP(../../..) == css-multicol-1/multicol-nested-margin-004.xht css-multicol-1/multicol-nested-margin-004-ref.xht
+fuzzy(225,2529) HTTP(../../..) == css-multicol-1/multicol-nested-margin-005.xht css-multicol-1/multicol-nested-margin-004-ref.xht
+fuzzy(135,142) HTTP(../../..) == css-multicol-1/multicol-overflow-000.xht css-multicol-1/multicol-overflow-000-ref.xht
+fuzzy(204,1844) fuzzy-if(skiaContent,208,1844) HTTP(../../..) == css-multicol-1/multicol-overflowing-001.xht css-multicol-1/multicol-overflowing-001-ref.xht
+fuzzy-if(OSX,61,2) fuzzy-if(skiaContent,64,2) HTTP(../../..) == css-multicol-1/multicol-reduce-000.xht css-multicol-1/multicol-reduce-000-ref.xht
+fuzzy-if(OSX,8,20) HTTP(../../..) == css-multicol-1/multicol-rule-000.xht css-multicol-1/multicol-rule-000-ref.xht
+fuzzy(135,1584) HTTP(../../..) == css-multicol-1/multicol-rule-001.xht css-multicol-1/multicol-rule-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-rule-002.xht css-multicol-1/multicol-rule-ref.xht
+fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-rule-003.xht css-multicol-1/multicol-rule-003-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-rule-004.xht css-multicol-1/multicol-rule-004-ref.xht
+fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-rule-color-001.xht css-multicol-1/multicol-rule-color-001-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-rule-color-inherit-001.xht css-multicol-1/multicol-rule-color-inherit-001-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-rule-color-inherit-002.xht css-multicol-1/multicol-rule-color-inherit-001-ref.xht
+fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-dashed-000.xht css-multicol-1/multicol-rule-dashed-000-ref.xht
+fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-dotted-000.xht css-multicol-1/multicol-rule-dotted-000-ref.xht
+fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-double-000.xht css-multicol-1/multicol-rule-double-000-ref.xht
+fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-rule-fraction-001.xht css-multicol-1/multicol-rule-fraction-001-ref.xht
+fails-if(OSX||winWidget) HTTP(../../..) == css-multicol-1/multicol-rule-fraction-002.xht css-multicol-1/multicol-rule-fraction-002-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-rule-fraction-003.xht css-multicol-1/multicol-rule-fraction-3-ref.xht
+fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-groove-000.xht css-multicol-1/multicol-rule-groove-000-ref.xht
+fuzzy(94,256) HTTP(../../..) == css-multicol-1/multicol-rule-hidden-000.xht css-multicol-1/multicol-rule-hidden-000-ref.xht
+fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-inset-000.xht css-multicol-1/multicol-rule-ridge-000-ref.xht
+fuzzy(255,2808) HTTP(../../..) == css-multicol-1/multicol-rule-large-001.xht css-multicol-1/multicol-rule-large-001-ref.xht
+fuzzy(94,256) HTTP(../../..) == css-multicol-1/multicol-rule-none-000.xht css-multicol-1/multicol-rule-hidden-000-ref.xht
+fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-outset-000.xht css-multicol-1/multicol-rule-groove-000-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-rule-percent-001.xht css-multicol-1/multicol-containing-002-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-rule-px-001.xht css-multicol-1/multicol-rule-ref.xht
+fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-ridge-000.xht css-multicol-1/multicol-rule-ridge-000-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-rule-samelength-001.xht css-multicol-1/multicol-rule-samelength-001-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-rule-shorthand-001.xht css-multicol-1/multicol-rule-samelength-001-ref.xht
+fuzzy(106,354) HTTP(../../..) == css-multicol-1/multicol-rule-solid-000.xht css-multicol-1/multicol-rule-solid-000-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-rule-stacking-001.xht css-multicol-1/multicol-rule-stacking-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-rule-style-groove-001.xht css-multicol-1/multicol-rule-style-groove-001-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-rule-style-inset-001.xht css-multicol-1/multicol-rule-style-ridge-001-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-rule-style-outset-001.xht css-multicol-1/multicol-rule-style-groove-001-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-rule-style-ridge-001.xht css-multicol-1/multicol-rule-style-ridge-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-shorthand-001.xht css-multicol-1/multicol-rule-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-000.xht css-multicol-1/multicol-span-000-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-001.xht css-multicol-1/multicol-span-all-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-002.xht css-multicol-1/multicol-span-all-002-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-003.xht css-multicol-1/multicol-count-002-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-block-sibling-003.xht css-multicol-1/multicol-span-all-block-sibling-3-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-child-001.xht css-multicol-1/multicol-span-all-child-001-ref.xht
+fails-if(OSX||winWidget) == css-multicol-1/multicol-span-all-child-002.xht css-multicol-1/multicol-span-all-child-002-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-001.xht css-multicol-1/multicol-span-all-margin-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-002.xht css-multicol-1/multicol-span-all-margin-002-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-bottom-001.xht css-multicol-1/multicol-span-all-margin-bottom-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-nested-001.xht css-multicol-1/multicol-span-all-margin-nested-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-nested-002.xht css-multicol-1/multicol-span-all-margin-nested-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-nested-003.xht css-multicol-1/multicol-span-all-margin-nested-3-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-all-margin-nested-firstchild-001.xht css-multicol-1/multicol-span-all-margin-nested-firstchild-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-float-001.xht css-multicol-1/multicol-span-float-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-span-none-001.xht css-multicol-1/multicol-span-none-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-table-cell-001.xht css-multicol-1/multicol-table-cell-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-table-cell-height-001.xht css-multicol-1/multicol-table-cell-height-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-table-cell-height-002.xht css-multicol-1/multicol-table-cell-height-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-table-cell-vertical-align-001.xht css-multicol-1/multicol-table-cell-vertical-align-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-width-001.xht css-multicol-1/multicol-width-001-ref.xht
+fuzzy(204,930) fuzzy-if(skiaContent,208,930) HTTP(../../..) == css-multicol-1/multicol-width-002.xht css-multicol-1/multicol-width-002-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-width-003.xht css-multicol-1/multicol-width-002-ref.xht
+HTTP(../../..) == css-multicol-1/multicol-width-count-001.xht css-multicol-1/multicol-width-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-width-count-002.xht css-multicol-1/multicol-count-002-ref.xht
+fails == css-multicol-1/multicol-width-ems-001.xht css-multicol-1/multicol-width-ems-ref.xht
+fuzzy(225,1060) HTTP(../../..) == css-multicol-1/multicol-width-invalid-001.xht css-multicol-1/multicol-width-invalid-001-ref.xht
+fuzzy(225,1060) HTTP(../../..) == css-multicol-1/multicol-width-large-001.xht css-multicol-1/multicol-width-invalid-001-ref.xht
+fuzzy(225,1060) HTTP(../../..) == css-multicol-1/multicol-width-large-002.xht css-multicol-1/multicol-width-invalid-001-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-width-negative-001.xht css-multicol-1/multicol-count-002-ref.xht
+fails HTTP(../../..) == css-multicol-1/multicol-width-small-001.xht css-multicol-1/multicol-width-small-001-ref.xht
+fails == css-multicol-1/multicol-zero-height-001.xht css-multicol-1/multicol-zero-height-001-ref.xht
+== css-namespaces-3/prefix-001.xml css-namespaces-3/reftest/ref-lime-1.xml
+== css-namespaces-3/prefix-002.xml css-namespaces-3/reftest/ref-lime-1.xml
+== css-namespaces-3/prefix-003.xml css-namespaces-3/reftest/ref-lime-1-generic.xml
+== css-namespaces-3/prefix-004.xml css-namespaces-3/reftest/ref-lime-2-generic.xml
+== css-namespaces-3/prefix-005.xml css-namespaces-3/reftest/ref-lime-2-generic.xml
+== css-namespaces-3/prefix-006.xml css-namespaces-3/reftest/ref-lime-2.xml
+== css-namespaces-3/scope-001.xml css-namespaces-3/reftest/ref-lime-1.xml
+== css-namespaces-3/scope-002.xml css-namespaces-3/reftest/ref-lime-1.xml
+== css-namespaces-3/syntax-001.xml css-namespaces-3/reftest/ref-lime-1-block.xml
+== css-namespaces-3/syntax-002.xml css-namespaces-3/reftest/ref-lime-1-block.xml
+== css-namespaces-3/syntax-003.xml css-namespaces-3/reftest/ref-lime-5.xml
+== css-namespaces-3/syntax-004.xml css-namespaces-3/reftest/ref-lime-1.xml
+== css-namespaces-3/syntax-005.xml css-namespaces-3/reftest/ref-lime-5.xml
+== css-namespaces-3/syntax-006.xml css-namespaces-3/reftest/ref-lime-1.xml
+== css-namespaces-3/syntax-007.xml css-namespaces-3/reftest/ref-lime-1.xml
+== css-namespaces-3/syntax-008.xml css-namespaces-3/reftest/ref-lime-2.xml
+== css-namespaces-3/syntax-009.xml css-namespaces-3/reftest/ref-lime-1.xml
+== css-namespaces-3/syntax-010.xml css-namespaces-3/reftest/ref-lime-3.xml
+== css-namespaces-3/syntax-011.xml css-namespaces-3/reftest/ref-lime-6.xml
+== css-namespaces-3/syntax-012.xml css-namespaces-3/reftest/ref-lime-3.xml
+== css-namespaces-3/syntax-013.xml css-namespaces-3/reftest/ref-lime-5.xml
+== css-namespaces-3/syntax-014.xml css-namespaces-3/reftest/ref-lime-3.xml
+== css-namespaces-3/syntax-015.xml css-namespaces-3/reftest/ref-lime-1.xml
+fails == css-values-3/attr-color-invalid-cast.html css-values-3/reference/200-200-green.html
+== css-values-3/attr-color-invalid-fallback.html css-values-3/reference/200-200-green.html
+fails == css-values-3/attr-color-valid.html css-values-3/reference/200-200-green.html
+== css-values-3/attr-invalid-type-001.html css-values-3/reference/200-200-green.html
+== css-values-3/attr-invalid-type-002.html css-values-3/reference/200-200-green.html
+== css-values-3/attr-invalid-type-003.html css-values-3/reference/200-200-green.html
+fails == css-values-3/attr-length-invalid-cast.html css-values-3/reference/200-200-green.html
+== css-values-3/attr-length-invalid-fallback.html css-values-3/reference/200-200-green.html
+fails == css-values-3/attr-length-valid-zero-nofallback.html css-values-3/reference/200-200-green.html
+fails == css-values-3/attr-length-valid-zero.html css-values-3/reference/200-200-green.html
+fails == css-values-3/attr-length-valid.html css-values-3/reference/200-200-green.html
+fails == css-values-3/attr-px-invalid-cast.html css-values-3/reference/200-200-green.html
+== css-values-3/attr-px-invalid-fallback.html css-values-3/reference/200-200-green.html
+fails == css-values-3/attr-px-valid.html css-values-3/reference/200-200-green.html
+== css-values-3/calc-in-calc.html css-values-3/reference/all-green.html
+fails == css-values-3/calc-in-media-queries-001.html css-values-3/reference/all-green.html
+fails == css-values-3/calc-in-media-queries-002.html css-values-3/reference/all-green.html
+== css-values-3/calc-invalid-range-clamping.html css-values-3/reference/200-200-green.html
+== css-values-3/calc-parenthesis-stack.html css-values-3/reference/all-green.html
+fuzzy-if(OSX,40,6) == css-values-3/ch-unit-001.html css-values-3/reference/ch-unit-001-ref.html
+== css-values-3/initial-background-color.html css-values-3/reference/all-green.html
+== css-values-3/vh-calc-support-pct.html css-values-3/reference/all-green.html
+== css-values-3/vh-calc-support.html css-values-3/reference/all-green.html
+== css-values-3/vh-em-inherit.html css-values-3/reference/all-green.html
+== css-values-3/vh-inherit.html css-values-3/reference/all-green.html
+== css-values-3/vh-interpolate-pct.html css-values-3/reference/all-green.html
+== css-values-3/vh-interpolate-px.html css-values-3/reference/all-green.html
+== css-values-3/vh-interpolate-vh.html css-values-3/reference/all-green.html
+== css-values-3/vh-support-atviewport.html css-values-3/reference/all-green.html
+== css-values-3/vh-support-margin.html css-values-3/reference/all-green.html
+skip == css-values-3/vh-support-transform-origin.html css-values-3/reference/all-green.html
+skip == css-values-3/vh-support-transform-translate.html css-values-3/reference/all-green.html
+== css-values-3/vh-support.html css-values-3/reference/all-green.html
+== css-values-3/vh-zero-support.html css-values-3/reference/all-green.html
+skip == css-values-3/vh_not_refreshing_on_chrome.html css-values-3/reference/vh_not_refreshing_on_chrome-ref.html
+skip == css-values-3/vh_not_refreshing_on_chrome_iframe.html css-values-3/reference/vh_not_refreshing_on_chrome-ref.html
+needs-focus == selectors-4/focus-within-001.html selectors-4/focus-within-001-ref.html
+needs-focus == selectors-4/focus-within-002.html selectors-4/focus-within-001-ref.html
+needs-focus == selectors-4/focus-within-003.html selectors-4/focus-within-001-ref.html
+needs-focus == selectors-4/focus-within-004.html selectors-4/focus-within-001-ref.html
+needs-focus == selectors-4/focus-within-005.html selectors-4/focus-within-001-ref.html
+needs-focus fuzzy-if(/^Windows\x20NT\x205\.1/.test(http.oscpu),1,2) == selectors-4/focus-within-006.html selectors-4/focus-within-001-ref.html
+fails needs-focus == selectors-4/focus-within-shadow-001.html selectors-4/focus-within-shadow-001-ref.html
+pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-002.html selectors-4/focus-within-shadow-001-ref.html
+pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-003.html selectors-4/focus-within-shadow-001-ref.html
+pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-004.html selectors-4/focus-within-shadow-001-ref.html
+pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-005.html selectors-4/focus-within-shadow-001-ref.html
+== selectors-4/of-type-selectors.xhtml selectors-4/of-type-selectors-ref.xhtml
+== selectors-4/selector-required.html selectors-4/selector-required-ref.html
+== selectors-4/selectors-dir-selector-ltr-001.html selectors-4/selectors-dir-selector-ref.html
+== selectors-4/selectors-dir-selector-rtl-001.html selectors-4/selectors-dir-selector-ref.html
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html
new file mode 100644
index 000000000..9d76c0674
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within Reference File</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<style>
+div {
+  border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused, it is surrounded by a thick green border. There must be no red or blue once it is focused.</p>
+<div>Focus this element</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html
new file mode 100644
index 000000000..15de67cef
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<meta name="assert" content="Test that :focus-within applies to an element with tabindex when :focus applies.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  outline: none;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+   This element needs to be focused for the test to make sense. */
+div {
+border: solid 15px blue;
+}
+div:focus {
+border-color: red;
+}
+div:focus-within {
+border-color: green;
+}
+</style>
+<p>Test passes if, when the element below is focused, it is surrounded by a thick green border. There must be no red or blue once it is focused.</p>
+<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div>
+<script>
+/* This script is an optional convenience,
+   simply removing the need to manually focus the element.
+   The test is valid even if the script is not run. */
+var focusme = document.getElementById('focusme');
+focusme.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html
new file mode 100644
index 000000000..b59dc25b5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<meta name="assert" content="Test that :focus-within applies to the parent of an element with tabindex where :focus applies.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  outline: none;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+   This element needs to be focused for the test to make sense. */
+#focusme:not(:focus) {
+  border: solid 15px blue;
+}
+
+#target:focus-within {
+  border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div id="target">
+  <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div>
+</div>
+<script>
+/* This script is an optional convenience,
+   simply removing the need to manually focus the element.
+   The test is valid even if the script is not run. */
+var focusme = document.getElementById('focusme');
+focusme.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html
new file mode 100644
index 000000000..4c87dc627
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<meta name="assert" content="Test that :focus-within applies to ancestors of an element with tabindex where :focus applies.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  outline: none;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+   This element needs to be focused for the test to make sense. */
+#focusme:not(:focus) {
+  border: solid 15px blue;
+}
+
+#target:focus-within {
+  border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div id="target">
+  <div>
+    <div>
+      <div>
+        <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+/* This script is an optional convenience,
+   simply removing the need to manually focus the element.
+   The test is valid even if the script is not run. */
+var focusme = document.getElementById('focusme');
+focusme.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html
new file mode 100644
index 000000000..f0d3765a9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<meta name="assert" content="Test that :focus-within works on elements that are focusable due to contenteditable.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  outline: none;
+
+  /* Make the caret invisible
+     since it matches the color of the text, which is transparent,
+     while keeping the text readable thanks to its shadow.
+     Not using the caret-color property as it is too new to be relied on. */
+  color: transparent; text-shadow: black 0px 0px 0px;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+   This element needs to be focused for the test to make sense. */
+#focusme:not(:focus) {
+  border: solid 15px blue;
+}
+
+:focus {
+  border: solid 5px red;
+}
+div:focus-within, #focusme:focus-within {
+  border: solid 5px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>
+  <div>
+    <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" contentEditable="true">Focus this element</div>
+  </div>
+</div>
+<script>
+/* This script is an optional convenience,
+   simply removing the need to manually focus the element.
+   The test is valid even if the script is not run. */
+var editor = document.getElementById('focusme');
+editor.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html
new file mode 100644
index 000000000..5a173fd72
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<meta name="assert" content="Test that :focus-within works on links.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  outline: none;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+   This element needs to be focused for the test to make sense. */
+#focusme:not(:focus) {
+  border: solid 15px blue;
+}
+
+/* Make the link look like the div in the reference file */
+#focusme {
+	display: block;
+	text-decoration: none;
+	color: currentColor;
+}
+
+:focus {
+  border: solid 5px red;
+}
+div:focus-within, #focusme:focus-within {
+  border: solid 5px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>
+  <div>
+    <a id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" href="">Focus this element</a>
+  </div>
+</div>
+<script>
+/* This script is an optional convenience,
+   simply removing the need to manually focus the element.
+   The test is valid even if the script is not run. */
+var editor = document.getElementById('focusme');
+editor.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html
new file mode 100644
index 000000000..04e6cbcb9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<meta name="assert" content="Test that :focus-within works on form controls, using an input element.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  all: initial;
+  outline: none;
+
+  /* Make the caret invisible
+     since it matches the color of the text, which is transparent,
+     while keeping the text readable thanks to its shadow.
+     Not using the caret-color property as it is too new to be relied on. */
+  color: transparent; text-shadow: black 0px 0px 0px;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+   This element needs to be focused for the test to make sense. */
+#focusme:not(:focus) {
+  border: solid 15px blue;
+}
+
+#focusme:focus:not(:focus-within) {
+  background: red;
+}
+div:focus-within {
+  border: solid 5px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>
+  <div>
+    <div>
+      <input id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" value="Focus this element">
+    <div>
+  </div>
+</div>
+<script>
+/* This script is an optional convenience,
+   simply removing the need to manually focus the element.
+   The test is valid even if the script is not run. */
+var editor = document.getElementById('focusme');
+editor.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html
new file mode 100644
index 000000000..4631ef3e3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within shadow DOM Reference File</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<style>
+div {
+  border: solid 15px green;
+}
+</style>
+<p>Test passes if there is a green rectangle below.</p>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html
new file mode 100644
index 000000000..e4610dacf
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="flags" content="interact dom">
+<meta name="assert" content="Test that :focus-within applies to a focused element inside the shadow DOM.">
+<body>
+<p>Test passes if there is a green rectangle below.</p>
+<div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div>
+
+<template id="shadow-template">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  outline: none;
+}
+
+div:focus-within {
+  border: solid 15px green;
+}
+</style>
+<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').createShadowRoot();
+var template = document.getElementById('shadow-template');
+var instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+window.setTimeout(function() {
+var focusme = shadow.getElementById('focusme');
+focusme.focus();
+}, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html
new file mode 100644
index 000000000..b02a3f9a1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="flags" content="interact dom">
+<meta name="assert" content="Test that :focus-within applies to a shadow host containing a focused element.">
+<style>
+div:focus-within {
+  border: solid 15px green;
+}
+</style>
+<body>
+<p>Test passes if there is a green rectangle below.</p>
+<div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div>
+
+<template id="shadow-template">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  outline: none;
+}
+</style>
+<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').createShadowRoot();
+var template = document.getElementById('shadow-template');
+var instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+window.setTimeout(function() {
+var focusme = shadow.getElementById('focusme');
+focusme.focus();
+}, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html
new file mode 100644
index 000000000..588719424
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="flags" content="interact dom">
+<meta name="assert" content="Test that :focus-within applies to the parent of a shadow host containing a focused element.">
+<style>
+#target:focus-within {
+  border: solid 15px green;
+}
+</style>
+<body>
+<p>Test passes if there is a green rectangle below.</p>
+<div id="target">
+  <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div>
+</div>
+
+<template id="shadow-template">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  outline: none;
+}
+</style>
+<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').createShadowRoot();
+var template = document.getElementById('shadow-template');
+var instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+window.setTimeout(function() {
+var focusme = shadow.getElementById('focusme');
+focusme.focus();
+}, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html
new file mode 100644
index 000000000..8348adc35
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="flags" content="interact dom">
+<meta name="assert" content="Test that :focus-within applies to an ancestor of a shadow host containing a focused element.">
+<style>
+#target:focus-within {
+  border: solid 15px green;
+}
+</style>
+<body>
+<p>Test passes if there is a green rectangle below.</p>
+<div id="target">
+  <div>
+    <div>
+      <div>
+        <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<template id="shadow-template">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  outline: none;
+}
+</style>
+<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').createShadowRoot();
+var template = document.getElementById('shadow-template');
+var instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+window.setTimeout(function() {
+var focusme = shadow.getElementById('focusme');
+focusme.focus();
+}, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html
new file mode 100644
index 000000000..6c486fa48
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="flags" content="interact dom">
+<meta name="assert" content="Test that :focus-within propagates through nested shadow DOMs containing a focused element.">
+<style>
+#target:focus-within {
+  border: solid 15px green;
+}
+</style>
+<body>
+<p>Test passes if there is a green rectangle below.</p>
+<div id="target">
+  <div>
+    <div>
+      <div>
+        <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<template id="shadow-template">
+<div id="nested-shadow-host"><strong>Skip this test, nested shadow hosts are not supported.</strong></div>
+</template>
+
+<template id="nested-shadow-template">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+  outline: none;
+}
+</style>
+<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').createShadowRoot();
+var template = document.getElementById('shadow-template');
+var instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+
+window.setTimeout(function() {
+shadow = shadow.getElementById('nested-shadow-host').createShadowRoot();
+template = document.getElementById('nested-shadow-template');
+instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+}, 0);
+
+window.setTimeout(function() {
+var focusme = shadow.getElementById('focusme');
+focusme.focus();
+}, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml
new file mode 100644
index 000000000..af883c97e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Selectors Level 4: :first-of-type</title>
+<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/>
+<style type="text/css">
+div > *|* {
+  display: block;
+  color: black;
+  border: thin solid;
+  margin: 1em;
+}
+.yellow {
+  background: yellow;
+}
+.green {
+  background: lime;
+}
+</style>
+</head>
+<body>
+<div>
+<p class="green">This line should have a green background.</p>
+<p class="yellow">This line should have a yellow background.</p>
+<p class="yellow">This line should have a yellow background.</p>
+<p class="green">This line should have a green background.</p>
+<p class="green">This line should have a green background.</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml
new file mode 100644
index 000000000..18fead9b1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml">
+<head>
+<title>Selectors Level 4: :first-of-type</title>
+<meta name="flags" content="namespace nonHTML"/>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
+<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/>
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-first-of-type-pseudo"/>
+<link rel="match" href="of-type-selectors-ref.xhtml"/>
+<style type="text/css">
+div > *|* {
+  display: block;
+  color: black;
+  background: yellow;
+  border: thin solid;
+  margin: 1em;
+}
+div > *|*:first-of-type {
+  background: lime;
+}
+</style>
+</head>
+<body>
+<div>
+<p>This line should have a green background.</p>
+<p>This line should have a yellow background.</p>
+<html:p>This line should have a yellow background.</html:p>
+<p xmlns="http://www.example.com/ns">This line should have a green background.</p>
+<p xmlns="">This line should have a green background.</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html b/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html
new file mode 100644
index 000000000..038a8a9b6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>CSS level4 Selector :required and :optional</title>
+		<link rel="author" title="LEE YUN HEE" href="mailto:zzirasi@gmail.com">
+
+		<style>
+			input {border:3px solid green;}
+		</style>
+	</head>
+	<body>
+		<p>
+			You should see a green input box.
+		</p>
+        <p>
+        	<input>
+        </p>
+        <p>
+        	<input>
+        </p>
+	</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/selector-required.html b/layout/reftests/w3c-css/received/selectors-4/selector-required.html
new file mode 100644
index 000000000..9c0899ad2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/selector-required.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>CSS level4 Selector :required and :optional</title>
+		<link rel="author" title="LEE YUN HEE" href="mailto:zzirasi@gmail.com">
+		<link rel="help" href="http://www.w3.org/TR/selectors4/#opt-pseudos">
+		<meta name="assert" content="You should see a green input box.">
+        <link rel="match" href="selector-required-ref.html">
+		<style>
+			input {border:3px solid red;}
+			:required {border-color:green;}
+			:optional {border-color:green;}
+		</style>
+	</head>
+	<body>
+		<p>
+			You should see a green input box.
+		</p>
+        <p>
+        	<input required>
+        </p>
+        <p>
+        	<input optional>
+        </p>
+    </body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html
new file mode 100644
index 000000000..c11f42f62
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Selectors Level 4 Test: basic support for dir(ltr)</title>
+    <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo">
+    <link rel="match" href="selectors-dir-selector-ref.html">
+    <meta name="flags" content="">
+    <meta name="assert" content="The :dir(ltr) pseudo-class matches an element that has a directionality of (ltr). Since the div element has dir=ltr, the selector matches.">
+    <style type="text/css">
+       div {
+           width: 100px;
+           height: 100px;
+           background-color: red;
+       }
+
+       div:dir(ltr) {
+           background-color: green;
+       }
+    </style>
+</head>
+<body>
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <div dir="ltr"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html
new file mode 100644
index 000000000..7b297d036
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference for CSS Selectors Level 4 :dir() Tests</title>
+    <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
+    <meta name="flags" content="">
+    <style type="text/css">
+       div {
+           width: 100px;
+           height: 100px;
+           background-color: green;
+       }
+    </style>
+</head>
+<body>
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html
new file mode 100644
index 000000000..df2c63494
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Selectors Level 4 Test: basic support for dir(rtl)</title>
+    <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo">
+    <link rel="match" href="selectors-dir-selector-ref.html">
+    <meta name="flags" content="">
+    <meta name="assert" content="The :dir(rtl) pseudo-class matches an elment that has a directionality of right-to-left (rtl). Since the div element has dir=rtl, the selector matches.">
+    <style type="text/css">
+       div {
+           width: 100px;
+           height: 100px;
+           background-color: red;
+       }
+
+       div:dir(rtl) {
+           background-color: green;
+       }
+    </style>
+</head>
+<body>
+    <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+    <div dir="rtl"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/README b/layout/reftests/w3c-css/submitted/README
new file mode 100644
index 000000000..ec0c0a6a2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/README
@@ -0,0 +1,69 @@
+W3C CSS Test Suite Submission Directory
+---------------------------------------
+
+Put tests here that are to be submitted to the official W3C CSS test
+suites at http://test.csswg.org/. This directory will be sync'ed
+automatically with the contributors/mozilla/ directory in the CSSWG
+repository. The master copy is Mozilla's; make edits here, not there.
+
+Tests submitted here must conform to the CSSWG test format:
+  http://wiki.csswg.org/test/format
+The extra metadata is there to connect tests to their respective specs
+and to help reviewers and people trying to debug their implementations
+understand and analyze the tests. (These are not write-only regression
+tests.)
+
+TEST FILENAMES MUST BE GLOBALLY UNIQUE across the entire CSSWG test repo,
+so don't rely on directory names as context.
+
+The W3C format uses <link> tags for connecting reftests to their
+references and generates reftest.list from a build process. Until we
+set up a build process here, you need to link up the reftest both ways.
+
+Because W3C sometimes needs to allow multiple correct renderings for
+a particular case, a test linked to a reference must match ANY of them,
+not all of them. To require a test to match all references, chain the
+references to each other. If (a discrete number of) multiple renderings
+are conformant, make a reftest comparison for each of them, and mark
+all but the one we support as 'fails' in the reftest.list.
+
+You can copy the test-template-001.xht and references/test-template-001.xht
+files in this directory as a starting point
+
+Submitted tests are tracked in Shepherd: http://test.csswg.org/shepherd/
+
+Some things cannot be reftested; if another format is necessary to test
+a particular feature, contact public-css-testsuite@w3.org and/or ask
+the layout peers for help.
+
+Legal Stuff
+-----------
+
+The following license grant applies to contributions to this directory
+(unless copyright is owned by a W3C Member, in which case the Membership
+agreement applies):
+
+  The Contributor hereby grants to the W3C, a perpetual, non-exclusive,
+  royalty-free, world-wide right and license under any Contributor
+  copyrights in this contribution to copy, publish, use, and modify the
+  contribution and to distribute the contribution under a BSD License or one
+  with more restrictive terms, as well as a right and license of the same
+  scope to any derivative works prepared by the W3C and based on, or
+  incorporating all or part of the contribution. The Contributor further
+  agrees that any derivative works of this contribution prepared by the W3C
+  shall be solely owned by the W3C.
+
+  The Contributor states, to the best of her/his knowledge, that she/he,
+  or the company she/he represents, has all rights necessary to contribute
+  the Materials.
+
+  W3C will retain attribution of initial authorship to the Contributor. The
+  W3C makes no a-priori commitment to support or distribute contributions.
+
+  THE CONTRIBUTION IS PROVIDED AS IS, AND CONTRIBUTORS MAKE NO REPRESENTATIONS OR
+  WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, WARRANTIES OF
+  MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, OR TITLE;
+  THAT THE CONTENTS OF THE DOCUMENT ARE SUITABLE FOR ANY PURPOSE. CONTRIBUTORS
+  MAKE NO REPRESENTATIONS, EXPRESS OR IMPLIED, THAT THE CONTRIBUTION OR THE USE
+  THEREOF INDICATES CONFORMANCE TO A SPECIFICATION; CONTRIBUTIONS ARE PROVIDED
+  ONLY TO HELP REACHING INTEROPERABILITY.
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html
new file mode 100644
index 000000000..f96f07c38
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html
new file mode 100644
index 000000000..3e1819193
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html
new file mode 100644
index 000000000..93a027b09
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html
new file mode 100644
index 000000000..ad3437473
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html
new file mode 100644
index 000000000..383d181c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html
new file mode 100644
index 000000000..4ed94d087
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse wrap;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html
new file mode 100644
index 000000000..3702330bc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html
new file mode 100644
index 000000000..d859af211
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html
new file mode 100644
index 000000000..d2d5a99a8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html
new file mode 100644
index 000000000..ec491ffe8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-005-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html
new file mode 100644
index 000000000..880f25836
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html
new file mode 100644
index 000000000..1ce890a99
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-006-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html
new file mode 100644
index 000000000..aaac464cd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-top: 4px; }
+    .small > .container > * { margin-top: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html
new file mode 100644
index 000000000..9964af698
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-007-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse wrap;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html
new file mode 100644
index 000000000..14166e151
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-top: 4px; }
+    .small > .container > * { margin-top: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html
new file mode 100644
index 000000000..2a8fa4b7c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-008-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html
new file mode 100644
index 000000000..383d181c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html
new file mode 100644
index 000000000..f45b5371a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-rtl-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html
new file mode 100644
index 000000000..c1f117e2b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html
new file mode 100644
index 000000000..755db6cec
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-rtl-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html
new file mode 100644
index 000000000..f952c8daa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html
new file mode 100644
index 000000000..5fa7f7722
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-vertWM-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html
new file mode 100644
index 000000000..492924567
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html
new file mode 100644
index 000000000..254403282
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-vertWM-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html
new file mode 100644
index 000000000..e85089fc9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.html
new file mode 100644
index 000000000..ea05c96b0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html
new file mode 100644
index 000000000..c6398ca52
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.html
new file mode 100644
index 000000000..a45c61d31
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html
new file mode 100644
index 000000000..6d08814e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.html
new file mode 100644
index 000000000..5af8077ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html
new file mode 100644
index 000000000..7065861dc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.html
new file mode 100644
index 000000000..6f00b15fd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html
new file mode 100644
index 000000000..08501e841
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.html
new file mode 100644
index 000000000..c5d1f5b61
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-005-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html
new file mode 100644
index 000000000..8ad129114
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.html
new file mode 100644
index 000000000..ee1979608
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-006-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html
new file mode 100644
index 000000000..25609fc3c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-top: 4px; }
+    .small > .container > * { margin-top: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.html
new file mode 100644
index 000000000..b7b1d8a9d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-007-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html
new file mode 100644
index 000000000..3feea0b31
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-top: 4px; }
+    .small > .container > * { margin-top: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.html
new file mode 100644
index 000000000..b1fdc9220
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-008-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html
new file mode 100644
index 000000000..4e395aa66
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.html
new file mode 100644
index 000000000..6c8bc5c78
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html
new file mode 100644
index 000000000..4e395aa66
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002.html
new file mode 100644
index 000000000..99e171a0f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos LTR children in a RTL row flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-ref.html
new file mode 100644
index 000000000..b773df598
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003.html
new file mode 100644
index 000000000..3bac61b68
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-ref.html
new file mode 100644
index 000000000..3fb584268
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004.html
new file mode 100644
index 000000000..5588bee71
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos LTR children in a RTL column flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001-ref.html
new file mode 100644
index 000000000..e9b697062
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.html
new file mode 100644
index 000000000..e2fe739a0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002-ref.html
new file mode 100644
index 000000000..4459c1a03
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002-ref.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002.html
new file mode 100644
index 000000000..03f1a1291
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl row flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html
new file mode 100644
index 000000000..9cd5fb6e8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003.html
new file mode 100644
index 000000000..a54c7d5f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html
new file mode 100644
index 000000000..7787fba08
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004.html
new file mode 100644
index 000000000..c0ccc9bb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos vertical-lr + RTL children in a vertical-rl column flex container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: vertical-lr;
+      direction: rtl;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001-ref.html
new file mode 100644
index 000000000..24935ee0a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container"><div class="alignEnd"><!--space-between--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-around--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container"><div class="alignEnd"><!--space-between--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-around--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001.html
new file mode 100644
index 000000000..e1de7af3b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values with explicit fallback values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-fallback-align-content-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container" style="align-content: space-between flex-end"><div></div></div>
+    <div class="container" style="align-content: space-around flex-end"><div></div></div>
+    <div class="container" style="align-content: space-evenly flex-end"><div></div></div>
+    <div class="container" style="align-content: stretch flex-end"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container" style="align-content: space-between flex-end"><div></div></div>
+    <div class="container" style="align-content: space-around flex-end"><div></div></div>
+    <div class="container" style="align-content: space-evenly flex-end"><div></div></div>
+    <div class="container" style="align-content: stretch flex-end"><div></div></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001-ref.html
new file mode 100644
index 000000000..21185bcb2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container"><div class="alignEnd"><!--space-between--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-around--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container"><div class="alignEnd"><!--space-between--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-around--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001.html
new file mode 100644
index 000000000..d90dc7597
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values with explicit fallback values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-fallback-justify-content-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container" style="justify-content: space-between flex-end"><div></div></div>
+    <div class="container" style="justify-content: space-around flex-end"><div></div></div>
+    <div class="container" style="justify-content: space-evenly flex-end"><div></div></div>
+    <div class="container" style="justify-content: stretch flex-end"><div></div></div>
+    <!-- Note: specifically for flex containers, in the justify-content axis,
+         "stretch behaves as flex-start (ignoring the specified fallback
+         alignment, if any." https://drafts.csswg.org/css-align-3/#distribution-flex -->
+    <br>
+  </div>
+  <div class="small">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container" style="justify-content: space-between flex-end"><div></div></div>
+    <div class="container" style="justify-content: space-around flex-end"><div></div></div>
+    <div class="container" style="justify-content: space-evenly flex-end"><div></div></div>
+    <div class="container" style="justify-content: stretch flex-end"><div></div></div>
+    <!-- As noted above, the explicit fallback for "stretch" is ignored here. -->
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001-ref.html
new file mode 100644
index 000000000..fc450981e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001.html
new file mode 100644
index 000000000..1d571360a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002-ref.html
new file mode 100644
index 000000000..fc450981e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002.html
new file mode 100644
index 000000000..09073d4fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003-ref.html
new file mode 100644
index 000000000..d49626975
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003.html
new file mode 100644
index 000000000..f2801ebdd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse wrap;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004-ref.html
new file mode 100644
index 000000000..d49626975
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004.html
new file mode 100644
index 000000000..0f8d330ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005-ref.html
new file mode 100644
index 000000000..807f16124
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005.html
new file mode 100644
index 000000000..729ca9732
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-005-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006-ref.html
new file mode 100644
index 000000000..807f16124
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006.html
new file mode 100644
index 000000000..83da7de4f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-006-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007-ref.html
new file mode 100644
index 000000000..04979dfa7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007.html
new file mode 100644
index 000000000..ad97ac3ce
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-007-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse wrap;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008-ref.html
new file mode 100644
index 000000000..04979dfa7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008.html
new file mode 100644
index 000000000..d6a4074e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-008-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse wrap-reverse;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001-ref.html
new file mode 100644
index 000000000..2ccb6b157
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001.html
new file mode 100644
index 000000000..94df40c0e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-rtl-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002-ref.html
new file mode 100644
index 000000000..4cf947164
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002.html
new file mode 100644
index 000000000..f85c7d051
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-rtl-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001-ref.html
new file mode 100644
index 000000000..dc9b6da9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001.html
new file mode 100644
index 000000000..db4b5b691
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-vertWM-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002-ref.html
new file mode 100644
index 000000000..d4fd90e35
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002.html
new file mode 100644
index 000000000..1eb456d6e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-vertWM-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001-ref.html
new file mode 100644
index 000000000..d4f75a036
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001-ref.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001.html
new file mode 100644
index 000000000..90f328e3a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "justify-self" values (which shouldn't have any effect) </title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-flex">
+  <link rel="match" href="flex-abspos-staticpos-justify-self-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001-ref.html
new file mode 100644
index 000000000..428aeae64
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 10px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 14px;
+      width: 20px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001.html
new file mode 100644
index 000000000..7a42e0def
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various margins applied</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-margin-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 10px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 14px;
+      width: 20px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin-top: auto"></div></div>
+    <div class="container"><div style="margin-right: auto"></div></div>
+    <div class="container"><div style="margin-bottom: auto"></div></div>
+    <div class="container"><div style="margin-left: auto"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: auto"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin-top: auto"></div></div>
+    <div class="container"><div style="margin-right: auto"></div></div>
+    <div class="container"><div style="margin-bottom: auto"></div></div>
+    <div class="container"><div style="margin-left: auto"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: auto"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002-ref.html
new file mode 100644
index 000000000..38cfdff07
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 10px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 14px;
+      width: 20px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin: 3px 0 0 12px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 9px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 0 0 10px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin: 3px 0 0 -4px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -7px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 0 0 -6px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002.html
new file mode 100644
index 000000000..51b70d691
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various margins applied, and "justify-content: flex-end"</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-margin-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      justify-content: flex-end;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 10px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 14px;
+      width: 20px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin-top: auto"></div></div>
+    <div class="container"><div style="margin-right: auto"></div></div>
+    <div class="container"><div style="margin-bottom: auto"></div></div>
+    <div class="container"><div style="margin-left: auto"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: auto"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin-top: auto"></div></div>
+    <div class="container"><div style="margin-right: auto"></div></div>
+    <div class="container"><div style="margin-bottom: auto"></div></div>
+    <div class="container"><div style="margin-left: auto"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: auto"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001-ref.html
new file mode 100644
index 000000000..e519f2d7a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001-ref.html
@@ -0,0 +1,100 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+      margin-left: 3px;
+    }
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001.html
new file mode 100644
index 000000000..02b7a136a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html
new file mode 100644
index 000000000..eaa1c712d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html
@@ -0,0 +1,98 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 32px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 13px; }
+    .big   .alignEnd    { margin-top: 26px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -1px; }
+    .small .alignEnd    { margin-top: -2px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002.html
new file mode 100644
index 000000000..32f90939b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001-ref.html
new file mode 100644
index 000000000..a14d63068
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001-ref.html
@@ -0,0 +1,127 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 40px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      margin-left: 3px;
+      display: block;
+    }
+    .big   .alignStart  { margin-top:   2px; }
+    .big   .alignCenter { margin-top:   9px; }
+    .big   .alignEnd    { margin-top:  16px; }
+    .small .alignStart  { margin-top:   0px; }
+    .small .alignCenter { margin-top:  -7px; }
+    .small .alignEnd    { margin-top: -14px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--right--></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--right--></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001.html
new file mode 100644
index 000000000..fa4a56d40
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos replaced children in a grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-img-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 40px;
+      width: 22px;
+      grid: 2px 30px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: baseline"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: right"></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: baseline"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: right"></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html
new file mode 100644
index 000000000..cba35db99
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html
@@ -0,0 +1,125 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 42px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      display: block;
+    }
+    .big   .alignStart  { margin-top:   0px; }
+    .big   .alignCenter { margin-top:  13px; }
+    .big   .alignEnd    { margin-top:  26px; }
+    .small .alignStart  { margin-top:   0px; }
+    .small .alignCenter { margin-top:  -6px; }
+    .small .alignEnd    { margin-top: -12px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--right--></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--right--></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002.html
new file mode 100644
index 000000000..5fca4c308
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos replaced children in a static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-img-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 40px;
+      width: 22px;
+      grid: 2px 30px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: baseline"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: right"></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: baseline"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: right"></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001-ref.html
new file mode 100644
index 000000000..671b315a1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001-ref.html
@@ -0,0 +1,102 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001.html
new file mode 100644
index 000000000..1e7a125d9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a RTL grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002-ref.html
new file mode 100644
index 000000000..671b315a1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002-ref.html
@@ -0,0 +1,102 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002.html
new file mode 100644
index 000000000..7274c116f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos LTR children in a RTL grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html
new file mode 100644
index 000000000..dc3d2bc46
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html
@@ -0,0 +1,101 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 32px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 18px; }
+    .small > .container > * { margin-left:  0px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 13px; }
+    .big   .alignEnd    { margin-top: 26px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -1px; }
+    .small .alignEnd    { margin-top: -2px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003.html
new file mode 100644
index 000000000..f8539f8b9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html
new file mode 100644
index 000000000..dc3d2bc46
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html
@@ -0,0 +1,101 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 32px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 18px; }
+    .small > .container > * { margin-left:  0px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 13px; }
+    .big   .alignEnd    { margin-top: 26px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -1px; }
+    .small .alignEnd    { margin-top: -2px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004.html
new file mode 100644
index 000000000..b891d5415
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001-ref.html
new file mode 100644
index 000000000..37575f03e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001-ref.html
@@ -0,0 +1,101 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001.html
new file mode 100644
index 000000000..273abb150
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a vertical-rl grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002-ref.html
new file mode 100644
index 000000000..ce217e7ff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002-ref.html
@@ -0,0 +1,101 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002.html
new file mode 100644
index 000000000..2156f4bbf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html
new file mode 100644
index 000000000..8877789be
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html
@@ -0,0 +1,99 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 32px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 26px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -2px; }
+    .small .alignCenter { margin-left: -1px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003.html
new file mode 100644
index 000000000..b727d3b37
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html
new file mode 100644
index 000000000..54d6d46f8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html
@@ -0,0 +1,99 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 32px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 26px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -2px; }
+    .small .alignCenter { margin-left: -1px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004.html
new file mode 100644
index 000000000..f350ef8ce
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos horizontal-tb children in a static-pos vertical-rl grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <div class="container"><div style="align-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001-ref.html
new file mode 100644
index 000000000..6d197e490
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001-ref.html
@@ -0,0 +1,101 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left:  2px; }
+    .big   .alignCenter { margin-left:  9px; }
+    .big   .alignEnd    { margin-left: 16px; }
+    .small .alignStart  { margin-left:  0px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001.html
new file mode 100644
index 000000000..99cfcbb9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      justify-items: center; /* To exercise 'justify-self: auto' on children */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html
new file mode 100644
index 000000000..741a795f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html
@@ -0,0 +1,99 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 32px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left:  0px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left: 26px; }
+    .small .alignStart  { margin-left:  0px; }
+    .small .alignCenter { margin-left: -1px; }
+    .small .alignEnd    { margin-left: -2px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002.html
new file mode 100644
index 000000000..b82d308af
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      justify-items: center; /* To exercise 'justify-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001-ref.html
new file mode 100644
index 000000000..78d621219
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001-ref.html
@@ -0,0 +1,127 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 40px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      margin-top: 3px;
+      display: block;
+    }
+    .big   .alignStart  { margin-left:  2px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left: 24px; }
+    .small .alignStart  { margin-left:  0px; }
+    .small .alignCenter { margin-left: -3px; }
+    .small .alignEnd    { margin-left: -6px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--right--></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--right--></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001.html
new file mode 100644
index 000000000..fdd4f6220
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos replaced children in a grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-img-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 40px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 30px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: baseline"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: right"></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: baseline"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: right"></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html
new file mode 100644
index 000000000..a1d4e8163
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html
@@ -0,0 +1,125 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 42px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      display: block;
+    }
+    .big   .alignStart  { margin-left:  0px; }
+    .big   .alignCenter { margin-left: 17px; }
+    .big   .alignEnd    { margin-left: 34px; }
+    .small .alignStart  { margin-left:  0px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--right--></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--right--></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002.html
new file mode 100644
index 000000000..61c1b97b5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos replaced children in a static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-img-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 40px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 30px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: baseline"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: right"></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: baseline"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: right"></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001-ref.html
new file mode 100644
index 000000000..8e5db1efc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001-ref.html
@@ -0,0 +1,101 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001.html
new file mode 100644
index 000000000..18e024bf2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a RTL grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002-ref.html
new file mode 100644
index 000000000..c7176a7c2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002-ref.html
@@ -0,0 +1,101 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002.html
new file mode 100644
index 000000000..d7e510e1b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos LTR children in a RTL grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html
new file mode 100644
index 000000000..b38590c80
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html
@@ -0,0 +1,99 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 32px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 26px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -2px; }
+    .small .alignCenter { margin-left: -1px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003.html
new file mode 100644
index 000000000..2224ff684
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html
new file mode 100644
index 000000000..1ebc9e62c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html
@@ -0,0 +1,99 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 32px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 26px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -2px; }
+    .small .alignCenter { margin-left: -1px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004.html
new file mode 100644
index 000000000..a22fdc24f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001-ref.html
new file mode 100644
index 000000000..9fff3eabc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001-ref.html
@@ -0,0 +1,103 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+      margin-top: 3px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001.html
new file mode 100644
index 000000000..1bc2a5c33
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a vertical-rl grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002-ref.html
new file mode 100644
index 000000000..9fff3eabc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002-ref.html
@@ -0,0 +1,103 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+      margin-top: 3px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002.html
new file mode 100644
index 000000000..7b72c6aae
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html
new file mode 100644
index 000000000..155078456
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html
@@ -0,0 +1,101 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 32px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 18px; }
+    .small > .container > * { margin-left:  0px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 13px; }
+    .big   .alignEnd    { margin-top: 26px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -1px; }
+    .small .alignEnd    { margin-top: -2px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003.html
new file mode 100644
index 000000000..582262bd3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html
new file mode 100644
index 000000000..155078456
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html
@@ -0,0 +1,101 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 32px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 18px; }
+    .small > .container > * { margin-left:  0px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 13px; }
+    .big   .alignEnd    { margin-top: 26px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -1px; }
+    .small .alignEnd    { margin-top: -2px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004.html
new file mode 100644
index 000000000..63c893b6c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/reftest.list b/layout/reftests/w3c-css/submitted/align3/reftest.list
new file mode 100644
index 000000000..02f842278
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/reftest.list
@@ -0,0 +1,77 @@
+# Tests for static position of absolutely positioned flex children.
+== flex-abspos-staticpos-align-content-001.html flex-abspos-staticpos-align-content-001-ref.html
+== flex-abspos-staticpos-align-content-002.html flex-abspos-staticpos-align-content-002-ref.html
+== flex-abspos-staticpos-align-content-003.html flex-abspos-staticpos-align-content-003-ref.html
+== flex-abspos-staticpos-align-content-004.html flex-abspos-staticpos-align-content-004-ref.html
+== flex-abspos-staticpos-align-content-005.html flex-abspos-staticpos-align-content-005-ref.html
+== flex-abspos-staticpos-align-content-006.html flex-abspos-staticpos-align-content-006-ref.html
+== flex-abspos-staticpos-align-content-007.html flex-abspos-staticpos-align-content-007-ref.html
+== flex-abspos-staticpos-align-content-008.html flex-abspos-staticpos-align-content-008-ref.html
+== flex-abspos-staticpos-align-content-rtl-001.html flex-abspos-staticpos-align-content-rtl-001-ref.html
+== flex-abspos-staticpos-align-content-rtl-002.html flex-abspos-staticpos-align-content-rtl-002-ref.html
+== flex-abspos-staticpos-align-content-vertWM-001.html flex-abspos-staticpos-align-content-vertWM-001-ref.html
+== flex-abspos-staticpos-align-content-vertWM-002.html flex-abspos-staticpos-align-content-vertWM-002-ref.html
+
+== flex-abspos-staticpos-align-self-001.html flex-abspos-staticpos-align-self-001-ref.html
+== flex-abspos-staticpos-align-self-002.html flex-abspos-staticpos-align-self-002-ref.html
+== flex-abspos-staticpos-align-self-003.html flex-abspos-staticpos-align-self-003-ref.html
+== flex-abspos-staticpos-align-self-004.html flex-abspos-staticpos-align-self-004-ref.html
+== flex-abspos-staticpos-align-self-005.html flex-abspos-staticpos-align-self-005-ref.html
+== flex-abspos-staticpos-align-self-006.html flex-abspos-staticpos-align-self-006-ref.html
+== flex-abspos-staticpos-align-self-007.html flex-abspos-staticpos-align-self-007-ref.html
+== flex-abspos-staticpos-align-self-008.html flex-abspos-staticpos-align-self-008-ref.html
+== flex-abspos-staticpos-align-self-rtl-001.html flex-abspos-staticpos-align-self-rtl-001-ref.html
+== flex-abspos-staticpos-align-self-rtl-002.html flex-abspos-staticpos-align-self-rtl-002-ref.html
+== flex-abspos-staticpos-align-self-rtl-003.html flex-abspos-staticpos-align-self-rtl-003-ref.html
+== flex-abspos-staticpos-align-self-rtl-004.html flex-abspos-staticpos-align-self-rtl-004-ref.html
+== flex-abspos-staticpos-align-self-vertWM-001.html flex-abspos-staticpos-align-self-vertWM-001-ref.html
+== flex-abspos-staticpos-align-self-vertWM-002.html flex-abspos-staticpos-align-self-vertWM-002-ref.html
+== flex-abspos-staticpos-align-self-vertWM-003.html flex-abspos-staticpos-align-self-vertWM-003-ref.html
+== flex-abspos-staticpos-align-self-vertWM-004.html flex-abspos-staticpos-align-self-vertWM-004-ref.html
+
+== flex-abspos-staticpos-fallback-align-content-001.html flex-abspos-staticpos-fallback-align-content-001-ref.html
+== flex-abspos-staticpos-fallback-justify-content-001.html flex-abspos-staticpos-fallback-justify-content-001-ref.html
+
+== flex-abspos-staticpos-justify-content-001.html flex-abspos-staticpos-justify-content-001-ref.html
+== flex-abspos-staticpos-justify-content-002.html flex-abspos-staticpos-justify-content-002-ref.html
+== flex-abspos-staticpos-justify-content-003.html flex-abspos-staticpos-justify-content-003-ref.html
+== flex-abspos-staticpos-justify-content-004.html flex-abspos-staticpos-justify-content-004-ref.html
+== flex-abspos-staticpos-justify-content-005.html flex-abspos-staticpos-justify-content-005-ref.html
+== flex-abspos-staticpos-justify-content-006.html flex-abspos-staticpos-justify-content-006-ref.html
+== flex-abspos-staticpos-justify-content-007.html flex-abspos-staticpos-justify-content-007-ref.html
+== flex-abspos-staticpos-justify-content-008.html flex-abspos-staticpos-justify-content-008-ref.html
+== flex-abspos-staticpos-justify-content-rtl-001.html flex-abspos-staticpos-justify-content-rtl-001-ref.html
+== flex-abspos-staticpos-justify-content-rtl-002.html flex-abspos-staticpos-justify-content-rtl-002-ref.html
+== flex-abspos-staticpos-justify-content-vertWM-001.html flex-abspos-staticpos-justify-content-vertWM-001-ref.html
+== flex-abspos-staticpos-justify-content-vertWM-002.html flex-abspos-staticpos-justify-content-vertWM-002-ref.html
+
+== flex-abspos-staticpos-justify-self-001.html flex-abspos-staticpos-justify-self-001-ref.html
+
+== flex-abspos-staticpos-margin-001.html flex-abspos-staticpos-margin-001-ref.html
+== flex-abspos-staticpos-margin-002.html flex-abspos-staticpos-margin-002-ref.html
+
+== grid-abspos-staticpos-align-self-001.html grid-abspos-staticpos-align-self-001-ref.html
+== grid-abspos-staticpos-align-self-002.html grid-abspos-staticpos-align-self-002-ref.html
+== grid-abspos-staticpos-align-self-img-001.html grid-abspos-staticpos-align-self-img-001-ref.html
+== grid-abspos-staticpos-align-self-img-002.html grid-abspos-staticpos-align-self-img-002-ref.html
+== grid-abspos-staticpos-align-self-rtl-001.html grid-abspos-staticpos-align-self-rtl-001-ref.html
+== grid-abspos-staticpos-align-self-rtl-002.html grid-abspos-staticpos-align-self-rtl-002-ref.html
+== grid-abspos-staticpos-align-self-rtl-003.html grid-abspos-staticpos-align-self-rtl-003-ref.html
+== grid-abspos-staticpos-align-self-rtl-004.html grid-abspos-staticpos-align-self-rtl-004-ref.html
+== grid-abspos-staticpos-align-self-vertWM-001.html grid-abspos-staticpos-align-self-vertWM-001-ref.html
+== grid-abspos-staticpos-align-self-vertWM-002.html grid-abspos-staticpos-align-self-vertWM-002-ref.html
+== grid-abspos-staticpos-align-self-vertWM-003.html grid-abspos-staticpos-align-self-vertWM-003-ref.html
+== grid-abspos-staticpos-align-self-vertWM-004.html grid-abspos-staticpos-align-self-vertWM-004-ref.html
+
+== grid-abspos-staticpos-justify-self-001.html grid-abspos-staticpos-justify-self-001-ref.html
+== grid-abspos-staticpos-justify-self-002.html grid-abspos-staticpos-justify-self-002-ref.html
+== grid-abspos-staticpos-justify-self-img-001.html grid-abspos-staticpos-justify-self-img-001-ref.html
+== grid-abspos-staticpos-justify-self-img-002.html grid-abspos-staticpos-justify-self-img-002-ref.html
+== grid-abspos-staticpos-justify-self-rtl-001.html grid-abspos-staticpos-justify-self-rtl-001-ref.html
+== grid-abspos-staticpos-justify-self-rtl-002.html grid-abspos-staticpos-justify-self-rtl-002-ref.html
+== grid-abspos-staticpos-justify-self-rtl-003.html grid-abspos-staticpos-justify-self-rtl-003-ref.html
+== grid-abspos-staticpos-justify-self-rtl-004.html grid-abspos-staticpos-justify-self-rtl-004-ref.html
+== grid-abspos-staticpos-justify-self-vertWM-001.html grid-abspos-staticpos-justify-self-vertWM-001-ref.html
+== grid-abspos-staticpos-justify-self-vertWM-002.html grid-abspos-staticpos-justify-self-vertWM-002-ref.html
+== grid-abspos-staticpos-justify-self-vertWM-003.html grid-abspos-staticpos-justify-self-vertWM-003-ref.html
+== grid-abspos-staticpos-justify-self-vertWM-004.html grid-abspos-staticpos-justify-self-vertWM-004-ref.html
diff --git a/layout/reftests/w3c-css/submitted/align3/support/colors-8x16.png b/layout/reftests/w3c-css/submitted/align3/support/colors-8x16.png
new file mode 100644
index 000000000..596fdb389
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/support/colors-8x16.png
diff --git a/layout/reftests/w3c-css/submitted/background/aqua-yellow-32x32.png b/layout/reftests/w3c-css/submitted/background/aqua-yellow-32x32.png
new file mode 100644
index 000000000..42f8a2100
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/aqua-yellow-32x32.png
diff --git a/layout/reftests/w3c-css/submitted/background/aqua-yellow-37x37.png b/layout/reftests/w3c-css/submitted/background/aqua-yellow-37x37.png
new file mode 100644
index 000000000..0289b0394
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/aqua-yellow-37x37.png
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1-ref.html
new file mode 100644
index 000000000..43fa1caa6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image repeat</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-size: 36px 36px;
+        background-repeat: repeat;
+      }
+      .outer_gradient {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 36px 36px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: repeat;
+      }
+      </style>
+    </head>
+    <body>
+      <div class="outer"></div>
+      <div class="outer_gradient"></div>
+    </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1a.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1a.html
new file mode 100644
index 000000000..7ba2329d9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1a.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-round-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: round;
+      }
+      .outer_gradient {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1b.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1b.html
new file mode 100644
index 000000000..126909c90
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1b.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-round-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: round round;
+      }
+      .outer_gradient {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: round round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1c.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1c.html
new file mode 100644
index 000000000..e956e16a4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1c.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-round-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'repeat round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 36px 36px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: repeat round;
+      }
+      .outer_gradient {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 36px 36px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: repeat round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1d.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1d.html
new file mode 100644
index 000000000..424c95901
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1d.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-round-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round repeat' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 32px 36px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: round repeat;
+      }
+      .outer_gradient {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 32px 36px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: round repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-1e.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1e.html
new file mode 100644
index 000000000..64640ffdc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-1e.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-round-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'repeat round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 36px 32px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: repeat round;
+      }
+      .outer_gradient {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 36px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: repeat round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-2-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-2-ref.html
new file mode 100644
index 000000000..6d6233078
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-2-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image repeat</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+    .outer {
+      width: 72px;
+      height: 72px;
+      border: 1px solid black;
+      background-image: url(aqua-yellow-32x32.png);
+      background-size: 36px 36px;
+      background-repeat: repeat-x;
+    }
+    .outer_gradient {
+      width: 72px;
+      height: 72px;
+      border: 1px solid black;
+      background-image: linear-gradient(to top left, red, green);
+      background-size: 36px 36px;
+      background-repeat: repeat-x;
+    }
+    </style>
+    </head>
+    <body>
+      <div class="outer"></div>
+      <div class="outer_gradient"></div>
+    </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-2.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-2.html
new file mode 100644
index 000000000..cdb85833c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round no-repeat</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-round-2-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round no-repeat' works correctly or not.">
+    <style type="text/css">
+    .outer {
+      width: 72px;
+      height: 72px;
+      border: 1px solid black;
+      background-image: url(aqua-yellow-32x32.png);
+      background-repeat: round no-repeat;
+    }
+    .outer_gradient {
+      width: 72px;
+      height: 72px;
+      border: 1px solid black;
+      background-size: 32px 36px;
+      background-image: linear-gradient(to top left, red, green);
+      background-repeat: round no-repeat;
+    }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-3-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-3-ref.html
new file mode 100644
index 000000000..49eaccb19
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-3-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image repeat</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-size: 36px 36px;
+        background-repeat: repeat-y;
+      }
+      #outer_gradient {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: linear-gradient(to top left, red, green);
+        background-size: 36px 36px;
+        background-repeat: repeat-y;
+      }
+    </style>
+    </head>
+    <body>
+      <div id="outer"><div id=inner></div></div>
+      <div id="outer_gradient"><div id=inner></div></div>
+    </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-3.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-3.html
new file mode 100644
index 000000000..410d7ed67
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-3.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image no-repeat round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-round-3-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'no-repeat round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-size: 36px auto;
+        background-repeat: no-repeat round;
+      }
+      .outer_gradient {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: linear-gradient(to top left, red, green);
+        background-size: 36px 32px;
+        background-repeat: no-repeat round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-4-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-4-ref.html
new file mode 100644
index 000000000..8bb7d7095
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-4-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image repeat with specified position</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-size: 36px 36px;
+        background-repeat: repeat;
+        background-position: 5px 5px;
+      }
+      .outer_gradient {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: linear-gradient(to top left, red, green);
+        background-size: 36px 36px;
+        background-repeat: repeat;
+        background-position: 5px 5px;
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer"></div>
+      <div class="outer_gradient"></div>
+    </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-round-4.html b/layout/reftests/w3c-css/submitted/background/background-repeat-round-4.html
new file mode 100644
index 000000000..f02ad55ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-round-4.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round with specified position</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-round-4-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round' works correctly or not.">
+    <style type="text/css">
+      #outer {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: round;
+        background-position: 5px 5px;
+      }
+      #outer_gradient {
+        width: 72px;
+        height: 72px;
+        border: 1px solid black;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: round;
+        background-position: 5px 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer"></div>
+    <div id="outer_gradient"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-1-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1-ref.html
new file mode 100644
index 000000000..f9efeeb83
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 106px;
+        display: flex;
+        justify-content: space-between;
+        align-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+      }
+      .outer_gradient
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 106px;
+        display: flex;
+        justify-content: space-between;
+        align-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner_gradient
+      {
+        height: 32px;
+        width: 32px;
+        background-image: linear-gradient(to top left, red, green);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+    <div class="outer_gradient">
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-10-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-10-ref.html
new file mode 100644
index 000000000..35ed461c8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-10-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer
+      {
+        border: 1px solid black;
+        width: 96px;
+        height: 106px;
+        display: flex;
+        justify-content: space-between;
+        align-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-10.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-10.html
new file mode 100644
index 000000000..db8c910d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-10.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-10-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 96px;
+        height: 106px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-1a.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1a.html
new file mode 100644
index 000000000..3729e5ccb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 106px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space;
+      }
+      .outer_gradient {
+        width: 106px;
+        height: 106px;
+        border: 1px solid black;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-1b.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1b.html
new file mode 100644
index 000000000..50efcc253
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1b.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image space with position</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 106px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-position: 15px 15px;
+        background-repeat: space;
+      }
+      .outer_gradient {
+        width: 106px;
+        height: 106px;
+        border: 1px solid black;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-position: 15px 15px;
+        background-repeat: space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-1c.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1c.html
new file mode 100644
index 000000000..263bb0c23
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-1c.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-1-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 106px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space space;
+      }
+      .outer_gradient {
+        width: 106px;
+        height: 106px;
+        border: 1px solid black;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: space space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-2-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-2-ref.html
new file mode 100644
index 000000000..c2fc93aac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-2-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 48px;
+        height: 48px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: no-repeat;
+        background-position: 5px 5px;
+      }
+      .outer_gradient {
+        width: 48px;
+        height: 48px;
+        border: 1px solid black;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: no-repeat;
+        background-position: 5px 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-2.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-2.html
new file mode 100644
index 000000000..6099aa0c1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round with specified position</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-2-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 48px;
+        height: 48px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space;
+        background-position: 5px 5px;
+      }
+      .outer_gradient {
+        width: 48px;
+        height: 48px;
+        border: 1px solid black;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: space;
+        background-position: 5px 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-3-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-3-ref.html
new file mode 100644
index 000000000..add80bc3c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-3-ref.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer1
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 106px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .inner1
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+        margin-top: 40px;
+      }
+      .outer2
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 106px;
+        display: flex;
+        align-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner2
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+        margin-left: 40px;
+      }
+      .inner_gradient1
+      {
+        height: 32px;
+        width: 32px;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        margin-top: 40px;
+      }
+      .inner_gradient2
+      {
+        height: 32px;
+        width: 32px;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        margin-left: 40px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer1">
+      <div class="inner1"></div>
+      <div class="inner1"></div>
+      <div class="inner1"></div>
+    </div>
+    <div class="outer2">
+      <div class="inner2"></div>
+      <div class="inner2"></div>
+      <div class="inner2"></div>
+    </div>
+    <div class="outer1">
+      <div class="inner_gradient1"></div>
+      <div class="inner_gradient1"></div>
+      <div class="inner_gradient1"></div>
+    </div>
+    <div class="outer2">
+      <div class="inner_gradient2"></div>
+      <div class="inner_gradient2"></div>
+      <div class="inner_gradient2"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-3.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-3.html
new file mode 100644
index 000000000..39d5701ec
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-3.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image round with specified position</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-3-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'no-repeat space' and 'space no-repeat' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 106px;
+        border: 1px solid black;
+      }
+      .inner1 {
+        width: 106px;
+        height: 106px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space no-repeat;
+        background-position: 7px 40px;
+      }
+      .inner2 {
+        width: 106px;
+        height: 106px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: no-repeat space;
+        background-position: 40px 7px;
+      }
+      .inner_gradient1 {
+        width: 106px;
+        height: 106px;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: space no-repeat;
+        background-position: 7px 40px;
+      }
+      .inner_gradient2 {
+        width: 106px;
+        height: 106px;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: no-repeat space;
+        background-position: 40px 7px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner1"></div>
+    </div>
+    <div class="outer">
+      <div class="inner2"></div>
+    </div>
+    <div class="outer">
+      <div class="inner_gradient1"></div>
+    </div>
+    <div class="outer">
+      <div class="inner_gradient2"></div>
+    </div>
+</body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-4-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-4-ref.html
new file mode 100644
index 000000000..e7814de81
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-4-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer
+      {
+        border: 1px solid black;
+        width: 96px;
+        height: 106px;
+        display: flex;
+        align-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+      }
+      .inner_gradient
+      {
+        height: 32px;
+        width: 32px;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+    <div class="outer">
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-4.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-4.html
new file mode 100644
index 000000000..c8be103d9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-4.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-4-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'repeat space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 96px;
+        height: 106px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: repeat space;
+      }
+      .outer_graident {
+        width: 96px;
+        height: 106px;
+        border: 1px solid black;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: repeat space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_graident"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-5-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-5-ref.html
new file mode 100644
index 000000000..9ff6c6e2d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-5-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 96px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+      }
+      .inner_gradient
+      {
+        height: 32px;
+        width: 32px;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+    <div class="outer">
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-5.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-5.html
new file mode 100644
index 000000000..3c1b3d2d1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-5.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-5-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space repeat' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 96px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space repeat;
+      }
+      .outer_gradient {
+        width: 106px;
+        height: 96px;
+        border: 1px solid black;
+        background-size: 32px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: space repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-6-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-6-ref.html
new file mode 100644
index 000000000..7e2f19c8d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-6-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer
+      {
+        border: 1px solid black;
+        width: 192px;
+        height: 106px;
+        display: flex;
+        align-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 32px;
+        width: 64px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: no-repeat;
+        background-size: 64px 32px;
+      }
+      .inner_gradient
+      {
+        height: 32px;
+        width: 64px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: no-repeat;
+        background-size: 64px 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+    <div class="outer">
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-6.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-6.html
new file mode 100644
index 000000000..507535229
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-6.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-6-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'round space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 192px;
+        height: 106px;
+        border: 1px solid black;
+        background-size: 60px 32px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: round space;
+      }
+      .outer_gradient {
+        width: 192px;
+        height: 106px;
+        border: 1px solid black;
+        background-size: 60px 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: round space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-7-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-7-ref.html
new file mode 100644
index 000000000..528599004
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-7-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 192px;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 64px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: no-repeat;
+        background-size: 32px 64px;
+      }
+      .inner_gradient
+      {
+        height: 64px;
+        width: 32px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: no-repeat;
+        background-size: 32px 64px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+    <div class="outer">
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+      <div class="inner_gradient"></div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-7.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-7.html
new file mode 100644
index 000000000..49bee1fec
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-7.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-7-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space round' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 192px;
+        border: 1px solid black;
+        background-size: 32px 60px;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space round;
+      }
+      .outer_gradient {
+        width: 106px;
+        height: 192px;
+        border: 1px solid black;
+        background-size: 32px 60px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: space round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-8-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-8-ref.html
new file mode 100644
index 000000000..1f7f39e35
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-8-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer
+      {
+        border: 20px solid rgba(0, 0, 0, 0.5);
+        width: 106px;
+        height: 106px;
+        background-image: url(aqua-yellow-37x37.png);
+        background-repeat: repeat;
+      }
+      .outer_gradient
+      {
+        border: 20px solid rgba(0, 0, 0, 0.5);
+        width: 32px;
+        height: 32px;
+        background-size: 50px 50px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: no-repeat;
+        background-position: -10px -10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-8.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-8.html
new file mode 100644
index 000000000..0ad57afd9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-8.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-8-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 106px;
+        border: 20px solid rgba(0, 0, 0, .5);
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space;
+      }
+      .outer_gradient {
+        width: 32px;
+        height: 32px;
+        border: 20px solid rgba(0, 0, 0, .5);
+        background-size: 50px 50px;
+        background-image: linear-gradient(to top left, red, green);
+        background-repeat: space;
+        background-position: -10px -10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+    <div class="outer_gradient"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-9-ref.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-9-ref.html
new file mode 100644
index 000000000..1476eca64
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-9-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: position background image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer
+      {
+        border: 1px solid black;
+        width: 106px;
+        height: 96px;
+        display: flex;
+        justify-content: space-between;
+        align-content: space-between;
+        flex-wrap: wrap;
+      }
+      .inner
+      {
+        height: 32px;
+        width: 32px;
+        background-image: url(aqua-yellow-32x32.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+      <div class="inner"></div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/background-repeat-space-9.html b/layout/reftests/w3c-css/submitted/background/background-repeat-space-9.html
new file mode 100644
index 000000000..66f6c2258
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/background-repeat-space-9.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Background: background-repeat: background image space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="background-repeat-space-9-ref.html">
+    <meta name="assert" content="Test checks whether background-repeat: 'space' works correctly or not.">
+    <style type="text/css">
+      .outer {
+        width: 106px;
+        height: 96px;
+        border: 1px solid black;
+        background-image: url(aqua-yellow-32x32.png);
+        background-repeat: space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-1-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-1-ref.html
new file mode 100644
index 000000000..942f3eb8c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-1-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat with SVG content</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+  </head>
+  <body>
+  <svg width='64' height='48' xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <g fill='blue' stroke-width='0'>
+      <path d='M2 2h4v44H2z'/>
+      <path d='M2 2h60v4H2z'/>
+      <path d='M58 2h4v44h-4z'/>
+      <path d='M2 42h60v4H2zM8'/>
+    </g>
+  </svg>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-1.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-1.html
new file mode 100644
index 000000000..6e2a43b89
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat with SVG content</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="border-image-repeat-1-ref.html">
+    <meta name="assert" content="The test checks the result of border-image-repeat with SVG content.">
+    <style type="text/css">
+      .outer {
+        height: 16px;
+        width: 32px;
+        border-width: 16px;
+        border-style: solid;
+        border-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='blue' stroke-width='0'%3E%3Cpath d='M2 2h4v44H2z'/%3E%3Cpath d='M2 2h44v4H2z'/%3E%3Cpath d='M42 2h4v44h-4z'/%3E%3Cpath d='M2 42h44v4H2zM8'/%3E%3C/g%3E%3C/svg%3E") 16 repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1-ref.html
new file mode 100644
index 000000000..69d38c317
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1-ref.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 81px;
+        height: 81px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2 {
+        position: absolute;
+        top: 0px;
+        left: 27px;
+        width: 34px;
+        height: 27px;
+        background-size: 102px 81px;
+        background-image: url("border.png");
+        background-position: -34px 0px;
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 61px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4 {
+        position: absolute;
+        top: 27px;
+        left: 0px;
+        width: 27px;
+        height: 34px;
+        background-size: 81px 102px;
+        background-image: url("border.png");
+        background-position: 0px -34px;
+      }
+      .inner5 {
+        position: absolute;
+        top: 27px;
+        left: 61px;
+        width: 27px;
+        height: 34px;
+        background-size: 81px 102px;
+        background-image: url("border.png");
+        background-position: -54px -34px;
+      }
+      .inner6 {
+        position: absolute;
+        top: 61px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner7 {
+        position: absolute;
+        top: 61px;
+        left: 27px;
+        width: 34px;
+        height: 27px;
+        background-size: 102px 81px;
+        background-image: url("border.png");
+        background-position: -34px -54px;
+      }
+      .inner8 {
+        position: absolute;
+        top: 61px;
+        left: 61px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2"></div>
+        <div class="inner3"></div>
+        <div class="inner4"></div>
+        <div class="inner5"></div>
+        <div class="inner6"></div>
+        <div class="inner7"></div>
+        <div class="inner8"></div>
+      </div>
+    </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1.html
new file mode 100644
index 000000000..a935e445f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="border-image-repeat-round-1-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'round' uses the correct rounding formula.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: round round;
+        width: 34px;
+        height: 34px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2-ref.html
new file mode 100644
index 000000000..e96185c04
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2-ref.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 81px;
+        height: 81px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2 {
+        position: absolute;
+        top: 0px;
+        left: 27px;
+        width: 13px;
+        height: 27px;
+        background-size: 39px 81px;
+        background-image: url("border.png");
+        background-position: -13px 0px;
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 40px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4 {
+        position: absolute;
+        top: 27px;
+        left: 0px;
+        width: 27px;
+        height: 13px;
+        background-size: 81px 39px;
+        background-image: url("border.png");
+        background-position: 0px -13px;
+      }
+      .inner5 {
+        position: absolute;
+        top: 27px;
+        left: 40px;
+        width: 27px;
+        height: 13px;
+        background-size: 81px 39px;
+        background-image: url("border.png");
+        background-position: -54px -13px;
+      }
+      .inner6 {
+        position: absolute;
+        top: 40px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner7 {
+        position: absolute;
+        top: 40px;
+        left: 27px;
+        width: 13px;
+        height: 27px;
+        background-size: 39px 81px;
+        background-image: url("border.png");
+        background-position: -13px -54px;
+      }
+      .inner8 {
+        position: absolute;
+        top: 40px;
+        left: 40px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2"></div>
+        <div class="inner3"></div>
+        <div class="inner4"></div>
+        <div class="inner5"></div>
+        <div class="inner6"></div>
+        <div class="inner7"></div>
+        <div class="inner8"></div>
+      </div>
+    </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2.html
new file mode 100644
index 000000000..3c1cd3344
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-round-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat">
+    <link rel="match" href="border-image-repeat-round-2-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'round' uses the correct rounding formula.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: round round;
+        width: 13px;
+        height: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1-ref.html
new file mode 100644
index 000000000..e2cc7105e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 81px;
+        height: 81px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2 {
+        position: absolute;
+        top: 0px;
+        left: 31px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 62px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4 {
+        position: absolute;
+        top: 31px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner5 {
+        position: absolute;
+        top: 31px;
+        left: 62px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner6 {
+        position: absolute;
+        top: 62px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner7 {
+        position: absolute;
+        top: 62px;
+        left: 31px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner8 {
+        position: absolute;
+        top: 62px;
+        left: 62px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2"></div>
+        <div class="inner3"></div>
+        <div class="inner4"></div>
+        <div class="inner5"></div>
+        <div class="inner6"></div>
+        <div class="inner7"></div>
+        <div class="inner8"></div>
+      </div>
+    </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1.html
new file mode 100644
index 000000000..113d000df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-1-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: space space;
+        width: 35px;
+        height: 35px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2-ref.html
new file mode 100644
index 000000000..17b83e183
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: round</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 67px;
+        height: 67px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2 {
+        position: absolute;
+        top: 0px;
+        left: 40px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner3 {
+        position: absolute;
+        top: 40px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4 {
+        position: absolute;
+        top: 40px;
+        left: 40px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2"></div>
+        <div class="inner3"></div>
+        <div class="inner4"></div>
+      </div>
+    </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2.html
new file mode 100644
index 000000000..99dc6057f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-2-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when no images fit.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: space space;
+        width: 13px;
+        height: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3-ref.html
new file mode 100644
index 000000000..03c230186
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3-ref.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 114px;
+        height: 114px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2_1 {
+        position: absolute;
+        top: 0px;
+        left: 29px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner2_2 {
+        position: absolute;
+        top: 0px;
+        left: 58px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 87px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4_1 {
+        position: absolute;
+        top: 29px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner4_2 {
+        position: absolute;
+        top: 58px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner5_1 {
+        position: absolute;
+        top: 29px;
+        left: 87px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner5_2 {
+        position: absolute;
+        top: 58px;
+        left: 87px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner6 {
+        position: absolute;
+        top: 87px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner7_1 {
+        position: absolute;
+        top: 87px;
+        left: 29px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner7_2 {
+        position: absolute;
+        top: 87px;
+        left: 58px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner8 {
+        position: absolute;
+        top: 87px;
+        left: 87px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2_1"></div>
+        <div class="inner2_2"></div>
+        <div class="inner3"></div>
+        <div class="inner4_1"></div>
+        <div class="inner4_2"></div>
+        <div class="inner5_1"></div>
+        <div class="inner5_2"></div>
+        <div class="inner6"></div>
+        <div class="inner7_1"></div>
+        <div class="inner7_2"></div>
+        <div class="inner8"></div>
+      </div>
+    </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3.html
new file mode 100644
index 000000000..c43f1d370
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-3.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-3-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: space space;
+        width: 60px;
+        height: 60px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-1.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-1.html
new file mode 100644
index 000000000..2cf409739
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-1.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="match" href="border-image-repeat-space-4-ref-2.html">
+    <style type="text/css">
+      .outer {
+        width: 81px;
+        height: 81px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2 {
+        position: absolute;
+        top: 0px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4 {
+        position: absolute;
+        top: 27px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner5 {
+        position: absolute;
+        top: 27px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner6 {
+        position: absolute;
+        top: 54px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner7 {
+        position: absolute;
+        top: 54px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner8 {
+        position: absolute;
+        top: 54px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2"></div>
+        <div class="inner3"></div>
+        <div class="inner4"></div>
+        <div class="inner5"></div>
+        <div class="inner6"></div>
+        <div class="inner7"></div>
+        <div class="inner8"></div>
+      </div>
+    </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-2.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-2.html
new file mode 100644
index 000000000..eee8c7787
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4-ref-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: stretch stretch;
+        width: 27px;
+        height: 27px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4.html
new file mode 100644
index 000000000..b91e3abf8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-4.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-4-ref-1.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when a single image fits exactly.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: space space;
+        width: 27px;
+        height: 27px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-1.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-1.html
new file mode 100644
index 000000000..ac2fcea7f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-1.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="match" href="border-image-repeat-space-5-ref-2.html">
+    <style type="text/css">
+      .outer {
+        width: 135px;
+        height: 135px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner2_1 {
+        position: absolute;
+        top: 0px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner2_2 {
+        position: absolute;
+        top: 0px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner2_3 {
+        position: absolute;
+        top: 0px;
+        left: 81px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px 0px;
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 108px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner4_1 {
+        position: absolute;
+        top: 27px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner4_2 {
+        position: absolute;
+        top: 54px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner4_3 {
+        position: absolute;
+        top: 81px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: 0px -27px;
+      }
+      .inner5_1 {
+        position: absolute;
+        top: 27px;
+        left: 108px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner5_2 {
+        position: absolute;
+        top: 54px;
+        left: 108px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner5_3 {
+        position: absolute;
+        top: 81px;
+        left: 108px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -54px -27px;
+      }
+      .inner6 {
+        position: absolute;
+        top: 108px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+      .inner7_1 {
+        position: absolute;
+        top: 108px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner7_2 {
+        position: absolute;
+        top: 108px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner7_3 {
+        position: absolute;
+        top: 108px;
+        left: 81px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+        background-position: -27px -54px;
+      }
+      .inner8 {
+        position: absolute;
+        top: 108px;
+        left: 108px;
+        width: 27px;
+        height: 27px;
+        background-image: url("border.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2_1"></div>
+        <div class="inner2_2"></div>
+        <div class="inner2_3"></div>
+        <div class="inner3"></div>
+        <div class="inner4_1"></div>
+        <div class="inner4_2"></div>
+        <div class="inner4_3"></div>
+        <div class="inner5_1"></div>
+        <div class="inner5_2"></div>
+        <div class="inner5_3"></div>
+        <div class="inner6"></div>
+        <div class="inner7_1"></div>
+        <div class="inner7_2"></div>
+        <div class="inner7_3"></div>
+        <div class="inner8"></div>
+      </div>
+    </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-2.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-2.html
new file mode 100644
index 000000000..1d24b447e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5-ref-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: repeat repeat;
+        width: 81px;
+        height: 81px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5.html
new file mode 100644
index 000000000..582c65861
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-5.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-5-ref-1.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' uses the correct formula when multiple images fit exactly.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border: 27px solid transparent;
+        border-image: url("border.png") 27;
+        border-image-repeat: space space;
+        width: 81px;
+        height: 81px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6-ref.html
new file mode 100644
index 000000000..16647b3b7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6-ref.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 81px;
+        height: 81px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-tl.png");
+      }
+      .inner2 {
+        position: absolute;
+        top: 0px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-to.png");
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-tr.png");
+      }
+      .inner4 {
+        position: absolute;
+        top: 27px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-le.png");
+      }
+      .inner5 {
+        position: absolute;
+        top: 27px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ct.png");
+      }
+      .inner6 {
+        position: absolute;
+        top: 27px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ri.png");
+      }
+      .inner7 {
+        position: absolute;
+        top: 54px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-bl.png");
+      }
+      .inner8 {
+        position: absolute;
+        top: 54px;
+        left: 27px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-bo.png");
+      }
+      .inner9 {
+        position: absolute;
+        top: 54px;
+        left: 54px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-br.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2"></div>
+        <div class="inner3"></div>
+        <div class="inner4"></div>
+        <div class="inner5"></div>
+        <div class="inner6"></div>
+        <div class="inner7"></div>
+        <div class="inner8"></div>
+        <div class="inner9"></div>
+      </div>
+    </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6.html
new file mode 100644
index 000000000..3eb643110
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-6.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-6-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when a single image fits exactly.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border-width: 27px;
+        border-style: solid;
+        border-image: url("reticule.png") 27 fill space;
+        width: 27px;
+        height: 27px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7-ref.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7-ref.html
new file mode 100644
index 000000000..e0cbdfe2d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7-ref.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        width: 132px;
+        height: 132px;
+      }
+      .inner1 {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-tl.png");
+      }
+      .inner2_1 {
+        position: absolute;
+        top: 0px;
+        left: 35px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-to.png");
+      }
+      .inner2_2 {
+        position: absolute;
+        top: 0px;
+        left: 70px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-to.png");
+      }
+      .inner3 {
+        position: absolute;
+        top: 0px;
+        left: 105px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-tr.png");
+      }
+      .inner4_1 {
+        position: absolute;
+        top: 35px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-le.png");
+      }
+      .inner4_2 {
+        position: absolute;
+        top: 70px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-le.png");
+      }
+      .inner5_1 {
+        position: absolute;
+        top: 35px;
+        left: 35px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ct.png");
+      }
+      .inner5_2 {
+        position: absolute;
+        top: 35px;
+        left: 70px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ct.png");
+      }
+      .inner5_3 {
+        position: absolute;
+        top: 70px;
+        left: 35px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ct.png");
+      }
+      .inner5_4 {
+        position: absolute;
+        top: 70px;
+        left: 70px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ct.png");
+      }
+      .inner6_1 {
+        position: absolute;
+        top: 35px;
+        left: 105px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ri.png");
+      }
+      .inner6_2 {
+        position: absolute;
+        top: 70px;
+        left: 105px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-ri.png");
+      }
+      .inner7 {
+        position: absolute;
+        top: 105px;
+        left: 0px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-bl.png");
+      }
+      .inner8_1 {
+        position: absolute;
+        top: 105px;
+        left: 35px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-bo.png");
+      }
+      .inner8_2 {
+        position: absolute;
+        top: 105px;
+        left: 70px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-bo.png");
+      }
+      .inner9 {
+        position: absolute;
+        top: 105px;
+        left: 105px;
+        width: 27px;
+        height: 27px;
+        background-image: url("reticule-br.png");
+      }
+    </style>
+    </head>
+    <body>
+      <div class="outer">
+        <div class="inner1"></div>
+        <div class="inner2_1"></div>
+        <div class="inner2_2"></div>
+        <div class="inner3"></div>
+        <div class="inner4_1"></div>
+        <div class="inner4_2"></div>
+        <div class="inner5_1"></div>
+        <div class="inner5_2"></div>
+        <div class="inner5_3"></div>
+        <div class="inner5_4"></div>
+        <div class="inner6_1"></div>
+        <div class="inner6_2"></div>
+        <div class="inner7"></div>
+        <div class="inner8_1"></div>
+        <div class="inner8_2"></div>
+        <div class="inner9"></div>
+      </div>
+    </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7.html b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7.html
new file mode 100644
index 000000000..3e632877d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border-image-repeat-space-7.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Border Image: border-image-repeat: space</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css3-background/#the-border-image-repeat">
+    <link rel="match" href="border-image-repeat-space-7-ref.html">
+    <meta name="assert" content="The test checks whether border-image-repeat: 'space' with 'fill' uses the correct formula when multiple image fit.">
+    <style type="text/css">
+      .outer {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        border-width: 27px;
+        border-style: solid;
+        border-image: url("reticule.png") 27 fill space;
+        width: 78px;
+        height: 78px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/background/border.png b/layout/reftests/w3c-css/submitted/background/border.png
new file mode 100644
index 000000000..7a657391d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/border.png
diff --git a/layout/reftests/w3c-css/submitted/background/reftest-stylo.list b/layout/reftests/w3c-css/submitted/background/reftest-stylo.list
new file mode 100644
index 000000000..5e15898af
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reftest-stylo.list
@@ -0,0 +1,35 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# background-repeat round/space test cases
+== background-repeat-space-1a.html background-repeat-space-1a.html
+== background-repeat-space-1b.html background-repeat-space-1b.html
+== background-repeat-space-1c.html background-repeat-space-1c.html
+== background-repeat-space-2.html background-repeat-space-2.html
+== background-repeat-space-3.html background-repeat-space-3.html
+== background-repeat-space-4.html background-repeat-space-4.html
+== background-repeat-space-5.html background-repeat-space-5.html
+== background-repeat-space-6.html background-repeat-space-6.html
+== background-repeat-space-7.html background-repeat-space-7.html
+== background-repeat-space-8.html background-repeat-space-8.html
+== background-repeat-space-9.html background-repeat-space-9.html
+== background-repeat-space-10.html background-repeat-space-10.html
+== background-repeat-round-1a.html background-repeat-round-1a.html
+== background-repeat-round-1b.html background-repeat-round-1b.html
+== background-repeat-round-1c.html background-repeat-round-1c.html
+== background-repeat-round-1d.html background-repeat-round-1d.html
+== background-repeat-round-1e.html background-repeat-round-1e.html
+== background-repeat-round-2.html background-repeat-round-2.html
+== background-repeat-round-3.html background-repeat-round-3.html
+== background-repeat-round-4.html background-repeat-round-4.html
+
+#border-image test cases
+== border-image-repeat-round-1.html border-image-repeat-round-1.html
+== border-image-repeat-round-2.html border-image-repeat-round-2.html
+== border-image-repeat-space-1.html border-image-repeat-space-1.html
+== border-image-repeat-space-2.html border-image-repeat-space-2.html
+== border-image-repeat-space-3.html border-image-repeat-space-3.html
+== border-image-repeat-space-4.html border-image-repeat-space-4.html
+== border-image-repeat-space-4.html border-image-repeat-space-4.html
+== border-image-repeat-space-5.html border-image-repeat-space-5.html
+== border-image-repeat-space-5.html border-image-repeat-space-5.html
+== border-image-repeat-space-6.html border-image-repeat-space-6.html
+== border-image-repeat-space-7.html border-image-repeat-space-7.html
diff --git a/layout/reftests/w3c-css/submitted/background/reftest.list b/layout/reftests/w3c-css/submitted/background/reftest.list
new file mode 100644
index 000000000..e18c76f50
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reftest.list
@@ -0,0 +1,35 @@
+# background-repeat round/space test cases
+== background-repeat-space-1a.html background-repeat-space-1-ref.html
+== background-repeat-space-1b.html background-repeat-space-1-ref.html
+== background-repeat-space-1c.html background-repeat-space-1-ref.html
+== background-repeat-space-2.html background-repeat-space-2-ref.html
+== background-repeat-space-3.html background-repeat-space-3-ref.html
+== background-repeat-space-4.html background-repeat-space-4-ref.html
+== background-repeat-space-5.html background-repeat-space-5-ref.html
+== background-repeat-space-6.html background-repeat-space-6-ref.html
+== background-repeat-space-7.html background-repeat-space-7-ref.html
+== background-repeat-space-8.html background-repeat-space-8-ref.html
+== background-repeat-space-9.html background-repeat-space-9-ref.html
+== background-repeat-space-10.html background-repeat-space-10-ref.html
+== background-repeat-round-1a.html background-repeat-round-1-ref.html
+== background-repeat-round-1b.html background-repeat-round-1-ref.html
+== background-repeat-round-1c.html background-repeat-round-1-ref.html
+== background-repeat-round-1d.html background-repeat-round-1-ref.html
+== background-repeat-round-1e.html background-repeat-round-1-ref.html
+== background-repeat-round-2.html background-repeat-round-2-ref.html
+== background-repeat-round-3.html background-repeat-round-3-ref.html
+== background-repeat-round-4.html background-repeat-round-4-ref.html
+
+#border-image test cases
+== border-image-repeat-round-1.html border-image-repeat-round-1-ref.html
+== border-image-repeat-round-2.html border-image-repeat-round-2-ref.html
+== border-image-repeat-space-1.html border-image-repeat-space-1-ref.html
+== border-image-repeat-space-2.html border-image-repeat-space-2-ref.html
+== border-image-repeat-space-3.html border-image-repeat-space-3-ref.html
+== border-image-repeat-space-4.html border-image-repeat-space-4-ref-1.html
+== border-image-repeat-space-4-ref-1.html border-image-repeat-space-4-ref-2.html
+== border-image-repeat-space-5.html border-image-repeat-space-5-ref-1.html
+== border-image-repeat-space-5-ref-1.html border-image-repeat-space-5-ref-2.html
+== border-image-repeat-space-6.html border-image-repeat-space-6-ref.html
+== border-image-repeat-space-7.html border-image-repeat-space-7-ref.html
+== border-image-repeat-1.html border-image-repeat-1-ref.html
diff --git a/layout/reftests/w3c-css/submitted/background/reticule-bl.png b/layout/reftests/w3c-css/submitted/background/reticule-bl.png
new file mode 100644
index 000000000..6abbaf319
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reticule-bl.png
diff --git a/layout/reftests/w3c-css/submitted/background/reticule-bo.png b/layout/reftests/w3c-css/submitted/background/reticule-bo.png
new file mode 100644
index 000000000..f72a67381
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reticule-bo.png
diff --git a/layout/reftests/w3c-css/submitted/background/reticule-br.png b/layout/reftests/w3c-css/submitted/background/reticule-br.png
new file mode 100644
index 000000000..84e22afe2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reticule-br.png
diff --git a/layout/reftests/w3c-css/submitted/background/reticule-ct.png b/layout/reftests/w3c-css/submitted/background/reticule-ct.png
new file mode 100644
index 000000000..71ac10f61
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reticule-ct.png
diff --git a/layout/reftests/w3c-css/submitted/background/reticule-le.png b/layout/reftests/w3c-css/submitted/background/reticule-le.png
new file mode 100644
index 000000000..abe56ffad
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reticule-le.png
diff --git a/layout/reftests/w3c-css/submitted/background/reticule-ri.png b/layout/reftests/w3c-css/submitted/background/reticule-ri.png
new file mode 100644
index 000000000..95d7db842
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reticule-ri.png
diff --git a/layout/reftests/w3c-css/submitted/background/reticule-tl.png b/layout/reftests/w3c-css/submitted/background/reticule-tl.png
new file mode 100644
index 000000000..8a3516998
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reticule-tl.png
diff --git a/layout/reftests/w3c-css/submitted/background/reticule-to.png b/layout/reftests/w3c-css/submitted/background/reticule-to.png
new file mode 100644
index 000000000..d1b082c9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reticule-to.png
diff --git a/layout/reftests/w3c-css/submitted/background/reticule-tr.png b/layout/reftests/w3c-css/submitted/background/reticule-tr.png
new file mode 100644
index 000000000..cd9bb5a5a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reticule-tr.png
diff --git a/layout/reftests/w3c-css/submitted/background/reticule.png b/layout/reftests/w3c-css/submitted/background/reticule.png
new file mode 100644
index 000000000..02c7d10e7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/background/reticule.png
diff --git a/layout/reftests/w3c-css/submitted/check-for-references.sh b/layout/reftests/w3c-css/submitted/check-for-references.sh
new file mode 100755
index 000000000..977cee3f4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/check-for-references.sh
@@ -0,0 +1,27 @@
+#!/bin/bash
+
+cd "$(dirname "$0")"
+find . -name reftest.list | sed 's,/reftest.list$,,' | while read DIRNAME
+do
+    cat "$DIRNAME/reftest.list" | grep -v "^\(include\|default-preferences\)" | sed 's/ #.*//;s/^#.*//;s/.* == /== /;s/.* != /!= /' | grep -v "^ *$" | while read TYPE TEST REF
+    do
+        REFTYPE=""
+        if [ "$TYPE" == "==" ]
+        then
+            REFTYPE="match"
+        elif [ "$TYPE" == "!=" ]
+        then
+            REFTYPE="mismatch"
+        else
+            echo "Unexpected type $TYPE for $DIRNAME/$TEST"
+        fi
+        if grep "rel=\"$REFTYPE\"" "$DIRNAME/$TEST" | head -1 | grep -q "href=\"$REF\""
+        then
+            #echo "Good link for $DIRNAME/$TEST"
+            echo -n
+        else
+            echo "Missing link for $DIRNAME/$TEST"
+            #echo "<link rel=\"$REFTYPE\" href=\"$REF\">" >> "$DIRNAME/$TEST"
+        fi
+    done
+done
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001-ref.html
new file mode 100644
index 000000000..f37a73d17
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsla() syntax accepts comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120, 75%, 50%, 0.2); }
+      #p2 { background-color: hsla(120, 75%, 50%, 0.4); }
+      #p3 { background-color: hsla(120, 75%, 50%, 0.6); }
+      #p4 { background-color: hsl(120, 75%, 50%); }
+      #p5 { background-color: hsl(120, 75%, 50%); }
+      #p6 { background-color: hsl(120, 75%, 50%); }
+      #p7 { background-color: hsl(120, 75%, 50%); }
+      #p8 { background-color: hsl(120, 75%, 50%); }
+      #p9 { background-color: hsl(120, 75%, 50%); }
+      #p10 { background-color: hsl(120, 75%, 50%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001.html
new file mode 100644
index 000000000..2b8c7d313
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsla() syntax accepts comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation" />
+    <meta name="assert" content="hsla() should accept comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component." />
+    <link rel="match" href="background-color-hsl-001-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120.0, 75%, 50%, 20%); }
+      #p2 { background-color: hsla(120, 75%, 50%, 0.4); }
+      #p3 { background-color: hsla(120 75% 50% / 60%); }
+      #p4 { background-color: hsla(120.0 75% 50% / 1.0); }
+      #p5 { background-color: hsla(120/* comment */75%/* comment */50%/1.0); }
+      #p6 { background-color: hsla(120,/* comment */75%,/* comment */50%,100%); }
+      #p7 { background-color: hsla(120.0, 75%, 50%); }
+      #p8 { background-color: hsla(120 75% 50%); }
+      #p9 { background-color: hsla(120/* comment */75%/* comment */50%); }
+      #p10 { background-color: hsla(120/* comment */,75%,/* comment */50%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002-ref.html
new file mode 100644
index 000000000..90284b999
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsl() syntax accepts comma-less expressions (and comments as separators) and alpha component (and percentage alpha) - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120, 75%, 50%, 0.2); }
+      #p2 { background-color: hsla(120, 75%, 50%, 0.4); }
+      #p3 { background-color: hsla(120, 75%, 50%, 0.6); }
+      #p4 { background-color: hsla(120, 75%, 50%, 0.8); }
+      #p5 { background-color: hsla(120.0, 75%, 50%, 1.0); }
+      #p6 { background-color: hsla(120.0, 75%, 50%, 1.0); }
+      #p7 { background-color: hsla(120.0, 75%, 50%, 1.0); }
+      #p8 { background-color: hsla(120, 75%, 50%, 1.0); }
+      #p9 { background-color: hsla(120, 75%, 50%, 1.0); }
+      #p10 { background-color: hsla(120, 75%, 50%, 1.0); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002.html
new file mode 100644
index 000000000..a1e9a0127
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsl() syntax accepts comma-less expressions (and comments as separators) and alpha component (and percentage alpha) - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation" />
+    <meta name="assert" content="hsl() should accept comma-less expressions (and comments as separators) and alpha component (and percentage alpha)." />
+    <link rel="match" href="background-color-hsl-002-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: hsl(120, 75%, 50%, 0.2); }
+      #p2 { background-color: hsl(120, 75%, 50%, 40%); }
+      #p3 { background-color: hsl(120 75% 50% / 0.6); }
+      #p4 { background-color: hsl(120 75% 50% / 80%); }
+      #p5 { background-color: hsl(120/* comment */75%/* comment */50%/1.0); }
+      #p6 { background-color: hsl(120/* comment */75%/* comment */50%/100%); }
+      #p7 { background-color: hsl(120,/* comment */75%,/* comment */50%,1.0); }
+      #p8 { background-color: hsl(120,/* comment */75%,/* comment */50%,100%); }
+      #p9 { background-color: hsl(120/* comment */75%/* comment */50%); }
+      #p10 { background-color: hsl(120/* comment */,75%,/* comment */50%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003-ref.html
new file mode 100644
index 000000000..e0db417c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: support <angle> value for hsl()/hsla() hue component - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120, 75%, 50%, 0.2); }
+      #p2 { background-color: hsla(120.0, 75%, 50%, 0.4); }
+      #p3 { background-color: hsla(1.2e2, 75%, 50%, 0.6); }
+      #p4 { background-color: hsla(120, 75%, 50%, 0.8); }
+      #p5 { background-color: hsla(120, 75%, 50%, 1.0); }
+      #p6 { background-color: hsl(240, 75%, 50%); }
+      #p7 { background-color: hsl(600.0, 75%, 50%); }
+      #p8 { background-color: hsl(9.6e2, 75%, 50%); }
+      #p9 { background-color: hsl(600, 75%, 50%); }
+      #p10 { background-color: hsl(240, 75%, 50%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003.html
new file mode 100644
index 000000000..f9c256e17
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: support <angle> value for hsl()/hsla() hue component - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation" />
+    <meta name="assert" content="hsl()/hsla() hue component should support <angle> value." />
+    <link rel="match" href="background-color-hsl-003-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120, 75%, 50%, 0.2); }
+      #p2 { background-color: hsla(120deg, 75%, 50%, 0.4); }
+      #p3 { background-color: hsla(133.33333333grad, 75%, 50%, 0.6); }
+      #p4 { background-color: hsla(2.0943951024rad, 75%, 50%, 0.8); }
+      #p5 { background-color: hsla(0.3333333333turn, 75%, 50%, 1.0); }
+      #p6 { background-color: hsl(240, 75%, 50%); }
+      #p7 { background-color: hsl(600deg, 75%, 50%); }
+      #p8 { background-color: hsl(1066.66666666grad, 75%, 50%); }
+      #p9 { background-color: hsl(10.4719755118rad, 75%, 50%); }
+      #p10 { background-color: hsl(2.6666666666turn, 75%, 50%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004-ref.html
new file mode 100644
index 000000000..f630740fa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsla() and hsl() are aliases of each other - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: hsl(120, 75%, 50%); }
+      #p2 { background-color: hsl(120.0, 75%, 50%); }
+      #p3 { background-color: hsl(1.2e2, 75%, 50%); }
+      #p4 { background-color: hsl(1.2E2, 75%, 50%); }
+      #p5 { background-color: hsl(60, 75%, 50%); }
+      #p6 { background-color: hsla(120, 75%, 50%, 0.2); }
+      #p7 { background-color: hsla(120.0, 75%, 50%, 0.4); }
+      #p8 { background-color: hsla(1.2e2, 75%, 50%, 0.6); }
+      #p9 { background-color: hsla(1.2E2, 75%, 50%, 0.8); }
+      #p10 { background-color: hsla(60.0, 75%, 50%, 1.0); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004.html b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004.html
new file mode 100644
index 000000000..1cd6684c7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-hsl-004.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: hsla() and hsl() are aliases of each other - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation" />
+    <meta name="assert" content="hsla() should have the identical grammar and behavior to hsl()." />
+    <link rel="match" href="background-color-hsl-004-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: hsla(120, 75%, 50%); }
+      #p2 { background-color: hsla(120.0, 75%, 50%); }
+      #p3 { background-color: hsla(1.2e2, 75%, 50%); }
+      #p4 { background-color: hsla(1.2E2, 75%, 50%); }
+      #p5 { background-color: hsla(60, 75%, 50%); }
+      #p6 { background-color: hsl(120, 75%, 50%, 0.2); }
+      #p7 { background-color: hsl(120.0, 75%, 50%, 0.4); }
+      #p8 { background-color: hsl(1.2e2, 75%, 50%, 0.6); }
+      #p9 { background-color: hsl(1.2E2, 75%, 50%, 0.8); }
+      #p10 { background-color: hsl(60.0, 75%, 50%, 1.0); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001-ref.html
new file mode 100644
index 000000000..b03f0a3fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgb() syntax accepts alpha component (and percentage alpha value), non-integer components and comma-less expressions (and comments as separators) - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: rgba(10%, 60%, 10%, 0.2); }
+      #p2 { background-color: rgba(10, 175, 10, 0.4); }
+      #p3 { background-color: rgba(10, 175, 10, 0.6); }
+      #p4 { background-color: rgba(10, 175, 10, 0.8); }
+      #p5 { background-color: rgba(10, 175, 10, 1.0); }
+      #p6 { background-color: rgba(10, 150, 50, 1.0); }
+      #p7 { background-color: rgba(10%, 60%, 10%, 1.0); }
+      #p8 { background-color: rgb(10, 100, 100); }
+      #p9 { background-color: rgb(10, 75, 125); }
+      #p10 { background-color: rgb(10, 50, 150); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001.html
new file mode 100644
index 000000000..061eeac2f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgb() syntax accepts alpha component (and percentage alpha value), non-integer components and comma-less expressions (and comments as separators) - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions" />
+    <meta name="assert" content="rgb() should accept alpha component (and percentage alpha value), non-integer components and comma-less expressions (and comments as separators)." />
+    <link rel="match" href="background-color-rgb-001-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: rgb(10%, 60%, 10%, 20%); }
+      #p2 { background-color: rgb(10, 175, 10, 0.4); }
+      #p3 { background-color: rgb(10 175 10 / 60%); }
+      #p4 { background-color: rgb(10.0 175.0 10.0 / 0.8); }
+      #p5 { background-color: rgb(10/* comment */175/* comment */10/100%); }
+      #p6 { background-color: rgb(10,/* comment */150,/* comment */50); }
+      #p7 { background-color: rgb(10%, 60%, 10%); }
+      #p8 { background-color: rgb(10.0 100.0 100.0); }
+      #p9 { background-color: rgb(10/* comment */75/* comment */125); }
+      #p10 { background-color: rgb(10.0, 50.0, 150.0); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002-ref.html
new file mode 100644
index 000000000..be29c86ca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgba() syntax accepts non-integer components, comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: rgba(10, 175, 10, 0.2); }
+      #p2 { background-color: rgba(10, 175, 10, 0.4); }
+      #p3 { background-color: rgba(10%, 75%, 10%, 0.6); }
+      #p4 { background-color: rgba(10, 175, 10, 0.8); }
+      #p5 { background-color: rgb(10, 175, 10); }
+      #p6 { background-color: rgb(10, 150, 50); }
+      #p7 { background-color: rgb(10, 125, 75); }
+      #p8 { background-color: rgb(10%, 45%, 45%); }
+      #p9 { background-color: rgb(10, 75, 125); }
+      #p10 { background-color: rgb(10, 50, 150); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002.html
new file mode 100644
index 000000000..8919f0ea3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgba() syntax accepts non-integer components, comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions" />
+    <meta name="assert" content="rgba() should accept non-integer components, comma-less expressions (and comments as separators), percentage alpha and omitting of alpha." />
+    <link rel="match" href="background-color-rgb-002-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: rgba(10.0, 175.0, 10.0, 0.2); }
+      #p2 { background-color: rgba(10, 175, 10, 40%); }
+      #p3 { background-color: rgba(10% 75% 10% / 0.6); }
+      #p4 { background-color: rgba(10 175 10 / 80%); }
+      #p5 { background-color: rgba(10/* comment */175/* comment */10/100%); }
+      #p6 { background-color: rgba(10,/* comment */150,/* comment */50); }
+      #p7 { background-color: rgba(10.0, 125.0, 75.0); }
+      #p8 { background-color: rgba(10%, 45%, 45%); }
+      #p9 { background-color: rgba(10/* comment */75/* comment */125); }
+      #p10 { background-color: rgba(10.0, 50.0, 150.0); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003-ref.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003-ref.html
new file mode 100644
index 000000000..70227ad38
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgb() and rgba() are aliases of each other - ref</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <style type="text/css">
+      #p1 { background-color: rgba(10, 175, 10, 0.2); }
+      #p2 { background-color: rgba(10, 175, 10, 0.4); }
+      #p3 { background-color: rgba(10, 175, 10, 0.6); }
+      #p4 { background-color: rgba(10%, 70%, 10%, 0.8); }
+      #p5 { background-color: rgba(10%, 70%, 10%, 1.0); }
+      #p6 { background-color: rgb(10, 150, 50); }
+      #p7 { background-color: rgb(10, 125, 75); }
+      #p8 { background-color: rgb(10%,40%, 40%); }
+      #p9 { background-color: rgb(10%, 45%, 50%); }
+      #p10 { background-color: rgb(10%, 50%, 60%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003.html b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003.html
new file mode 100644
index 000000000..6a22ba0db
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/background-color-rgb-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS-Color-4: rgb() and rgba() are aliases of each other - test</title>
+    <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" />
+    <link rel="author" title="Mozilla" href="http://www.mozilla.org/" />
+    <link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions" />
+    <meta name="assert" content="rgb() should have the identical grammar and behavior to rgba()." />
+    <link rel="match" href="background-color-rgb-003-ref.html" />
+    <style type="text/css">
+      #p1 { background-color: rgb(10, 175, 10, 0.2); }
+      #p2 { background-color: rgb(10, 175, 10, 0.4); }
+      #p3 { background-color: rgb(10, 175, 10, 0.6); }
+      #p4 { background-color: rgb(10%, 70%, 10%, 0.8); }
+      #p5 { background-color: rgb(10%, 70%, 10%, 1.0); }
+      #p6 { background-color: rgba(10, 150, 50); }
+      #p7 { background-color: rgba(10, 125, 75); }
+      #p8 { background-color: rgba(10%,40%, 40%); }
+      #p9 { background-color: rgba(10%, 45%, 50%); }
+      #p10 { background-color: rgba(10%, 50%, 60%); }
+    </style>
+  </head>
+  <body>
+    <p id="p1">color</p>
+    <p id="p2">color</p>
+    <p id="p3">color</p>
+    <p id="p4">color</p>
+    <p id="p5">color</p>
+    <p id="p6">color</p>
+    <p id="p7">color</p>
+    <p id="p8">color</p>
+    <p id="p9">color</p>
+    <p id="p10">color</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/color4/reftest-stylo.list b/layout/reftests/w3c-css/submitted/color4/reftest-stylo.list
new file mode 100644
index 000000000..6299bfb24
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/reftest-stylo.list
@@ -0,0 +1,15 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+
+# This file was created in bug 1295456. Pretty sure they all fail with Stylo
+# since it doesn't implement css-color-4 yet.
+
+#css-color-4 function
+#hsl
+fails == background-color-hsl-001.html background-color-hsl-001-ref.html
+fails == background-color-hsl-002.html background-color-hsl-002-ref.html
+fails == background-color-hsl-003.html background-color-hsl-003-ref.html
+fails == background-color-hsl-004.html background-color-hsl-004-ref.html
+#rgb
+fails == background-color-rgb-001.html background-color-rgb-001-ref.html
+fails == background-color-rgb-002.html background-color-rgb-002-ref.html
+fails == background-color-rgb-003.html background-color-rgb-003-ref.html
diff --git a/layout/reftests/w3c-css/submitted/color4/reftest.list b/layout/reftests/w3c-css/submitted/color4/reftest.list
new file mode 100644
index 000000000..34f8d2570
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/color4/reftest.list
@@ -0,0 +1,10 @@
+#css-color-4 function
+#hsl
+== background-color-hsl-001.html background-color-hsl-001-ref.html
+== background-color-hsl-002.html background-color-hsl-002-ref.html
+== background-color-hsl-003.html background-color-hsl-003-ref.html
+== background-color-hsl-004.html background-color-hsl-004-ref.html
+#rgb
+== background-color-rgb-001.html background-color-rgb-001-ref.html
+== background-color-rgb-002.html background-color-rgb-002-ref.html
+== background-color-rgb-003.html background-color-rgb-003-ref.html
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-001.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-001.xht
new file mode 100644
index 000000000..3f8782580
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-001.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports rule condition with a single, valid property declaration for a supported property must cause the rules inside the @supports rule to apply."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (color: green) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-002.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-002.xht
new file mode 100644
index 000000000..48326acb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-002.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with invalid syntax must not apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="invalid" />
+  <meta name="assert" content="Property declarations in an @supports rule condition must be surrounded by parentheses."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports color: green {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-003.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-003.xht
new file mode 100644
index 000000000..4e01f5369
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-003.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="Any subexpression in an @supports rule condition can be surrounded by an extra pair of parentheses."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports ((color: green)) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-004.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-004.xht
new file mode 100644
index 000000000..7c4ad818b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-004.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="Property declarations in an @supports rule can have !important specified."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (color: green !important) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-005.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-005.xht
new file mode 100644
index 000000000..c184d70df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-005.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A supported property with an unsupported value must cause the @supports condition to fail."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports (color: rainbow) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-006.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-006.xht
new file mode 100644
index 000000000..faf8f68f6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-006.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A disjunction of two @supports conditions must cause the @supports condition to pass if the left condition passes."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (color: rainbow) or (color: green) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-007.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-007.xht
new file mode 100644
index 000000000..716b15232
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-007.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A disjunction of two @supports conditions must cause the @supports condition to pass if the right condition passes."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (color: green) or (color: rainbow) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-008.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-008.xht
new file mode 100644
index 000000000..80596a9d4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-008.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A conjunction of two @supports conditions must cause the @supports condition to pass if both sub-conditions pass."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (color: green) and (color: blue) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-009.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-009.xht
new file mode 100644
index 000000000..31fffbe71
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-009.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A conjunction of two @supports conditions must cause the @supports condition to fail if the left sub-condition passes."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports (color: rainbow) and (color: blue) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-010.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-010.xht
new file mode 100644
index 000000000..17b8810f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-010.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A conjunction of two @supports conditions must cause the @supports condition to fail if the right sub-condition passes."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports (color: blue) and (color: rainbow) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-011.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-011.xht
new file mode 100644
index 000000000..d70cc0054
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-011.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A disjunction of three @supports conditions must cause the @supports condition to pass if at least one of the sub-conditions passes."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (color: rainbow) or (color: iridescent) or (color: green) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-012.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-012.xht
new file mode 100644
index 000000000..c9ff483a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-012.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A conjunction of three @supports conditions must cause the @supports condition to pass if all three sub-conditions pass."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (color: red) and (color: green) and (color: blue) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-013.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-013.xht
new file mode 100644
index 000000000..2c0b62e61
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-013.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with invalid syntax must not apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="invalid" />
+  <meta name="assert" content="A disjunction and a conjunction of @supports conditions must not be combined unless one of the two is surrounded by parentheses."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports (color: green) and (color: green) or (color: green) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-014.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-014.xht
new file mode 100644
index 000000000..90c3bb4e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-014.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with invalid syntax must not apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="invalid" />
+  <meta name="assert" content="A disjunction and a conjunction of @supports conditions must not be combined unless one of the two is surrounded by parentheses."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports (color: green) or (color: green) and (color: green) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-015.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-015.xht
new file mode 100644
index 000000000..66c7edbe5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-015.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="There need not be any white space between the '@supports' and open brace of the rule set, nor between a declaration's property name and value."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports(color:green){
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-016.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-016.xht
new file mode 100644
index 000000000..bad605313
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-016.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A negation of an @supports condition must pass if and only if the sub-condition fails.  The sub-condition here is a supported property name with an unsupported value."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports not (color: rainbow) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-017.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-017.xht
new file mode 100644
index 000000000..92b8d04e7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-017.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with invalid syntax must not apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="invalid" />
+  <meta name="assert" content="The sub-condition of a negation in an @supports condition must be in parentheses."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports not not (color: green) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-018.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-018.xht
new file mode 100644
index 000000000..2019a2a7c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-018.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="The sub-condition of a negation in an @supports condition must be in parentheses."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports not (not (color: green)) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-019.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-019.xht
new file mode 100644
index 000000000..109c8528b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-019.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with invalid syntax must not apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="invalid" />
+  <meta name="assert" content="A conjunction in an @supports condition must have both sub-conditions enclosed in parentheses."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports not (color: rainbow) and not (color: iridescent) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-020.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-020.xht
new file mode 100644
index 000000000..e6d5a1111
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-020.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports condition that is a declaration with a supported property name with an unsupported value must fail."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports (unknown: green) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-021.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-021.xht
new file mode 100644
index 000000000..df98d1206
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-021.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax but a failing condition must not apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A disjunction of two @supports conditions must cause the @supports condition to pass if one condition passes and the other fails due to being an unsupported property."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (unknown: green) or (color: green) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-022.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-022.xht
new file mode 100644
index 000000000..b2fb5ed27
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-022.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with balanced invalid syntax within parentheses must evaluate to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports condition must successfully parse even if a declaration has an empty property value."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: red }
+    @supports (unknown:) or (color: green) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-023.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-023.xht
new file mode 100644
index 000000000..e01f01842
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-023.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with balanced invalid syntax within parentheses must evaluate to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: red }
+    @supports (unknown) or (color: green) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-024.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-024.xht
new file mode 100644
index 000000000..de2baf395
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-024.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A supported shorthand property declaration must be considered to pass."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (font: 16px serif) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-025.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-025.xht
new file mode 100644
index 000000000..7a766146e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-025.xht
@@ -0,0 +1,20 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: A nested @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An inner @supports rule inside an outer @supports must apply its child rules only if both @supports conditions succeeded."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (color: green) {
+      @supports (color: blue) {
+        html { background-color: green }
+      }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-026.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-026.xht
new file mode 100644
index 000000000..920143e79
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-026.xht
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: A nested @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An outer @supports rule with an inner @media rule must apply the rules inside the @media only if both the @supports and @media conditions pass."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (color: green) {
+      @media all {
+        html { background-color: green }
+      }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-027.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-027.xht
new file mode 100644
index 000000000..b3d8349e9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-027.xht
@@ -0,0 +1,21 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: A nested @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-document" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An outer @document rule with an inner @supports rule must apply the rules inside the @supports only if both the @supports and @document conditions pass."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @-moz-document url-prefix("") {
+      @supports (color: green) {
+        html { background-color: green }
+      }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-028.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-028.xht
new file mode 100644
index 000000000..dd506dfcd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-028.xht
@@ -0,0 +1,20 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: A nested @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An inner @document rule with an outer @supports rule must apply the rules inside the @document only if both the @supports and @document conditions pass."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports (color: green) {
+      @-moz-document url-prefix("") {
+        html { background-color: green }
+      }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-029.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-029.xht
new file mode 100644
index 000000000..0d1bb589a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-029.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A disjunction in an @supports condition must have both sub-conditions enclosed in parentheses." />
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports not (color: rainbow) or (color: green) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-030.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-030.xht
new file mode 100644
index 000000000..6c087b8b0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-030.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="A disjunction in an @supports condition must have both sub-conditions enclosed in parentheses." />
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports (not (color: rainbow) or (color: green)) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-031.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-031.xht
new file mode 100644
index 000000000..9ff7c14c4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-031.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with balanced invalid syntax within parentheses must evaluate to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: red }
+    @supports (color:) or (color: green) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-032.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-032.xht
new file mode 100644
index 000000000..baae56576
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-032.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with balanced invalid syntax must evaluate to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports condition must successfully parse and evaluate to false a parenthesized expression has invalid syntax."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: red }
+    @supports not (@page) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-033.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-033.xht
new file mode 100644
index 000000000..c6c0c39f3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-033.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with balanced invalid syntax must evaluate to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: red }
+    @supports not ({ something @with [ balanced ] parens }) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-034.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-034.xht
new file mode 100644
index 000000000..c6c0c39f3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-034.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with balanced invalid syntax must evaluate to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports condition must successfully parse a parenthesized expression that has invalid syntax with balanced parentheses."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: red }
+    @supports not ({ something @with [ balanced ] parens }) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-035.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-035.xht
new file mode 100644
index 000000000..471a71513
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-035.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with unbalanced invalid syntax must fail to parse</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="invalid" />
+  <meta name="assert" content="An @supports condition with a parenthesized expression that has unbalanced parentheses must fail to parse."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports not ({ something @with (unbalanced parens }) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-036.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-036.xht
new file mode 100644
index 000000000..c18ba6629
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-036.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with an unrecognized condition using functional notation must evaluate to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports condition with an unrecognized condition using functional notation must evaluate to false."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: red }
+    @supports an-extension(of some kind) or (color: green) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-037.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-037.xht
new file mode 100644
index 000000000..137be1b59
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-037.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule with an unrecognized condition using functional notation with unbalanced parentheses must fail to parse</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="invalid" />
+  <meta name="assert" content="An @supports condition with an unrecognized condition using functional notation with unbalanced parentheses must fail to parse."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports (color: green) or an-extension(that is [unbalanced) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-038.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-038.xht
new file mode 100644
index 000000000..f6974a9b0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-038.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: In an @supports rule "not(" must be parsed as a FUNCTION</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports condition with 'not(' must parse be parsed as a FUNCTION token."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports not(unknown: unknown) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-039.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-039.xht
new file mode 100644
index 000000000..1032263b1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-039.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: In an @supports rule "or(" must be parsed as a FUNCTION</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="invalid" />
+  <meta name="assert" content="An @supports condition with 'or(' must parse be parsed as a FUNCTION token."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: green }
+    @supports (color: green) or(color: blue) {
+      html { background-color: red }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-040.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-040.xht
new file mode 100644
index 000000000..cda404996
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-040.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule condition with empty parentheses should evaluates to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports rule condition that consists just of a pair of parentheses should evaluate to false."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports not () {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-041.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-041.xht
new file mode 100644
index 000000000..c49c66abd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-041.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule condition with empty parentheses should evaluates to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports rule condition that consists just of a pair of parentheses should evaluate to false."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports () or (color: green) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-042.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-042.xht
new file mode 100644
index 000000000..2b0f104d6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-042.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule condition with an unexpected token before the closing paren of a supports_condition_in_parens should parse as a general_enclosed</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports rule condition that has an unexpected token before the closing paren of a supports_condition_in_parens should parse as a general_enclosed and evaluate to false rather than fail to parse."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @supports ((color: green) bad) or (color: green) {
+      html { background-color: green }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-043.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-043.xht
new file mode 100644
index 000000000..3ec6f8ec2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-043.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule condition with a bogus priority should evaluate to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports rule condition with a bogus priority should evaluate to false"/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: red; }
+    @supports not (color: green !bogus) {
+      html { background-color: green; }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-044.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-044.xht
new file mode 100644
index 000000000..f79e25d18
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-044.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule condition with tokens after the priority should evaluate to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports rule condition with tokens after the priority should evaluate to false"/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: red; }
+    @supports not (color: green !important green) {
+      html { background-color: green; }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-045.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-045.xht
new file mode 100644
index 000000000..e7bb2d46c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-045.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: An @supports rule condition with two priorities should evaluate to false</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An @supports rule condition with two priorities should evaluate to false"/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    html { background-color: red; }
+    @supports not (color: green !important !important) {
+      html { background-color: green; }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/css-supports-046.xht b/layout/reftests/w3c-css/submitted/conditional3/css-supports-046.xht
new file mode 100644
index 000000000..3cd590059
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/css-supports-046.xht
@@ -0,0 +1,22 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: A nested @supports rule with valid syntax and a passing condition must apply rules inside it</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au" />
+  <link rel="author" title="L. David Baron" href="mailto:dbaron@dbaron.org" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-supports" />
+  <link rel="help" href="http://www.w3.org/TR/css3-conditional/#at-media" />
+  <meta name="flags" content="" />
+  <meta name="assert" content="An outer @media rule with an inner @supports rule must apply the rules inside the @supports only if both the @supports and @media conditions pass."/>
+  <link rel="match" href="support/pass.xht" />
+  <style type="text/css"><![CDATA[
+    @media all {
+      @supports (color: green) {
+        html { background-color: green }
+      }
+    }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/conditional3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/conditional3/reftest-stylo.list
new file mode 100644
index 000000000..b357a920f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/reftest-stylo.list
@@ -0,0 +1,47 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== css-supports-001.xht css-supports-001.xht
+== css-supports-002.xht css-supports-002.xht
+== css-supports-003.xht css-supports-003.xht
+== css-supports-004.xht css-supports-004.xht
+== css-supports-005.xht css-supports-005.xht
+== css-supports-006.xht css-supports-006.xht
+== css-supports-007.xht css-supports-007.xht
+== css-supports-008.xht css-supports-008.xht
+== css-supports-009.xht css-supports-009.xht
+== css-supports-010.xht css-supports-010.xht
+== css-supports-011.xht css-supports-011.xht
+== css-supports-012.xht css-supports-012.xht
+== css-supports-013.xht css-supports-013.xht
+== css-supports-014.xht css-supports-014.xht
+== css-supports-015.xht css-supports-015.xht
+== css-supports-016.xht css-supports-016.xht
+== css-supports-017.xht css-supports-017.xht
+== css-supports-018.xht css-supports-018.xht
+== css-supports-019.xht css-supports-019.xht
+== css-supports-020.xht css-supports-020.xht
+== css-supports-021.xht css-supports-021.xht
+== css-supports-022.xht css-supports-022.xht
+== css-supports-023.xht css-supports-023.xht
+== css-supports-024.xht css-supports-024.xht
+== css-supports-025.xht css-supports-025.xht
+== css-supports-026.xht css-supports-026.xht
+== css-supports-027.xht css-supports-027.xht
+== css-supports-028.xht css-supports-028.xht
+== css-supports-029.xht css-supports-029.xht
+== css-supports-030.xht css-supports-030.xht
+== css-supports-031.xht css-supports-031.xht
+== css-supports-032.xht css-supports-032.xht
+== css-supports-033.xht css-supports-033.xht
+== css-supports-034.xht css-supports-034.xht
+== css-supports-035.xht css-supports-035.xht
+== css-supports-036.xht css-supports-036.xht
+== css-supports-037.xht css-supports-037.xht
+== css-supports-038.xht css-supports-038.xht
+== css-supports-039.xht css-supports-039.xht
+== css-supports-040.xht css-supports-040.xht
+== css-supports-041.xht css-supports-041.xht
+== css-supports-042.xht css-supports-042.xht
+skip == css-supports-043.xht css-supports-043.xht
+== css-supports-044.xht css-supports-044.xht
+== css-supports-045.xht css-supports-045.xht
+== css-supports-046.xht css-supports-046.xht
diff --git a/layout/reftests/w3c-css/submitted/conditional3/reftest.list b/layout/reftests/w3c-css/submitted/conditional3/reftest.list
new file mode 100644
index 000000000..f10bede79
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/reftest.list
@@ -0,0 +1,46 @@
+== css-supports-001.xht support/pass.xht
+== css-supports-002.xht support/pass.xht
+== css-supports-003.xht support/pass.xht
+== css-supports-004.xht support/pass.xht
+== css-supports-005.xht support/pass.xht
+== css-supports-006.xht support/pass.xht
+== css-supports-007.xht support/pass.xht
+== css-supports-008.xht support/pass.xht
+== css-supports-009.xht support/pass.xht
+== css-supports-010.xht support/pass.xht
+== css-supports-011.xht support/pass.xht
+== css-supports-012.xht support/pass.xht
+== css-supports-013.xht support/pass.xht
+== css-supports-014.xht support/pass.xht
+== css-supports-015.xht support/pass.xht
+== css-supports-016.xht support/pass.xht
+== css-supports-017.xht support/pass.xht
+== css-supports-018.xht support/pass.xht
+== css-supports-019.xht support/pass.xht
+== css-supports-020.xht support/pass.xht
+== css-supports-021.xht support/pass.xht
+== css-supports-022.xht support/pass.xht
+== css-supports-023.xht support/pass.xht
+== css-supports-024.xht support/pass.xht
+== css-supports-025.xht support/pass.xht
+== css-supports-026.xht support/pass.xht
+== css-supports-027.xht support/pass.xht
+== css-supports-028.xht support/pass.xht
+== css-supports-029.xht support/pass.xht
+== css-supports-030.xht support/pass.xht
+== css-supports-031.xht support/pass.xht
+== css-supports-032.xht support/pass.xht
+== css-supports-033.xht support/pass.xht
+== css-supports-034.xht support/pass.xht
+== css-supports-035.xht support/pass.xht
+== css-supports-036.xht support/pass.xht
+== css-supports-037.xht support/pass.xht
+== css-supports-038.xht support/pass.xht
+== css-supports-039.xht support/pass.xht
+== css-supports-040.xht support/pass.xht
+== css-supports-041.xht support/pass.xht
+== css-supports-042.xht support/pass.xht
+== css-supports-043.xht support/pass.xht
+== css-supports-044.xht support/pass.xht
+== css-supports-045.xht support/pass.xht
+== css-supports-046.xht support/pass.xht
diff --git a/layout/reftests/w3c-css/submitted/conditional3/support/pass.xht b/layout/reftests/w3c-css/submitted/conditional3/support/pass.xht
new file mode 100644
index 000000000..24dc3107e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/conditional3/support/pass.xht
@@ -0,0 +1,12 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"/>
+  <style type="text/css"><![CDATA[
+   html { background-color: green }
+  ]]></style>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001-ref.html
new file mode 100644
index 000000000..9cffaf9a3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  #a {
+      width: 150px;
+      height: 150px;
+      background: green;
+      margin: 25px;
+  }
+  </style>
+</head>
+<body>
+  <div id="a"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001.html
new file mode 100644
index 000000000..cda70052d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001.html
@@ -0,0 +1,71 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' with various overflowing block descendants.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+  <link rel="match" href="contain-paint-clip-001-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  .root {
+    contain: paint;
+    width: 100px;
+    height: 100px;
+    background: green;
+    margin: 25px;
+    padding: 25px;
+  }
+  .a {
+    width: 100px;
+    height: 200px;
+    background: red;
+  }
+  .b {
+    width: 150px;
+    height: 150px;
+    background: green;
+    position: relative;
+    top: -25px;
+    left: -25px;
+  }
+  .c {
+    width: 100px;
+    height: 100px;
+    background: red;
+  }
+  .background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200px;
+    height: 200px;
+    background: red;
+    z-index: -1;
+  }
+  .foreground {
+    position: absolute;
+    top: -25px;
+    left: -25px;
+    width: 150px;
+    height: 150px;
+    border: 25px solid red;
+    z-index: 1;
+  }
+  </style>
+</head>
+<body>
+  <div class="root">
+    <div class="a">
+      <div class="b"></div>
+      <!--These two absolutely positioned elements are checking that all sides are-->
+      <!--clipped.  They also test that clipping is done correctly on absolutely-->
+      <!--positioned elements.-->
+      <div class="background"></div>
+      <div class="foreground"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002-ref.html
new file mode 100644
index 000000000..99e035476
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  .root {
+    overflow: hidden;
+    width: 100px;
+    height: 100px;
+    background: green;
+    margin: 25px;
+    padding: 25px;
+  }
+  </style>
+</head>
+<body>
+  <div class="root">
+    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+    ligula in libero.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002.html
new file mode 100644
index 000000000..b5c9e340b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' with overflowing text contents.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+  <link rel="match" href="contain-paint-clip-002-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  .root {
+    contain: paint;
+    width: 100px;
+    height: 100px;
+    background: green;
+    margin: 25px;
+    padding: 25px;
+  }
+  </style>
+</head>
+<body>
+  <div class="root">
+    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+    ligula in libero.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003-ref.html
new file mode 100644
index 000000000..34e79489a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  .root {
+    overflow-x: scroll;
+    overflow-y: scroll;
+    width: 100px;
+    height: 100px;
+    background: green;
+    margin: 25px;
+    padding: 25px;
+  }
+  </style>
+</head>
+<body>
+  <div class="root">
+    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+    ligula in libero.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003.html
new file mode 100644
index 000000000..e02dae14f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' with overflowing text contents, and 'overflow-y: scroll'.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+  <link rel="match" href="contain-paint-clip-003-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  .root {
+    contain: paint;
+    overflow-y: scroll;
+    width: 100px;
+    height: 100px;
+    background: green;
+    margin: 25px;
+    padding: 25px;
+  }
+  </style>
+</head>
+<body>
+  <div class="root">
+    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+    ligula in libero.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004-ref.html
new file mode 100644
index 000000000..4eda898ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  .root {
+    overflow-y: scroll;
+    overflow-x: scroll;
+    width: 100px;
+    height: 100px;
+    background: green;
+    margin: 25px;
+    padding: 25px;
+  }
+  </style>
+</head>
+<body>
+  <div class="root">
+    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+    ligula in libero.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004.html
new file mode 100644
index 000000000..e3ed25476
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' with overflowing text contents, and 'overflow-x: scroll'.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+  <link rel="match" href="contain-paint-clip-004-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  .root {
+    contain: paint;
+    overflow-x: scroll;
+    width: 100px;
+    height: 100px;
+    background: green;
+    margin: 25px;
+    padding: 25px;
+  }
+  </style>
+</head>
+<body>
+  <div class="root">
+    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+    be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+    elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+    nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+    Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+    Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+    torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+    ligula in libero.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-005.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-005.html
new file mode 100644
index 000000000..dc9220264
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-005.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' on li with overflowing text contents and
+    bullet, and 'overflow-y: scroll'.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+  <link rel="match" href="contain-paint-clip-003-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  ul {
+    padding: 0;
+  }
+  .root {
+    contain: paint;
+    overflow-y: scroll;
+    width: 100px;
+    height: 100px;
+    background: green;
+    margin: 25px;
+    padding: 25px;
+  }
+  </style>
+</head>
+<body>
+  <ul>
+    <li class="root">
+      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+      be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
+      Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
+      ipsum.  Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris
+      massa.  Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu
+      ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur
+      sodales ligula in libero.
+    </li>
+  </ul>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001-ref.html
new file mode 100644
index 000000000..422706802
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  #a {
+      width: 100px;
+      height: 100px;
+      background: green;
+      margin: 50px;
+  }
+  </style>
+</head>
+<body>
+  <div id="a"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001.html
new file mode 100644
index 000000000..fc04df008
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' element should contain absolute position elements.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+  <link rel="match" href="contain-paint-containing-block-absolute-001-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  #a {
+      contain: paint;
+      width: 100px;
+      height: 100px;
+      background: red;
+      margin: 50px;
+  }
+  #b {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div>
+      <div id="b"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001-ref.html
new file mode 100644
index 000000000..422706802
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  #a {
+      width: 100px;
+      height: 100px;
+      background: green;
+      margin: 50px;
+  }
+  </style>
+</head>
+<body>
+  <div id="a"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001.html
new file mode 100644
index 000000000..60f180bea
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' element should contain fixed position elements.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+  <link rel="match" href="contain-paint-containing-block-fixed-001-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  #a {
+      contain: paint;
+      width: 100px;
+      height: 100px;
+      background: red;
+      margin: 50px;
+  }
+  #b {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div>
+      <div id="b"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001-ref.html
new file mode 100644
index 000000000..5a70a21c1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  #left {
+    float: left;
+    height: 50px;
+    width: 10px;
+    background: blue;
+  }
+  #a {
+    background: green;
+    margin: 10px;
+    width: 50px;
+    height: 50px;
+  }
+  </style>
+</head>
+<body>
+  <div id="left"></div>
+  <div id="a"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001.html
new file mode 100644
index 000000000..06a59f2e5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' should contain floats as a formatting context.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+  <link rel="match" href="contain-paint-formatting-context-float-001-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  #left {
+    float: left;
+    height: 50px;
+    width: 10px;
+    background: blue;
+  }
+  #a {
+    contain: paint;
+    background: red;
+    margin: 10px;
+    width: 50px;
+    height: 50px;
+  }
+  #b {
+    clear: left;
+    width: 50px;
+    height: 50px;
+    background: green;
+  }
+  </style>
+</head>
+<body>
+  <div id="left"></div>
+  <div id="a">
+    <div id="b"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001-ref.html
new file mode 100644
index 000000000..6dde7bc90
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Test</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  body {
+    margin: 0;
+  }
+  #a {
+      background: blue;
+      margin: 10px;
+      width: 50px;
+      height: 50px;
+  }
+  #b {
+      width: 50px;
+      height: 40px;
+      background: green;
+  }
+  #b-padding {
+      height: 10px;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div id="b-padding"></div>
+    <div id="b"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001.html
new file mode 100644
index 000000000..fdc0bb7f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' with a vertical margin child. Margin collapse should not occur.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+  <link rel="match" href="contain-paint-formatting-context-margin-001-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  #a {
+      contain: paint;
+      background: blue;
+      margin: 10px;
+      width: 50px;
+      height: 50px;
+  }
+  #b {
+      width: 50px;
+      height: 40px;
+      background: green;
+      margin-top: 10px;
+  }
+  #c {
+      background: red;
+      width: 50px;
+      height: 10px;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div id="b"></div>
+    <div id="c"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/reftest-stylo.list b/layout/reftests/w3c-css/submitted/contain/reftest-stylo.list
new file mode 100644
index 000000000..3e54d34d8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/reftest-stylo.list
@@ -0,0 +1,12 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+default-preferences pref(layout.css.contain.enabled,true)
+
+== contain-paint-clip-001.html contain-paint-clip-001.html
+== contain-paint-clip-002.html contain-paint-clip-002.html
+== contain-paint-clip-003.html contain-paint-clip-003.html
+== contain-paint-clip-004.html contain-paint-clip-004.html
+random == contain-paint-clip-005.html contain-paint-clip-005.html
+== contain-paint-containing-block-absolute-001.html contain-paint-containing-block-absolute-001.html
+== contain-paint-containing-block-fixed-001.html contain-paint-containing-block-fixed-001.html
+== contain-paint-formatting-context-float-001.html contain-paint-formatting-context-float-001.html
+== contain-paint-formatting-context-margin-001.html contain-paint-formatting-context-margin-001.html
diff --git a/layout/reftests/w3c-css/submitted/contain/reftest.list b/layout/reftests/w3c-css/submitted/contain/reftest.list
new file mode 100644
index 000000000..5326e86a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/reftest.list
@@ -0,0 +1,11 @@
+default-preferences pref(layout.css.contain.enabled,true)
+
+== contain-paint-clip-001.html contain-paint-clip-001-ref.html
+== contain-paint-clip-002.html contain-paint-clip-002-ref.html
+== contain-paint-clip-003.html contain-paint-clip-003-ref.html
+== contain-paint-clip-004.html contain-paint-clip-004-ref.html
+== contain-paint-clip-005.html contain-paint-clip-003-ref.html
+== contain-paint-containing-block-absolute-001.html contain-paint-containing-block-absolute-001-ref.html
+== contain-paint-containing-block-fixed-001.html contain-paint-containing-block-fixed-001-ref.html
+== contain-paint-formatting-context-float-001.html contain-paint-formatting-context-float-001-ref.html
+== contain-paint-formatting-context-margin-001.html contain-paint-formatting-context-margin-001-ref.html
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-1.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-1.html
new file mode 100644
index 000000000..530a353c7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; page-break-before:always; }
+</style>
+</head>
+<body>
+<p>1</p>
+<div class="test"><p>2</p><p>3</p></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-10.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-10.html
new file mode 100644
index 000000000..b096c9f74
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-10.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<p>1</p>
+<div class="test"><div style="page-break-inside:auto"><p>2</p><p>3</p></div></div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-11.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-11.html
new file mode 100644
index 000000000..ac867b276
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-11.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<p>1</p>
+<div class="test"><table cellpadding="0" cellspacing="0"><tr><td><p>2</p><p>3</p></td></tr></table></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-12.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-12.html
new file mode 100644
index 000000000..96a190e95
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-12.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<div class="test">
+<p>1</p>
+<div class="test"><p>2</p><p>3</p></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-13.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-13.html
new file mode 100644
index 000000000..bcd45e091
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-13.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-8-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+Text
+<div class="test">
+<p>1</p>
+<div class="test"><p>2</p><p>3</p></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-14-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-14-ref.html
new file mode 100644
index 000000000..12f2a3db6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-14-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-before:always; height:1.5in; }
+</style>
+</head>
+<body>
+<p>1</p>
+<p class="test">2</p>
+<p class="test">3</p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-14.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-14.html
new file mode 100644
index 000000000..ba5e5f175
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-14.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-14-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; height:1.5in; }
+</style>
+</head>
+<body>
+<p>1</p>
+<p class="test">2</p>
+<p class="test">3</p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-15-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-15-ref.html
new file mode 100644
index 000000000..856c3fb50
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-15-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-before:always; height:2.5in; }
+</style>
+</head>
+<body>
+<p>1</p>
+<p class="test">2</p>
+<p class="test">4</p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-15.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-15.html
new file mode 100644
index 000000000..7b8e95894
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-15.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-15-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; height:2.5in; }
+</style>
+</head>
+<body>
+<p>1</p>
+<p class="test">2</p>
+<p class="test">4</p>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-2.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-2.html
new file mode 100644
index 000000000..b5a8d0f92
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<div class="test"><p>1</p></div>
+<div class="test"><p>2</p><p>3</p></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-3.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-3.html
new file mode 100644
index 000000000..f18a344e6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-3.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<div class="test"><p>1</p></div>
+<div class="test"><div><div><div><p>2</p><p>3</p></div></div></div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-4.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-4.html
new file mode 100644
index 000000000..a69ea4cd6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-4.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<div class="test"><p>1</p></div>
+<div><div><div class="test"><p>2</p><p>3</p></div></div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-5.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-5.html
new file mode 100644
index 000000000..944d3c12e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-5.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<div class="test"><p>1</p></div>
+<div class="test"><div class="test"><div class="test"><p>2</p><p>3</p></div></div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-6.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-6.html
new file mode 100644
index 000000000..8108b444c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-6.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; overflow:hidden; }
+</style>
+</head>
+<body>
+<p>1</p>
+<div class="test"><p>2</p><p>3</p></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-7.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-7.html
new file mode 100644
index 000000000..0f35edb7c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-7.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; overflow:hidden; }
+</style>
+</head>
+<body>
+<div class="test">
+<p>1</p>
+<div class="test"><p>2</p><p>3</p></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-8-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-8-ref.html
new file mode 100644
index 000000000..bf31a0b71
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-8-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+
+</style>
+</head>
+<body>
+Text
+<div>
+<p style="page-break-before:always">1</p>
+<div style="page-break-before:always"><p>2</p><p>3</p></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-8.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-8.html
new file mode 100644
index 000000000..77d9e3406
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-8.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-8-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; overflow:hidden; }
+</style>
+</head>
+<body>
+Text
+<div class="test">
+<p>1</p>
+<div class="test"><p>2</p><p>3</p></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-9.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-9.html
new file mode 100644
index 000000000..b2e9c9da0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-9.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<div class="test">
+<p>1</p>
+<div style="page-break-before:always"><p>2</p><p>3</p></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-ref.html
new file mode 100644
index 000000000..7ab7bb303
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-block-page-break-inside-avoid-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-after:always; }
+</style>
+</head>
+<body>
+<div class="test"><p>1</p></div>
+<p>2</p><p>3</p>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-1.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-1.html
new file mode 100644
index 000000000..8f7d709f0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; float:left; }
+</style>
+</head>
+<body>
+<p>1</p>
+<table class="test"><tr><td><p>2</p><p>3</p></td></tr></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-2-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-2-ref.html
new file mode 100644
index 000000000..e4df1dbc1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { float:left; }
+</style>
+</head>
+<body>
+<div class="test"><p>1</p></div>
+<div class="test"><p>2</p><p>3</p></div>
+<div class="test" style="page-break-before:always;clear:both"><p>4</p></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-2.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-2.html
new file mode 100644
index 000000000..9cfc9bb35
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-float-page-break-inside-avoid-2-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { float:left; page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<div class="test"><p>1</p></div>
+<div class="test"><p>2</p><p>3</p><p>4</p></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-3.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-3.html
new file mode 100644
index 000000000..dd61bde51
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-3.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { float:left; page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<div style="clear:both"><p>1</p></div>
+<div class="test"><p>2</p><p>3</p></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-4.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-4.html
new file mode 100644
index 000000000..95f6a56e2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-4.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-block-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { float:left; page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<div style="clear:both"><p>1</p></div>
+<div class="test"><div class="test"><p>2</p><p>3</p></div></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-5-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-5-ref.html
new file mode 100644
index 000000000..e04ffcb60
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-5-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+p { height: 0.5in; width: 1in; margin:0; background-color:blue; float:left; }
+.test { float:left; clear:left; width:3.3in; }
+</style>
+</head>
+<body>
+<br style="clear:both">
+<div class="test">
+<p>1</p><p>2</p><p>3</p>
+<p>4</p><p>5</p><p>6</p>
+</div>
+<div class="test" style="page-break-before:always">
+<p>1</p><p>2</p><p>3</p>
+<p>4</p><p>5</p><p>6</p>
+</div>
+<div class="test">
+<p>1</p><p>2</p><p>3</p>
+<p>4</p><p>5</p><p>6</p>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-5.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-5.html
new file mode 100644
index 000000000..c320d7744
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-5.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-float-page-break-inside-avoid-5-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+p { height: 0.5in; width: 1in; margin:0; background-color:blue; float:left; }
+.test { float:left; clear:left; page-break-inside:avoid; width:3.3in; }
+</style>
+</head>
+<body>
+<br style="clear:both">
+<div class="test">
+<p>1</p><p>2</p><p>3</p>
+<p>4</p><p>5</p><p>6</p>
+</div>
+<div class="test">
+<p>1</p><p>2</p><p>3</p>
+<p>4</p><p>5</p><p>6</p>
+</div>
+<div class="test">
+<p>1</p><p>2</p><p>3</p>
+<p>4</p><p>5</p><p>6</p>
+</div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-6-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-6-ref.html
new file mode 100644
index 000000000..f4b7529d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-6-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
+}
+p { height:60%; width:90%; margin:0; background-color:blue; border:1px solid black; }
+.test { page-break-before:always; float:left; }
+</style>
+</head>
+<body><p>1</p><p class="test">2</p></body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-6.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-6.html
new file mode 100644
index 000000000..505ccb263
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-6.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-float-page-break-inside-avoid-6-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
+}
+p { height:60%; width:90%; margin:0; background-color:blue; border:1px solid black; }
+.test { page-break-inside:avoid; float:left; }
+</style>
+</head>
+<body><p>1</p><p class="test">2</p></body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-7-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-7-ref.html
new file mode 100644
index 000000000..06b197fa3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-7-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged"><style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
+}
+
+.test { 
+  height:60%;
+  float:left;
+  clear:left;
+  background-color:blue;
+}
+</style>
+</head>
+<body>
+<br style="clear:both">
+<div class="test">1</div>X
+<div class="test" style="page-break-before:always">2</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-7.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-7.html
new file mode 100644
index 000000000..854a2dce3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-7.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-float-page-break-inside-avoid-7-ref.html">
+  <meta name="flags" content="paged"><style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
+}
+
+.test { 
+  page-break-inside:avoid;
+  height:60%;
+  float:left;
+  clear:left;
+  background-color:blue;
+}
+</style>
+</head>
+<body>
+<br style="clear:both">
+<div class="test">1</div>
+<div class="test">2</div>X
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-8-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-8-ref.html
new file mode 100644
index 000000000..b09e87f5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-8-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged"><style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
+}
+
+.test { 
+  height:60%;
+  float:left;
+  clear:left;
+  background-color:blue;
+}
+</style>
+</head>
+<body>
+<br style="clear:both">
+<div class="test">1</div>
+<div style="clear:both;">X<br>Y</div>
+<div class="test" style="page-break-before:always">2</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-8.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-8.html
new file mode 100644
index 000000000..a4e119422
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-8.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-float-page-break-inside-avoid-8-ref.html">
+  <meta name="flags" content="paged"><style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
+}
+
+.test { 
+  page-break-inside:avoid;
+  height:60%;
+  float:left;
+  clear:left;
+  background-color:blue;
+}
+</style>
+</head>
+<body>
+<br style="clear:both">
+<div class="test">1</div>
+<div style="height:60%;clear:both;"><div class="test" style="height:100%;">2</div>X<br>Y</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-9-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-9-ref.html
new file mode 100644
index 000000000..2c6bb0ed0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-9-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged"><style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
+}
+
+.test { 
+  height:60%;
+  float:left;
+  clear:left;
+  background-color:blue;
+}
+.ib {
+  display:inline-block;
+  height:100%;
+  width:1px;
+}
+</style>
+</head>
+<body>
+<br style="clear:both">
+<div class="test" style="page-break-after:always">1</div>
+<div style="height:60%;clear:both;">A<div class="test" style="height:100%;">2</div><span>X<span class="ib"></span><br>Y</span></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-9.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-9.html
new file mode 100644
index 000000000..6c955a16b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-float-page-break-inside-avoid-9.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-float-page-break-inside-avoid-9-ref.html">
+  <meta name="flags" content="paged"><style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; height:100%;
+}
+
+.test { 
+  page-break-inside:avoid;
+  height:60%;
+  float:left;
+  clear:left;
+  background-color:blue;
+}
+.ib {
+  display:inline-block;
+  height:100%;
+  width:1px;
+}
+</style>
+</head>
+<body>
+<br style="clear:both">
+<div class="test">1</div>
+<div style="height:60%;clear:both;">A<div class="test" style="height:100%;">2</div><span>X<span class="ib"></span><br>Y</span></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-inline-page-break-inside-avoid-1-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-inline-page-break-inside-avoid-1-ref.html
new file mode 100644
index 000000000..1e8de0a46
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-inline-page-break-inside-avoid-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+
+</style>
+</head>
+<body>
+<div class="test"><p>1</p></div>
+<div class="test" style="display:inline"><p>2</p><p>3</p></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-inline-page-break-inside-avoid-1.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-inline-page-break-inside-avoid-1.html
new file mode 100644
index 000000000..0b7c6af14
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-inline-page-break-inside-avoid-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-inline-page-break-inside-avoid-1-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<div class="test"><p>1</p></div>
+<div class="test" style="display:inline"><p>2</p><p>3</p></div>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-row-page-break-inside-avoid-1.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-row-page-break-inside-avoid-1.html
new file mode 100644
index 000000000..f964fd7ca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-row-page-break-inside-avoid-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-rowgroup-page-break-inside-avoid-5-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<table border="1">
+<thead><tr><td><p>1</p></td></tr></thead>
+<tbody><tr class="test"><td><p>2</p><p>3</p></td></tr></tbody>
+</table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-row-page-break-inside-avoid-2.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-row-page-break-inside-avoid-2.html
new file mode 100644
index 000000000..a09e0f7a6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-row-page-break-inside-avoid-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-rowgroup-page-break-inside-avoid-5-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<table border="1">
+<tbody>
+<tr><td><p>1</p></td></tr>
+<tr class="test"><td><p>2</p><p>3</p></td></tr></tbody>
+</table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-1.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-1.html
new file mode 100644
index 000000000..549f738bb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<p>1</p>
+<table><thead class="test"><tr><td><p>2</p><p>3</p></td></tr></thead></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-2.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-2.html
new file mode 100644
index 000000000..de8cf69cb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<p>1</p>
+<table><tbody class="test"><tr><td><p>2</p><p>3</p></td></tr></tbody></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-3.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-3.html
new file mode 100644
index 000000000..d5ed3e404
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-3.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<p>1</p>
+<table><tfoot class="test"><tr><td><p>2</p><p>3</p></td></tr></tfoot></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-4-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-4-ref.html
new file mode 100644
index 000000000..155e2aa26
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-4-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+
+</style>
+</head>
+<body>
+<table border="1">
+<tfoot><tr><td><p>3</p></td></tr></tfoot>
+<thead><tr><td><p>1</p></td></tr></thead>
+<tbody style="page-break-before:always"><tr><td><p>2</p><p>2</p></td></tr></tbody>
+</table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-4.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-4.html
new file mode 100644
index 000000000..e6afb598b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-4.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-rowgroup-page-break-inside-avoid-4-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<table border="1">
+<tfoot><tr><td><p>3</p></td></tr></tfoot>
+<thead><tr><td><p>1</p></td></tr></thead>
+<tbody class="test"><tr><td><p>2</p><p>2</p></td></tr></tbody>
+</table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-5-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-5-ref.html
new file mode 100644
index 000000000..88aae3708
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-5-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+thead { page-break-after:always; }
+</style>
+</head>
+<body>
+<table border="1">
+<thead><tr><td><p>1</p></td></tr></thead>
+<tbody><tr><td><p>2</p><p>3</p></td></tr></tbody>
+</table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-5.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-5.html
new file mode 100644
index 000000000..94715fb47
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-5.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-rowgroup-page-break-inside-avoid-5-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<table border="1">
+<thead><tr><td><p>1</p></td></tr></thead>
+<tbody class="test"><tr><td><p>2</p><p>3</p></td></tr></tbody>
+</table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-6.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-6.html
new file mode 100644
index 000000000..8ffb7f765
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-6.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-rowgroup-page-break-inside-avoid-5-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+.bb { page-break-before:always; }
+</style>
+</head>
+<body>
+<table border="1">
+<thead><tr><td><p>1</p></td></tr></thead>
+<tbody class="test"><tr class="bb"><td><p>2</p><p>3</p></td></tr></tbody>
+</table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-7-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-7-ref.html
new file mode 100644
index 000000000..f52480080
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-7-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.bb { page-break-before:always; }
+</style>
+</head>
+<body>
+1
+<table border="1" class="bb">
+<tbody>
+<tr><td><p>2</p></td></tr>
+<tr><td><p>2</p><p>3</p></td></tr>
+</tbody>
+</table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-7.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-7.html
new file mode 100644
index 000000000..c130f84d4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-7.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-rowgroup-page-break-inside-avoid-7-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+1
+<table border="1">
+<tbody class="test">
+<tr><td><p>2</p></td></tr>
+<tr><td><p>2</p><p>3</p></td></tr>
+</tbody>
+</table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-8-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-8-ref.html
new file mode 100644
index 000000000..71dbbab7c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-8-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+
+.bb { page-break-before:always; }
+</style>
+</head>
+<body>
+1
+<table border="1">
+<tbody>
+<tr><td><p>1</p></td></tr>
+<tr class="bb"><td><p>2</p><p>2</p></td></tr>
+</tbody>
+</table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-8.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-8.html
new file mode 100644
index 000000000..4f814d486
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-rowgroup-page-break-inside-avoid-8.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-rowgroup-page-break-inside-avoid-8-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+.bb { page-break-before:always; }
+</style>
+</head>
+<body>
+1
+<table border="1">
+<tbody class="test">
+<tr><td><p>1</p></td></tr>
+<tr class="bb"><td><p>2</p><p>2</p></td></tr>
+</tbody>
+</table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-1.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-1.html
new file mode 100644
index 000000000..962c7ee28
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<p>1</p>
+<table class="test"><tr><td><p>2</p><p>3</p></td></tr></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-2-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-2-ref.html
new file mode 100644
index 000000000..a54708a70
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-2-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+
+</style>
+</head>
+<body>
+<table border="1">
+<tbody>
+<tr><td><p>1</p></td></tr>
+</tbody>
+</table>
+<div style= "page-break-after: always"></div>
+<table border="1">
+<tbody></tbody>
+<tbody>
+<tr><td><p>2</p><p>3</p></td></tr>
+</tbody>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-2.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-2.html
new file mode 100644
index 000000000..c7fa2da41
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-2.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-2-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<table border="1">
+<tbody>
+<tr><td><p>1</p></td></tr>
+</tbody>
+</table>
+<div style= "page-break-after: always"></div>
+<table border="1" class="test">
+<tbody></tbody>
+<tbody>
+<tr><td><p>2</p><p>3</p></td></tr>
+</tbody>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-3-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-3-ref.html
new file mode 100644
index 000000000..1029d31e6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-3-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+
+table { display:inline-table; }
+</style>
+</head>
+<body>
+<table border="1">
+<tbody>
+<tr><td><p>1</p></td></tr>
+</tbody>
+</table>
+<div style= "page-break-after: always"></div>
+<table border="1">
+<tbody></tbody>
+<tbody>
+<tr><td><p>2</p><p>3</p><p>4</p></td></tr>
+</tbody>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-3.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-3.html
new file mode 100644
index 000000000..794486c52
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-3.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-3-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+table { display:inline-table; }
+</style>
+</head>
+<body>
+<table border="1">
+<tbody>
+<tr><td><p>1</p></td></tr>
+</tbody>
+</table>
+<div style="page-break-after: always"></div>
+<table border="1" class="test">
+<tbody></tbody>
+<tbody>
+<tr><td><p>2</p><p>3</p><p>4</p></td></tr>
+</tbody>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-4-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-4-ref.html
new file mode 100644
index 000000000..a9129f248
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-4-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+table { display:inline-table; }
+</style>
+</head>
+<body>
+<p style="page-break-after:always">1</p>
+text<table class="test"><tr><td><p>2</p><p>3</p><p>4</p></td></tr></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-4.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-4.html
new file mode 100644
index 000000000..23c5b8c7a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-4.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-4-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+table { display:inline-table; }
+</style>
+</head>
+<body>
+<p>1</p>
+text<table class="test"><tr><td><p>2</p><p>3</p><p>4</p></td></tr></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-5-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-5-ref.html
new file mode 100644
index 000000000..6e62b79d8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-5-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+
+tr,table { page-break-before:always; }
+</style>
+</head>
+<body>
+<p>1</p>
+<table class="test" border="1">
+<tr><td>I have page-break-after: always</td></tr>
+<tr><td>I have page-break-after: always</td></tr>
+<tr><td>I have page-break-after: always</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-5.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-5.html
new file mode 100644
index 000000000..7172f0dd6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-5.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-5-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+tr { page-break-before:always; }
+</style>
+</head>
+<body>
+<p>1</p>
+<table class="test" border="1">
+<tr><td>I have page-break-after: always</td></tr>
+<tr><td>I have page-break-after: always</td></tr>
+<tr><td>I have page-break-after: always</td></tr>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-6-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-6-ref.html
new file mode 100644
index 000000000..0560667a4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-6-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+</style>
+</head>
+<body>
+<table cellspacing="0" cellpadding="0"><caption><p>1</p></caption><tr><td><p>1</p><p>2</p></td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-6.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-6.html
new file mode 100644
index 000000000..d9a37071d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-6.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-6-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<table cellspacing="0" cellpadding="0" class="test"><caption><p>1</p></caption><tr><td><p>1</p><p>2</p></td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-7-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-7-ref.html
new file mode 100644
index 000000000..1a2d3d304
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-7-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+div { page-break-after: always; }
+</style>
+</head>
+<body>
+<div>Text</div>
+<table cellspacing="0" cellpadding="0"><caption><p>1</p></caption><tr><td><p>1</p><p>2</p></td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-7.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-7.html
new file mode 100644
index 000000000..edf256183
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-7.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-7-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<div>Text</div>
+<table cellspacing="0" cellpadding="0" class="test"><caption><p>1</p></caption><tr><td><p>1</p><p>2</p></td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-8.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-8.html
new file mode 100644
index 000000000..ea09ff93e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-8.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-css21-table-page-break-inside-avoid-6-ref.html">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+.test { page-break-inside:avoid; }
+</style>
+</head>
+<body>
+<table cellspacing="0" cellpadding="0"><caption><p>1</p></caption><tbody class="test"><tr><td><p>1</p><p>2</p></td></tr></tbody></table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-ref.html b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-ref.html
new file mode 100644
index 000000000..6cce765b3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/moz-css21-table-page-break-inside-avoid-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-print">
+<head>
+  <title>CSS Test: CSS 2.1 page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+<style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+p { height: 1in; width: 1in; margin:0; background-color:blue; }
+
+</style>
+</head>
+<body>
+<p style="page-break-after:always">1</p>
+<table><tr><td><p>2</p><p>3</p></td></tr></table>
+
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/reftest-stylo.list b/layout/reftests/w3c-css/submitted/css21/pagination/reftest-stylo.list
new file mode 100644
index 000000000..fd092b6fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/reftest-stylo.list
@@ -0,0 +1,46 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== moz-css21-block-page-break-inside-avoid-1.html moz-css21-block-page-break-inside-avoid-1.html
+== moz-css21-block-page-break-inside-avoid-2.html moz-css21-block-page-break-inside-avoid-2.html
+== moz-css21-block-page-break-inside-avoid-3.html moz-css21-block-page-break-inside-avoid-3.html
+== moz-css21-block-page-break-inside-avoid-4.html moz-css21-block-page-break-inside-avoid-4.html
+== moz-css21-block-page-break-inside-avoid-5.html moz-css21-block-page-break-inside-avoid-5.html
+== moz-css21-block-page-break-inside-avoid-6.html moz-css21-block-page-break-inside-avoid-6.html
+skip == moz-css21-block-page-break-inside-avoid-7.html moz-css21-block-page-break-inside-avoid-7.html
+== moz-css21-block-page-break-inside-avoid-8.html moz-css21-block-page-break-inside-avoid-8.html
+== moz-css21-block-page-break-inside-avoid-9.html moz-css21-block-page-break-inside-avoid-9.html
+== moz-css21-block-page-break-inside-avoid-10.html moz-css21-block-page-break-inside-avoid-10.html
+== moz-css21-block-page-break-inside-avoid-11.html moz-css21-block-page-break-inside-avoid-11.html
+== moz-css21-block-page-break-inside-avoid-12.html moz-css21-block-page-break-inside-avoid-12.html
+== moz-css21-block-page-break-inside-avoid-13.html moz-css21-block-page-break-inside-avoid-13.html
+== moz-css21-block-page-break-inside-avoid-14.html moz-css21-block-page-break-inside-avoid-14.html
+== moz-css21-block-page-break-inside-avoid-15.html moz-css21-block-page-break-inside-avoid-15.html
+== moz-css21-table-page-break-inside-avoid-1.html moz-css21-table-page-break-inside-avoid-1.html
+== moz-css21-table-page-break-inside-avoid-2.html moz-css21-table-page-break-inside-avoid-2.html
+== moz-css21-table-page-break-inside-avoid-3.html moz-css21-table-page-break-inside-avoid-3.html
+== moz-css21-table-page-break-inside-avoid-4.html moz-css21-table-page-break-inside-avoid-4.html
+== moz-css21-table-page-break-inside-avoid-5.html moz-css21-table-page-break-inside-avoid-5.html
+== moz-css21-table-page-break-inside-avoid-6.html moz-css21-table-page-break-inside-avoid-6.html
+== moz-css21-table-page-break-inside-avoid-7.html moz-css21-table-page-break-inside-avoid-7.html
+== moz-css21-table-page-break-inside-avoid-8.html moz-css21-table-page-break-inside-avoid-8.html
+== moz-css21-float-page-break-inside-avoid-1.html moz-css21-float-page-break-inside-avoid-1.html
+fails-if(B2G||Mulet) == moz-css21-float-page-break-inside-avoid-2.html moz-css21-float-page-break-inside-avoid-2.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== moz-css21-float-page-break-inside-avoid-3.html moz-css21-float-page-break-inside-avoid-3.html
+skip == moz-css21-float-page-break-inside-avoid-4.html moz-css21-float-page-break-inside-avoid-4.html
+== moz-css21-float-page-break-inside-avoid-5.html moz-css21-float-page-break-inside-avoid-5.html
+== moz-css21-float-page-break-inside-avoid-6.html moz-css21-float-page-break-inside-avoid-6.html
+== moz-css21-float-page-break-inside-avoid-7.html moz-css21-float-page-break-inside-avoid-7.html
+fails-if(B2G||Mulet) == moz-css21-float-page-break-inside-avoid-8.html moz-css21-float-page-break-inside-avoid-8.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== moz-css21-float-page-break-inside-avoid-9.html moz-css21-float-page-break-inside-avoid-9.html
+== moz-css21-rowgroup-page-break-inside-avoid-1.html moz-css21-rowgroup-page-break-inside-avoid-1.html
+== moz-css21-rowgroup-page-break-inside-avoid-2.html moz-css21-rowgroup-page-break-inside-avoid-2.html
+== moz-css21-rowgroup-page-break-inside-avoid-3.html moz-css21-rowgroup-page-break-inside-avoid-3.html
+== moz-css21-rowgroup-page-break-inside-avoid-4.html moz-css21-rowgroup-page-break-inside-avoid-4.html
+== moz-css21-rowgroup-page-break-inside-avoid-5.html moz-css21-rowgroup-page-break-inside-avoid-5.html
+== moz-css21-rowgroup-page-break-inside-avoid-6.html moz-css21-rowgroup-page-break-inside-avoid-6.html
+== moz-css21-rowgroup-page-break-inside-avoid-7.html moz-css21-rowgroup-page-break-inside-avoid-7.html
+== moz-css21-rowgroup-page-break-inside-avoid-8.html moz-css21-rowgroup-page-break-inside-avoid-8.html
+== moz-css21-row-page-break-inside-avoid-1.html moz-css21-row-page-break-inside-avoid-1.html
+== moz-css21-row-page-break-inside-avoid-2.html moz-css21-row-page-break-inside-avoid-2.html
+== moz-css21-inline-page-break-inside-avoid-1.html moz-css21-inline-page-break-inside-avoid-1.html
diff --git a/layout/reftests/w3c-css/submitted/css21/pagination/reftest.list b/layout/reftests/w3c-css/submitted/css21/pagination/reftest.list
new file mode 100644
index 000000000..dee7aa242
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/pagination/reftest.list
@@ -0,0 +1,43 @@
+== moz-css21-block-page-break-inside-avoid-1.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-block-page-break-inside-avoid-2.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-block-page-break-inside-avoid-3.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-block-page-break-inside-avoid-4.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-block-page-break-inside-avoid-5.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-block-page-break-inside-avoid-6.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-block-page-break-inside-avoid-7.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-block-page-break-inside-avoid-8.html moz-css21-block-page-break-inside-avoid-8-ref.html
+== moz-css21-block-page-break-inside-avoid-9.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-block-page-break-inside-avoid-10.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-block-page-break-inside-avoid-11.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-block-page-break-inside-avoid-12.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-block-page-break-inside-avoid-13.html moz-css21-block-page-break-inside-avoid-8-ref.html
+== moz-css21-block-page-break-inside-avoid-14.html moz-css21-block-page-break-inside-avoid-14-ref.html
+== moz-css21-block-page-break-inside-avoid-15.html moz-css21-block-page-break-inside-avoid-15-ref.html
+== moz-css21-table-page-break-inside-avoid-1.html moz-css21-table-page-break-inside-avoid-ref.html
+== moz-css21-table-page-break-inside-avoid-2.html moz-css21-table-page-break-inside-avoid-2-ref.html
+== moz-css21-table-page-break-inside-avoid-3.html moz-css21-table-page-break-inside-avoid-3-ref.html
+== moz-css21-table-page-break-inside-avoid-4.html moz-css21-table-page-break-inside-avoid-4-ref.html
+== moz-css21-table-page-break-inside-avoid-5.html moz-css21-table-page-break-inside-avoid-5-ref.html
+== moz-css21-table-page-break-inside-avoid-6.html moz-css21-table-page-break-inside-avoid-6-ref.html
+== moz-css21-table-page-break-inside-avoid-7.html moz-css21-table-page-break-inside-avoid-7-ref.html
+== moz-css21-table-page-break-inside-avoid-8.html moz-css21-table-page-break-inside-avoid-6-ref.html
+== moz-css21-float-page-break-inside-avoid-1.html moz-css21-table-page-break-inside-avoid-ref.html
+== moz-css21-float-page-break-inside-avoid-2.html moz-css21-float-page-break-inside-avoid-2-ref.html
+== moz-css21-float-page-break-inside-avoid-3.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-float-page-break-inside-avoid-4.html moz-css21-block-page-break-inside-avoid-ref.html
+== moz-css21-float-page-break-inside-avoid-5.html moz-css21-float-page-break-inside-avoid-5-ref.html
+== moz-css21-float-page-break-inside-avoid-6.html moz-css21-float-page-break-inside-avoid-6-ref.html
+== moz-css21-float-page-break-inside-avoid-7.html moz-css21-float-page-break-inside-avoid-7-ref.html
+== moz-css21-float-page-break-inside-avoid-8.html moz-css21-float-page-break-inside-avoid-8-ref.html
+== moz-css21-float-page-break-inside-avoid-9.html moz-css21-float-page-break-inside-avoid-9-ref.html
+== moz-css21-rowgroup-page-break-inside-avoid-1.html moz-css21-table-page-break-inside-avoid-ref.html
+== moz-css21-rowgroup-page-break-inside-avoid-2.html moz-css21-table-page-break-inside-avoid-ref.html
+== moz-css21-rowgroup-page-break-inside-avoid-3.html moz-css21-table-page-break-inside-avoid-ref.html
+== moz-css21-rowgroup-page-break-inside-avoid-4.html moz-css21-rowgroup-page-break-inside-avoid-4-ref.html
+== moz-css21-rowgroup-page-break-inside-avoid-5.html moz-css21-rowgroup-page-break-inside-avoid-5-ref.html
+== moz-css21-rowgroup-page-break-inside-avoid-6.html moz-css21-rowgroup-page-break-inside-avoid-5-ref.html
+== moz-css21-rowgroup-page-break-inside-avoid-7.html moz-css21-rowgroup-page-break-inside-avoid-7-ref.html
+== moz-css21-rowgroup-page-break-inside-avoid-8.html moz-css21-rowgroup-page-break-inside-avoid-8-ref.html
+== moz-css21-row-page-break-inside-avoid-1.html moz-css21-rowgroup-page-break-inside-avoid-5-ref.html
+== moz-css21-row-page-break-inside-avoid-2.html moz-css21-rowgroup-page-break-inside-avoid-5-ref.html
+== moz-css21-inline-page-break-inside-avoid-1.html moz-css21-inline-page-break-inside-avoid-1-ref.html
diff --git a/layout/reftests/w3c-css/submitted/css21/reftest-stylo.list b/layout/reftests/w3c-css/submitted/css21/reftest-stylo.list
new file mode 100644
index 000000000..fea521a7a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/reftest-stylo.list
@@ -0,0 +1,3 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+include pagination/reftest-stylo.list
+include replaced-sizing/reftest-stylo.list
diff --git a/layout/reftests/w3c-css/submitted/css21/reftest.list b/layout/reftests/w3c-css/submitted/css21/reftest.list
new file mode 100644
index 000000000..63e438aa9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/reftest.list
@@ -0,0 +1,2 @@
+include pagination/reftest.list
+include replaced-sizing/reftest.list
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/reftest-stylo.list b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/reftest-stylo.list
new file mode 100644
index 000000000..54aaed9a7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/reftest-stylo.list
@@ -0,0 +1,10 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== replaced-elements-all-auto.html replaced-elements-all-auto.html
+== replaced-elements-height-20.html replaced-elements-height-20.html
+== replaced-elements-width-40.html replaced-elements-width-40.html
+== replaced-elements-min-height-20.html replaced-elements-min-height-20.html
+== replaced-elements-min-width-40.html replaced-elements-min-width-40.html
+== replaced-elements-min-height-40.html replaced-elements-min-height-40.html
+== replaced-elements-min-width-80.html replaced-elements-min-width-80.html
+== replaced-elements-max-height-20.html replaced-elements-max-height-20.html
+== replaced-elements-max-width-40.html replaced-elements-max-width-40.html
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/reftest.list b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/reftest.list
new file mode 100644
index 000000000..b2af4ad08
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/reftest.list
@@ -0,0 +1,9 @@
+== replaced-elements-all-auto.html replaced-elements-all-auto-ref.html
+== replaced-elements-height-20.html replaced-elements-height-20-ref.html
+== replaced-elements-width-40.html replaced-elements-width-40-ref.html
+== replaced-elements-min-height-20.html replaced-elements-all-auto-ref.html
+== replaced-elements-min-width-40.html replaced-elements-all-auto-ref.html
+== replaced-elements-min-height-40.html replaced-elements-min-height-40-ref.html
+== replaced-elements-min-width-80.html replaced-elements-min-width-80-ref.html
+== replaced-elements-max-height-20.html replaced-elements-height-20-ref.html
+== replaced-elements-max-width-40.html replaced-elements-width-40-ref.html
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-all-auto-ref.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-all-auto-ref.html
new file mode 100644
index 000000000..5a1df9485
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-all-auto-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Reference: CSS 2.1 replaced element sizing</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+
+  span {
+    display: inline-block;
+    width: 50px;
+    height: 25px;
+  }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <span style="background: black;"></span>, <!-- height-25-width-50 -->
+  <span style="background: fuchsia;"></span>, <!-- height-25-ratio-2 -->
+  <span style="background: silver;"></span>, <!-- width-50-ratio-2 -->
+  <span style="background: blue; width: 300px"></span>, <!-- height-25-no-ratio -->
+  <span style="background: orange; height: 150px"></span>, <!-- width-50-no-ratio -->
+  <span style="background: gray; width: 200px; height: 100px"></span>, <!-- ratio-2 -->
+  <span style="background: aqua; width: 300px; height: 150px"></span>. <!-- no-ratio -->
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-all-auto.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-all-auto.html
new file mode 100644
index 000000000..bc2b4593a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-all-auto.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Test: CSS 2.1 replaced element sizing</title>
+  <link rel="match" href="replaced-elements-all-auto-ref.html">
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <img src="support/height-25-width-50.svg">,
+  <img src="support/height-25-ratio-2.svg">,
+  <img src="support/width-50-ratio-2.svg">,
+  <img src="support/height-25-no-ratio.svg">,
+  <img src="support/width-50-no-ratio.svg">,
+  <img src="support/ratio-2.svg">,
+  <img src="support/no-ratio.svg">.
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-height-20-ref.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-height-20-ref.html
new file mode 100644
index 000000000..503d83bd7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-height-20-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Reference: CSS 2.1 replaced element sizing</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+
+  span {
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+  }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <span style="background: black;"></span>, <!-- height-25-width-50 -->
+  <span style="background: fuchsia;"></span>, <!-- height-25-ratio-2 -->
+  <span style="background: silver;"></span>, <!-- width-50-ratio-2 -->
+  <span style="background: blue; width: 300px"></span>, <!-- height-25-no-ratio -->
+  <span style="background: orange; width: 50px"></span>, <!-- width-50-no-ratio -->
+  <span style="background: gray"></span>, <!-- ratio-2 -->
+  <span style="background: aqua; width: 300px"></span>. <!-- no-ratio -->
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-height-20.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-height-20.html
new file mode 100644
index 000000000..2ca34beff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-height-20.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Test: CSS 2.1 replaced element sizing</title>
+  <link rel="match" href="replaced-elements-height-20-ref.html">
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+  img { height: 20px }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <img src="support/height-25-width-50.svg">,
+  <img src="support/height-25-ratio-2.svg">,
+  <img src="support/width-50-ratio-2.svg">,
+  <img src="support/height-25-no-ratio.svg">,
+  <img src="support/width-50-no-ratio.svg">,
+  <img src="support/ratio-2.svg">,
+  <img src="support/no-ratio.svg">.
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-max-height-20.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-max-height-20.html
new file mode 100644
index 000000000..eb2ee9844
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-max-height-20.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Test: CSS 2.1 replaced element sizing</title>
+  <link rel="match" href="replaced-elements-height-20-ref.html">
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+  img { max-height: 20px }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <img src="support/height-25-width-50.svg">,
+  <img src="support/height-25-ratio-2.svg">,
+  <img src="support/width-50-ratio-2.svg">,
+  <img src="support/height-25-no-ratio.svg">,
+  <img src="support/width-50-no-ratio.svg">,
+  <img src="support/ratio-2.svg">,
+  <img src="support/no-ratio.svg">.
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-max-width-40.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-max-width-40.html
new file mode 100644
index 000000000..9fb7aad4e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-max-width-40.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Test: CSS 2.1 replaced element sizing</title>
+  <link rel="match" href="replaced-elements-width-40-ref.html">
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+  img { max-width: 40px }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <img src="support/height-25-width-50.svg">,
+  <img src="support/height-25-ratio-2.svg">,
+  <img src="support/width-50-ratio-2.svg">,
+  <img src="support/height-25-no-ratio.svg">,
+  <img src="support/width-50-no-ratio.svg">,
+  <img src="support/ratio-2.svg">,
+  <img src="support/no-ratio.svg">.
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-height-20.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-height-20.html
new file mode 100644
index 000000000..5294aadcb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-height-20.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Test: CSS 2.1 replaced element sizing</title>
+  <link rel="match" href="replaced-elements-all-auto-ref.html">
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+  img { min-height: 20px }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <img src="support/height-25-width-50.svg">,
+  <img src="support/height-25-ratio-2.svg">,
+  <img src="support/width-50-ratio-2.svg">,
+  <img src="support/height-25-no-ratio.svg">,
+  <img src="support/width-50-no-ratio.svg">,
+  <img src="support/ratio-2.svg">,
+  <img src="support/no-ratio.svg">.
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-height-40-ref.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-height-40-ref.html
new file mode 100644
index 000000000..668be594f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-height-40-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Reference: CSS 2.1 replaced element sizing</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+
+  span {
+    display: inline-block;
+    width: 80px;
+    height: 40px;
+  }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <span style="background: black;"></span>, <!-- height-25-width-50 -->
+  <span style="background: fuchsia;"></span>, <!-- height-25-ratio-2 -->
+  <span style="background: silver;"></span>, <!-- width-50-ratio-2 -->
+  <span style="background: blue; width: 300px"></span>, <!-- height-25-no-ratio -->
+  <span style="background: orange; width: 50px; height: 150px"></span>, <!-- width-50-no-ratio -->
+  <span style="background: gray; width: 200px; height: 100px"></span>, <!-- ratio-2 -->
+  <span style="background: aqua; width: 300px; height: 150px"></span>. <!-- no-ratio -->
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-height-40.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-height-40.html
new file mode 100644
index 000000000..700909ec5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-height-40.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Test: CSS 2.1 replaced element sizing</title>
+  <link rel="match" href="replaced-elements-min-height-40-ref.html">
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+  img { min-height: 40px }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <img src="support/height-25-width-50.svg">,
+  <img src="support/height-25-ratio-2.svg">,
+  <img src="support/width-50-ratio-2.svg">,
+  <img src="support/height-25-no-ratio.svg">,
+  <img src="support/width-50-no-ratio.svg">,
+  <img src="support/ratio-2.svg">,
+  <img src="support/no-ratio.svg">.
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-width-40.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-width-40.html
new file mode 100644
index 000000000..03e6a9cba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-width-40.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Test: CSS 2.1 replaced element sizing</title>
+  <link rel="match" href="replaced-elements-all-auto-ref.html">
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+  img { min-width: 40px }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <img src="support/height-25-width-50.svg">,
+  <img src="support/height-25-ratio-2.svg">,
+  <img src="support/width-50-ratio-2.svg">,
+  <img src="support/height-25-no-ratio.svg">,
+  <img src="support/width-50-no-ratio.svg">,
+  <img src="support/ratio-2.svg">,
+  <img src="support/no-ratio.svg">.
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-width-80-ref.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-width-80-ref.html
new file mode 100644
index 000000000..6caa1c480
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-width-80-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Reference: CSS 2.1 replaced element sizing</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+
+  span {
+    display: inline-block;
+    width: 80px;
+    height: 40px;
+  }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <span style="background: black;"></span>, <!-- height-25-width-50 -->
+  <span style="background: fuchsia;"></span>, <!-- height-25-ratio-2 -->
+  <span style="background: silver;"></span>, <!-- width-50-ratio-2 -->
+  <span style="background: blue; width: 300px; height: 25px"></span>, <!-- height-25-no-ratio -->
+  <span style="background: orange; height: 150px"></span>, <!-- width-50-no-ratio -->
+  <span style="background: gray; width: 200px; height: 100px"></span>, <!-- ratio-2 -->
+  <span style="background: aqua; width: 300px; height: 150px"></span>. <!-- no-ratio -->
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-width-80.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-width-80.html
new file mode 100644
index 000000000..852864aa1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-min-width-80.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Test: CSS 2.1 replaced element sizing</title>
+  <link rel="match" href="replaced-elements-min-width-80-ref.html">
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+  img { min-width: 80px }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <img src="support/height-25-width-50.svg">,
+  <img src="support/height-25-ratio-2.svg">,
+  <img src="support/width-50-ratio-2.svg">,
+  <img src="support/height-25-no-ratio.svg">,
+  <img src="support/width-50-no-ratio.svg">,
+  <img src="support/ratio-2.svg">,
+  <img src="support/no-ratio.svg">.
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-width-40-ref.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-width-40-ref.html
new file mode 100644
index 000000000..c110910c4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-width-40-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Reference: CSS 2.1 replaced element sizing</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+
+  span {
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+  }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <span style="background: black;"></span>, <!-- height-25-width-50 -->
+  <span style="background: fuchsia;"></span>, <!-- height-25-ratio-2 -->
+  <span style="background: silver;"></span>, <!-- width-50-ratio-2 -->
+  <span style="background: blue; height: 25px"></span>, <!-- height-25-no-ratio -->
+  <span style="background: orange; height: 150px"></span>, <!-- width-50-no-ratio -->
+  <span style="background: gray"></span>, <!-- ratio-2 -->
+  <span style="background: aqua; height: 150px"></span>. <!-- no-ratio -->
+
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-width-40.html b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-width-40.html
new file mode 100644
index 000000000..4a8db48f6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/replaced-elements-width-40.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <title>CSS Test: CSS 2.1 replaced element sizing</title>
+  <link rel="match" href="replaced-elements-width-40-ref.html">
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">
+  <meta name="flags" content="should"> <!-- undefinedness in 10.3.2 -->
+  <style type="text/css">
+
+  div { width: 200px }
+  img { width: 40px }
+
+  </style>
+</head>
+<body>
+
+<div>
+  <img src="support/height-25-width-50.svg">,
+  <img src="support/height-25-ratio-2.svg">,
+  <img src="support/width-50-ratio-2.svg">,
+  <img src="support/height-25-no-ratio.svg">,
+  <img src="support/width-50-no-ratio.svg">,
+  <img src="support/ratio-2.svg">,
+  <img src="support/no-ratio.svg">.
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/height-25-no-ratio.svg b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/height-25-no-ratio.svg
new file mode 100644
index 000000000..d04627229
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/height-25-no-ratio.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="25" preserveAspectRatio="none">
+  <rect fill="blue" x="0" y="0" width="100%" height="100%" />
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/height-25-ratio-2.svg b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/height-25-ratio-2.svg
new file mode 100644
index 000000000..d6e71e31e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/height-25-ratio-2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 500" height="25" preserveAspectRatio="none">
+  <rect fill="fuchsia" x="0" y="0" width="1000" height="500" />
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/height-25-width-50.svg b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/height-25-width-50.svg
new file mode 100644
index 000000000..a45d7243c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/height-25-width-50.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="25" width="50" viewBox="0 0 1000 1000" preserveAspectRatio="none">
+  <rect fill="black" x="0" y="0" width="1000" height="1000" />
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/no-ratio.svg b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/no-ratio.svg
new file mode 100644
index 000000000..80429f1d1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/no-ratio.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="none">
+  <rect fill="aqua" x="0" y="0" width="100%" height="100%" />
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/ratio-2.svg b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/ratio-2.svg
new file mode 100644
index 000000000..fe4fe7016
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/ratio-2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 500" preserveAspectRatio="none">
+  <rect fill="gray" x="0" y="0" width="1000" height="500" />
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/width-50-no-ratio.svg b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/width-50-no-ratio.svg
new file mode 100644
index 000000000..bf43cee7d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/width-50-no-ratio.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50" preserveAspectRatio="none">
+  <rect fill="orange" x="0" y="0" width="100%" height="100%" />
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/width-50-ratio-2.svg b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/width-50-ratio-2.svg
new file mode 100644
index 000000000..62fa3cb42
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/css21/replaced-sizing/support/width-50-ratio-2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 500" width="50" preserveAspectRatio="none">
+  <rect fill="silver" x="0" y="0" width="1000" height="500" />
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1-ref.html b/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1-ref.html
new file mode 100644
index 000000000..7b746b82b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS filters: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #fixedmoves {
+    position: absolute;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="fixedmoves"></div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1a.html b/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1a.html
new file mode 100644
index 000000000..83230174c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1a.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS filters: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.fxtf.org/filters-1/#FilterProperty">
+<link rel="help" href="http://www.w3.org/2015/02/10-fx-minutes.html#action02">
+<link rel="match" href="filter-containing-block-dynamic-1-ref.html">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changefilter {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changefilter" style="filter: blur(4px)">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changefilter = document.getElementById("changefilter");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changefilter.style.filter = "";
+  </script>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1b.html b/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1b.html
new file mode 100644
index 000000000..4c25a834c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/filters/filter-containing-block-dynamic-1b.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS filters: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.fxtf.org/filters-1/#FilterProperty">
+<link rel="help" href="http://www.w3.org/2015/02/10-fx-minutes.html#action02">
+<link rel="match" href="filter-containing-block-dynamic-1-ref.html">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changefilter {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changefilter">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changefilter = document.getElementById("changefilter");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changefilter.style.filter = "blur(0px)";
+  </script>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/filters/reftest-stylo.list b/layout/reftests/w3c-css/submitted/filters/reftest-stylo.list
new file mode 100644
index 000000000..bf1f7926c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/filters/reftest-stylo.list
@@ -0,0 +1,3 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== filter-containing-block-dynamic-1a.html filter-containing-block-dynamic-1a.html
+== filter-containing-block-dynamic-1b.html filter-containing-block-dynamic-1b.html
diff --git a/layout/reftests/w3c-css/submitted/filters/reftest.list b/layout/reftests/w3c-css/submitted/filters/reftest.list
new file mode 100644
index 000000000..36b545186
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/filters/reftest.list
@@ -0,0 +1,2 @@
+== filter-containing-block-dynamic-1a.html filter-containing-block-dynamic-1-ref.html
+== filter-containing-block-dynamic-1b.html filter-containing-block-dynamic-1-ref.html
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001-ref.html
new file mode 100644
index 000000000..95c1f3341
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .tealBlock {
+      background: teal;
+      width: 20px;
+      height: 20px;
+      margin-bottom: 5px;
+    }
+  </style>
+</head>
+<body>
+  <div class="tealBlock"></div>
+  <div class="tealBlock"></div>
+  <div class="tealBlock"></div>
+  <div class="tealBlock"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001a.html
new file mode 100644
index 000000000..fabe204b2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001a.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a horizontal flex container</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items">
+  <link rel="match" href="flexbox-abspos-child-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      height: 10px;
+      width: 10px;
+      background: purple;
+      margin-bottom: 15px;
+      position: relative;
+    }
+    .absPos {
+      position: absolute;
+      background: teal;
+    }
+    .testMinWidth {
+      width: 10px;
+      height: 20px;
+      min-width: 20px;
+    }
+    .testMaxWidth {
+      width: 50px;
+      height: 20px;
+      max-width: 20px;
+    }
+    .testMinHeight {
+      width: 20px;
+      height: 10px;
+      min-height: 20px;
+    }
+    .testMaxHeight {
+      width: 20px;
+      height: 50px;
+      max-height: 20px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><div class="absPos testMinWidth"></div></div>
+  <div class="flexContainer"><div class="absPos testMaxWidth"></div></div>
+  <div class="flexContainer"><div class="absPos testMinHeight"></div></div>
+  <div class="flexContainer"><div class="absPos testMaxHeight"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001b.html
new file mode 100644
index 000000000..30fc58c3d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-abspos-child-001b.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing that "min-width", "max-width", "min-height", and "max-height" are applied on absolutely positioned children of a vertical flex container</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#abspos-items">
+  <link rel="match" href="flexbox-abspos-child-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      flex-direction: column;
+      height: 10px;
+      width: 10px;
+      background: purple;
+      margin-bottom: 15px;
+      position: relative;
+    }
+    .absPos {
+      position: absolute;
+      background: teal;
+    }
+    .testMinWidth {
+      width: 10px;
+      height: 20px;
+      min-width: 20px;
+    }
+    .testMaxWidth {
+      width: 50px;
+      height: 20px;
+      max-width: 20px;
+    }
+    .testMinHeight {
+      width: 20px;
+      height: 10px;
+      min-height: 20px;
+    }
+    .testMaxHeight {
+      width: 20px;
+      height: 50px;
+      max-height: 20px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><div class="absPos testMinWidth"></div></div>
+  <div class="flexContainer"><div class="absPos testMaxWidth"></div></div>
+  <div class="flexContainer"><div class="absPos testMinHeight"></div></div>
+  <div class="flexContainer"><div class="absPos testMaxHeight"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
new file mode 100644
index 000000000..18d4c5848
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001-ref.xhtml
@@ -0,0 +1,171 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        width: 20px;
+        height: 200px;
+        margin-right: 2px;
+        float: left;
+        background: lightgray;
+      }
+      div.a {
+        width: 20px;
+        height: 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        height: 30px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        height: 40px;
+        background: orange;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 10px;
+        height: 30px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-top:80px; height:110px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-top:40px; height: 70px"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 160px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 120px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 80px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 60px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-top: 160px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-top: 60px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-top: 60px"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 40px"/>
+      <div class="b" style="margin-top: 80px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 20px"/>
+      <div class="b" style="margin-top: 40px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-top: 40px"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: calc(160px / 3)"/>
+      <div class="b" style="margin-top: calc(160px / 3)"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 30px"/>
+      <div class="b" style="margin-top: 30px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-top: 30px"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml
new file mode 100644
index 000000000..c7ef7d6af
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001a.xhtml
@@ -0,0 +1,180 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
+     testing each possible value of the 'align-content' property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'align-content' in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
+    <link rel="match" href="flexbox-align-content-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 20px; /* Skinny, to force us to wrap */
+        height: 200px;
+        display: flex;
+        flex-wrap: wrap;
+        margin-right: 2px;
+        float: left;
+        background: lightgray;
+      }
+      div.a {
+        width: 20px;
+        height: 10px;
+        flex: none;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        height: auto; /* height comes from contents */
+        flex: none;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        height: 40px;
+        flex: none;
+        background: orange;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 10px;
+        height: 30px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001b.xhtml
new file mode 100644
index 000000000..19054382c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-horiz-001b.xhtml
@@ -0,0 +1,181 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of horizontal flex containers, with 1-3 flex lines,
+     testing each possible value of the 'align-content' property. Additionally,
+     the flex container derives its width from the "max-width" property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'align-content' in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
+    <link rel="match" href="flexbox-align-content-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        max-width: 20px; /* Skinny, to force us to wrap */
+        height: 200px;
+        display: flex;
+        flex-wrap: wrap;
+        margin-right: 2px;
+        float: left;
+        background: lightgray;
+      }
+      div.a {
+        height: 10px;
+        width: 20px;
+        flex: none;
+        background: lightgreen;
+      }
+      div.b {
+        height: auto; /* height comes from contents */
+        width: 20px;
+        flex: none;
+        background: pink;
+      }
+      div.c {
+        height: 40px;
+        width: 20px;
+        flex: none;
+        background: orange;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 10px;
+        height: 30px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
new file mode 100644
index 000000000..460ccef05
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001-ref.xhtml
@@ -0,0 +1,174 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        margin-bottom: 2px;
+        background: lightgray;
+        height: 20px;
+        clear: all;
+      }
+      div.a {
+        width: 10px;
+        height: 20px;
+        background: lightgreen;
+        float: left;
+      }
+      div.b {
+        width: 30px;
+        height: 20px;
+        background: pink;
+        float: left;
+      }
+      div.c {
+        width: 40px;
+        height: 20px;
+        background: orange;
+        float: left;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 30px;
+        height: 10px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-left:80px; width:110px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-left: 40px; width: 70px"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 160px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 120px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 80px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 60px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b" style="margin-left: 60px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-left: 60px"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 40px"/>
+      <div class="b" style="margin-left: 80px"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 20px"/>
+      <div class="b" style="margin-left: 40px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-left: 40px"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: calc(160px / 3)"/>
+      <div class="b" style="margin-left: calc(160px / 3)"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 30px"/>
+      <div class="b" style="margin-left: 30px"><div class="fixedSizeChild"/></div>
+      <div class="c" style="margin-left: 30px"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 160px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 120px"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml
new file mode 100644
index 000000000..ef91d5fb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001a.xhtml
@@ -0,0 +1,180 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines,
+     testing each possible value of the 'align-content' property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'align-content' in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
+    <link rel="match" href="flexbox-align-content-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        height: 20px; /* Short, to force us to wrap */
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        margin-bottom: 2px;
+        background: lightgray;
+      }
+      div.a {
+        width: 10px;
+        height: 20px;
+        flex: none;
+        background: lightgreen;
+      }
+      div.b {
+        width: auto; /* width comes from contents */
+        height: 20px;
+        flex: none;
+        background: pink;
+      }
+      div.c {
+        width: 40px;
+        height: 20px;
+        flex: none;
+        background: orange;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 30px;
+        height: 10px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001b.xhtml
new file mode 100644
index 000000000..9b9b2fa72
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-content-vert-001b.xhtml
@@ -0,0 +1,181 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of vertical flex containers, with 1-3 flex lines,
+     testing each possible value of the 'align-content' property. Additionally,
+     the flex container derives its height from the "max-height" property.-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'align-content' in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property"/>
+    <link rel="match" href="flexbox-align-content-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        max-height: 20px; /* Short, to force us to wrap */
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        margin-bottom: 2px;
+        background: lightgray;
+      }
+      div.a {
+        width: 10px;
+        height: 20px;
+        flex: none;
+        background: lightgreen;
+      }
+      div.b {
+        width: auto; /* width comes from contents */
+        height: 20px;
+        flex: none;
+        background: pink;
+      }
+      div.c {
+        width: 40px;
+        height: 20px;
+        flex: none;
+        background: orange;
+      }
+
+      /* Inside of 'b': */
+      div.fixedSizeChild {
+        width: 30px;
+        height: 10px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (stretch) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-start">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: flex-end">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: center">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-between">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-around">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: space-evenly">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: left">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+    </div>
+    <div class="flexbox" style="align-content: right">
+      <div class="a"/>
+      <div class="b"><div class="fixedSizeChild"/></div>
+      <div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml
new file mode 100644
index 000000000..e5efb7560
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+     align-self.
+
+     NOTE: For multi-line 'display: block' elements in the testcase (and inline
+     content that gets wrapped in an anonymous block), we add an inline-table
+     wrapper here in the reference case, so that we get first-line baseline
+     alignment instead of the last-line baseline-alignment that an inline-block
+     would give us.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        display: block;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+
+      div   { display: inline-block; }
+      table { display: inline-table; }
+
+      .big {
+        height: 100px;
+        font: 24px sans-serif;
+        margin-top: 20px;
+      }
+      .super {
+        vertical-align: super;
+        font-size: 12px;
+      }
+      .sub {
+        vertical-align: sub;
+        font-size: 12px;
+      }
+
+      .lime   { background: lime;   }
+      .yellow { background: yellow; }
+      .orange { background: orange; }
+      .pink   { background: pink;   }
+      .aqua   { background: aqua;   }
+      .tan    { background: tan;    }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="lime">blk_1line</div
+      ><table cellspacing="0" cellpadding="0"
+              class="yellow">blk<br/>2lines</table
+      ><div class="orange"><span class="super">super</span></div
+      ><div class="pink"><span class="sub">sub</span></div
+      ><table cellspacing="0" cellpadding="0"
+              class="aqua big">big<br/>text<br/>3lines</table
+      ><table class="tan" cellspacing="0" cellpadding="0">
+        <i>ital<br/>ic</i>
+      </table>
+    </div>
+    <div class="flexbox">
+      <div class="lime">blk_1line</div
+      ><div class="yellow">blk<br/>2lines</div
+      ><div class="orange"><span class="super">super</span></div
+      ><div class="pink"><span class="sub">sub</span></div
+      ><div class="aqua big">big<br/>text<br/>3lines</div
+      ><div class="tan"><i>ital<br/>ic</i></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml
new file mode 100644
index 000000000..0460f4162
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+     align-self, implicitly). This test baseline-aligns various types of
+     content, and the flexbox's vertical size depends on the aggregate
+     post-alignment height of its children.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self'</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
+    <link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/>
+    <style>
+      .flexbox {
+        display: flex;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+      .base {
+        align-items: baseline;
+      }
+      .lastbase {
+        align-items: last baseline;
+      }
+
+      .big {
+        height: 100px;
+        font: 24px sans-serif;
+        margin-top: 20px;
+      }
+      .super {
+        vertical-align: super;
+        font-size: 12px;
+      }
+      .sub {
+        vertical-align: sub;
+        font-size: 12px;
+      }
+
+      .lime   { background: lime;   }
+      .yellow { background: yellow; }
+      .orange { background: orange; }
+      .pink   { background: pink;   }
+      .aqua   { background: aqua;   }
+      .tan    { background: tan;    }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox base">
+      <div class="lime">blk_1line</div>
+      <div class="yellow">blk<br/>2lines</div>
+      <div class="orange"><span class="super">super</span></div>
+      <div class="pink"><span class="sub">sub</span></div>
+      <div class="aqua big">big<br/>text<br/>3lines</div>
+      <i class="tan">ital<br/>ic</i>
+    </div>
+    <div class="flexbox lastbase">
+      <div class="lime">blk_1line</div>
+      <div class="yellow">blk<br/>2lines</div>
+      <div class="orange"><span class="super">super</span></div>
+      <div class="pink"><span class="sub">sub</span></div>
+      <div class="aqua big">big<br/>text<br/>3lines</div>
+      <i class="tan">ital<br/>ic</i>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml
new file mode 100644
index 000000000..3a656e41e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+     align-self, implicitly). This test baseline-aligns various types of
+     content, and the flexbox's vertical size depends on the aggregate
+     post-alignment height of its children. This test also uses
+     "flex-wrap: wrap-reverse" to make the cross-axis bottom-to-top instead
+     of top-to-bottom.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a wrap-reverse flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
+    <link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/>
+    <style>
+      .flexbox {
+        display: flex;
+        flex-wrap: wrap-reverse;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+      }
+      .base {
+        align-items: baseline;
+      }
+      .lastbase {
+        align-items: last baseline;
+      }
+
+      .big {
+        height: 100px;
+        font: 24px sans-serif;
+        margin-top: 20px;
+      }
+      .super {
+        vertical-align: super;
+        font-size: 12px;
+      }
+      .sub {
+        vertical-align: sub;
+        font-size: 12px;
+      }
+
+      .lime   { background: lime;   }
+      .yellow { background: yellow; }
+      .orange { background: orange; }
+      .pink   { background: pink;   }
+      .aqua   { background: aqua;   }
+      .tan    { background: tan;    }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox base">
+      <div class="lime">blk_1line</div>
+      <div class="yellow">blk<br/>2lines</div>
+      <div class="orange"><span class="super">super</span></div>
+      <div class="pink"><span class="sub">sub</span></div>
+      <div class="aqua big">big<br/>text<br/>3lines</div>
+      <i class="tan">ital<br/>ic</i>
+    </div>
+    <div class="flexbox lastbase">
+      <div class="lime">blk_1line</div>
+      <div class="yellow">blk<br/>2lines</div>
+      <div class="orange"><span class="super">super</span></div>
+      <div class="pink"><span class="sub">sub</span></div>
+      <div class="aqua big">big<br/>text<br/>3lines</div>
+      <i class="tan">ital<br/>ic</i>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002-ref.xhtml
new file mode 100644
index 000000000..7cfded599
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002-ref.xhtml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        width: 40px;
+        height: 40px;
+        border: 1px solid gray;
+        margin: 5px; /* just for visual separation */
+        float: left;
+      }
+
+      .flexbox > * {
+        background: yellow;
+        border: 1px solid black;
+        height: 20px;
+      }
+   </style>
+  </head>
+  <body>
+    <!-- ZEROTH ROW: NO MARGINS -->
+    <!-- No margins on flex item: -->
+    <div class="flexbox">
+      <div>a</div>
+    </div>
+
+
+    <!-- FIRST ROW: SETTING MARGIN-TOP: -->
+    <br style="clear: both"/>
+
+    <!-- auto: -->
+    <div class="flexbox">
+      <div style="margin-top: 18px">a</div>
+    </div>
+
+    <!-- Negative: -->
+    <div class="flexbox">
+      <div style="margin-top: -4px">a</div>
+    </div>
+
+    <!-- Small: -->
+    <div class="flexbox">
+      <div style="margin-top: 4px">a</div>
+    </div>
+
+    <!-- Large (pushing us out of container): -->
+    <div class="flexbox">
+      <div style="margin-top: 25px">a</div>
+    </div>
+
+
+    <!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
+    <br style="clear: both"/>
+
+    <!-- auto: -->
+    <div class="flexbox">
+      <div>a</div>
+    </div>
+
+    <!-- Negative: -->
+    <div class="flexbox">
+      <div>a</div>
+    </div>
+
+    <!-- Small: -->
+    <div class="flexbox">
+      <div>a</div>
+    </div>
+
+    <!-- Large: -->
+    <div class="flexbox">
+      <div>a</div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002.xhtml
new file mode 100644
index 000000000..8aa364ec5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-002.xhtml
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how a baseline-aligned flex item's position is impacted by
+     cross-axis margins, in a fixed-size flex container.
+  -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
+    <link rel="match" href="flexbox-align-self-baseline-horiz-002-ref.xhtml"/>
+    <style>
+      .flexbox {
+        display: flex;
+        align-items: baseline;
+        width: 40px;
+        height: 40px;
+        border: 1px solid gray;
+        margin: 5px; /* just for visual separation */
+        float: left;
+      }
+
+      .flexbox > * {
+        background: yellow;
+        border: 1px solid black;
+        height: 20px;
+        flex: 1;
+      }
+   </style>
+  </head>
+  <body>
+    <!-- ZEROTH ROW: NO MARGINS -->
+    <!-- No margins on flex item: -->
+    <div class="flexbox">
+      <div>a</div>
+    </div>
+
+
+    <!-- FIRST ROW: SETTING MARGIN-TOP: -->
+    <br style="clear: both"/>
+
+    <!-- auto: -->
+    <div class="flexbox">
+      <div style="margin-top: auto">a</div>
+    </div>
+
+    <!-- Negative: -->
+    <div class="flexbox">
+      <div style="margin-top: -4px">a</div>
+    </div>
+
+    <!-- Small: -->
+    <div class="flexbox">
+      <div style="margin-top: 4px">a</div>
+    </div>
+
+    <!-- Large (pushing us out of container): -->
+    <div class="flexbox">
+      <div style="margin-top: 25px">a</div>
+    </div>
+
+
+    <!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
+    <br style="clear: both"/>
+
+    <!-- auto: -->
+    <div class="flexbox">
+      <div style="margin-bottom: auto">a</div>
+    </div>
+
+    <!-- Negative: -->
+    <div class="flexbox">
+      <div style="margin-bottom: -4px">a</div>
+    </div>
+
+    <!-- Small: -->
+    <div class="flexbox">
+      <div style="margin-bottom: 4px">a</div>
+    </div>
+
+    <!-- Large: -->
+    <div class="flexbox">
+      <div style="margin-bottom: 25px">a</div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003-ref.xhtml
new file mode 100644
index 000000000..6e941360f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003-ref.xhtml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        width: 40px;
+        height: 40px;
+        border: 1px solid gray;
+        margin: 5px; /* just for visual separation */
+        float: left;
+      }
+
+      .flexbox > * {
+        background: yellow;
+        border: 1px solid black;
+        height: 20px;
+      }
+   </style>
+  </head>
+  <body>
+    <!-- ZEROTH ROW: NO MARGINS -->
+    <!-- No margins on flex item: -->
+    <div class="flexbox">
+      <div style="margin-top: 18px">a</div>
+    </div>
+
+
+    <!-- FIRST ROW: SETTING MARGIN-TOP: -->
+    <br style="clear: both"/>
+
+    <!-- auto: -->
+    <div class="flexbox">
+      <div style="margin-top: 18px">a</div>
+    </div>
+
+    <!-- Negative: -->
+    <div class="flexbox">
+      <div style="margin-top: 18px">a</div>
+    </div>
+
+    <!-- Small: -->
+    <div class="flexbox">
+      <div style="margin-top: 18px">a</div>
+    </div>
+
+    <!-- Large (pushing us out of container): -->
+    <div class="flexbox">
+      <div style="margin-top: 18px">a</div>
+    </div>
+
+
+    <!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
+    <br style="clear: both"/>
+
+    <!-- auto: -->
+    <div class="flexbox">
+      <div>a</div>
+    </div>
+
+    <!-- Negative: -->
+    <div class="flexbox">
+      <div style="margin-top: 22px">a</div>
+    </div>
+
+    <!-- Small: -->
+    <div class="flexbox">
+      <div style="margin-top: 14px">a</div>
+    </div>
+
+    <!-- Large: -->
+    <div class="flexbox">
+      <div style="margin-top: -7px">a</div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003.xhtml
new file mode 100644
index 000000000..0b8e8499c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-003.xhtml
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how a baseline-aligned flex item's position is impacted by
+     cross-axis margins, in a fixed-size flex container with the cross axis
+     reversed via "flex-wrap: wrap-reverse".
+  -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Baseline alignment of flex items in fixed-size single-line flex container, with cross axis reversed</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
+    <link rel="match" href="flexbox-align-self-baseline-horiz-003-ref.xhtml"/>
+    <style>
+      .flexbox {
+        display: flex;
+        align-items: baseline;
+        flex-wrap: wrap-reverse; /* Just to flip cross-axis */
+        width: 40px;
+        height: 40px;
+        border: 1px solid gray;
+        margin: 5px; /* just for visual separation */
+        float: left;
+      }
+
+      .flexbox > * {
+        background: yellow;
+        border: 1px solid black;
+        height: 20px;
+        flex: 1;
+      }
+   </style>
+  </head>
+  <body>
+    <!-- ZEROTH ROW: NO MARGINS -->
+    <!-- No margins on flex item: -->
+    <div class="flexbox">
+      <div>a</div>
+    </div>
+
+
+    <!-- FIRST ROW: SETTING MARGIN-TOP: -->
+    <br style="clear: both"/>
+
+    <!-- auto: -->
+    <div class="flexbox">
+      <div style="margin-top: auto">a</div>
+    </div>
+
+    <!-- Negative: -->
+    <div class="flexbox">
+      <div style="margin-top: -4px">a</div>
+    </div>
+
+    <!-- Small: -->
+    <div class="flexbox">
+      <div style="margin-top: 4px">a</div>
+    </div>
+
+    <!-- Large (pushing us out of container): -->
+    <div class="flexbox">
+      <div style="margin-top: 25px">a</div>
+    </div>
+
+
+    <!-- SECOND ROW: SETTING MARGIN-BOTTOM: -->
+    <br style="clear: both"/>
+
+    <!-- auto: -->
+    <div class="flexbox">
+      <div style="margin-bottom: auto">a</div>
+    </div>
+
+    <!-- Negative: -->
+    <div class="flexbox">
+      <div style="margin-bottom: -4px">a</div>
+    </div>
+
+    <!-- Small: -->
+    <div class="flexbox">
+      <div style="margin-bottom: 4px">a</div>
+    </div>
+
+    <!-- Large: -->
+    <div class="flexbox">
+      <div style="margin-bottom: 25px">a</div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004-ref.xhtml
new file mode 100644
index 000000000..73a312375
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004-ref.xhtml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+     align-self, in a multi-line flex container.
+
+     This reference case just consists of three single-line flex containers,
+     to match the testcase's one flex container with three flex lines.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        display: flex;
+        align-items: baseline;
+        width: 90px;
+      }
+
+      .flexbox > * {
+        width: 28px;
+        background: yellow;
+        border: 1px solid black;
+      }
+
+      .big    { font: 24px sans-serif; }
+      .medium { font: 14px sans-serif; }
+      .small  { font: 8px sans-serif;  }
+
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <!-- First flex line: Just 3 different sizes of text -->
+      <div class="big">a</div>
+      <div class="small">b</div>
+      <div class="medium">c</div>
+    </div>
+    <div class="flexbox">
+      <!-- Second flex line: different margin/padding amounts on each item,
+           and one non-baseline-aligned item.-->
+      <div class="medium" style="padding-top: 10px">d</div>
+      <div class="medium" style="margin-bottom: 8px">e</div>
+      <div class="medium" style="align-self: stretch">f</div>
+    </div>
+    <div class="flexbox">
+      <!-- Third flex line: other margin/padding amounts on each item -->
+      <div class="small" style="margin-top: 20px">g</div>
+      <div class="big">h</div>
+      <div class="medium" style="padding-bottom: 6px">i</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004.xhtml
new file mode 100644
index 000000000..14fbf4bc6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-004.xhtml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+     align-self, implicitly), in a multi-line flex container.
+     This test baseline-aligns variously-sized flex items, and the container's
+     vertical size depends on the aggregate post-alignment height of its items.
+  -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
+    <link rel="match" href="flexbox-align-self-baseline-horiz-004-ref.xhtml"/>
+    <style>
+      .flexbox {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        width: 90px;
+      }
+
+      .flexbox > * {
+        width: 28px; /* 3 items per Flex Line */
+        background: yellow;
+        border: 1px solid black;
+      }
+
+      .big    { font: 24px sans-serif; }
+      .medium { font: 14px sans-serif; }
+      .small  { font: 8px sans-serif;  }
+
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <!-- First flex line: Just 3 different sizes of text -->
+      <div class="big">a</div>
+      <div class="small">b</div>
+      <div class="medium">c</div>
+
+      <!-- Second flex line: different margin/padding amounts on each item,
+           and one non-baseline-aligned item.-->
+      <div class="medium" style="padding-top: 10px">d</div>
+      <div class="medium" style="margin-bottom: 8px">e</div>
+      <div class="medium" style="align-self: stretch">f</div>
+
+      <!-- Third flex line: other margin/padding amounts on each item -->
+      <div class="small" style="margin-top: 20px">g</div>
+      <div class="big">h</div>
+      <div class="medium" style="padding-bottom: 6px">i</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005-ref.xhtml
new file mode 100644
index 000000000..e8b2791f4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005-ref.xhtml
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+     align-self, in a multi-line flex container.
+
+     This reference case just consists of three single-line flex containers,
+     to match the testcase's one flex container with three flex lines.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        display: flex;
+        align-items: baseline;
+        width: 90px;
+      }
+
+      .flexbox > * {
+        width: 28px;
+        background: yellow;
+        border: 1px solid black;
+      }
+
+      .big    { font: 24px sans-serif; }
+      .medium { font: 14px sans-serif; }
+      .small  { font: 8px sans-serif;  }
+
+   </style>
+  </head>
+  <body>
+    <!-- Note: The lines are reversed here with respect to the testcase,
+         due to the testcase's "wrap-reverse". -->
+    <div class="flexbox">
+      <!-- Third flex line: other margin/padding amounts on each item -->
+      <div class="small" style="margin-top: 20px">g</div>
+      <div class="big">h</div>
+      <div class="medium" style="padding-bottom: 6px">i</div>
+    </div>
+    <div class="flexbox">
+      <!-- Second flex line: different margin/padding amounts on each item,
+           and one non-baseline-aligned item.-->
+      <div class="medium" style="padding-top: 10px">d</div>
+      <div class="medium" style="margin-bottom: 8px">e</div>
+      <div class="medium" style="align-self: stretch">f</div>
+    </div>
+    <div class="flexbox">
+      <!-- First flex line: Just 3 different sizes of text -->
+      <div class="big">a</div>
+      <div class="small">b</div>
+      <div class="medium">c</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005.xhtml
new file mode 100644
index 000000000..cfe0d1b02
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-005.xhtml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+     align-self, implicitly), in a wrap-reverse multi-line flex container.
+     This test baseline-aligns variously-sized flex items, and the container's
+     vertical size depends on the aggregate post-alignment height of its items.
+  -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a multi-line flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
+    <link rel="match" href="flexbox-align-self-baseline-horiz-005-ref.xhtml"/>
+    <style>
+      .flexbox {
+        display: flex;
+        flex-wrap: wrap-reverse;
+        align-items: baseline;
+        width: 90px;
+      }
+
+      .flexbox > * {
+        width: 28px; /* 3 items per Flex Line */
+        background: yellow;
+        border: 1px solid black;
+      }
+
+      .big    { font: 24px sans-serif; }
+      .medium { font: 14px sans-serif; }
+      .small  { font: 8px sans-serif;  }
+
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <!-- First flex line: Just 3 different sizes of text -->
+      <div class="big">a</div>
+      <div class="small">b</div>
+      <div class="medium">c</div>
+
+      <!-- Second flex line: different margin/padding amounts on each item,
+           and one non-baseline-aligned item.-->
+      <div class="medium" style="padding-top: 10px">d</div>
+      <div class="medium" style="margin-bottom: 8px">e</div>
+      <div class="medium" style="align-self: stretch">f</div>
+
+      <!-- Third flex line: other margin/padding amounts on each item -->
+      <div class="small" style="margin-top: 20px">g</div>
+      <div class="big">h</div>
+      <div class="medium" style="padding-bottom: 6px">i</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml
new file mode 100644
index 000000000..50036ff6d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of the 'baseline' value for align-items and
+     align-self when tested against content with an orthogonal writing-mode.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+    <style>
+      .container {
+        display: flex;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+        height: 50px;
+      }
+
+      .ortho  { writing-mode: vertical-rl;
+                width: 17px;
+                height: 40px;
+                float: left; }
+      .offset { margin-top: 10px;
+                margin-bottom: 3px; }
+
+      .start  { align-self: flex-start; }
+      .end    { align-self: flex-end; }
+
+      .lime   { background: lime;   }
+      .yellow { background: yellow; }
+      .orange { background: orange; }
+      .pink   { background: pink;   }
+   </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="lime ortho start">ortho</div
+      ><div class="yellow offset start">one line</div
+      ><div class="orange offset start">two<br/>lines</div
+      ><div class="pink offset start">offset</div>
+    </div>
+    <div class="container">
+      <div class="lime ortho end">ortho</div
+      ><div class="yellow offset end">one line</div
+      ><div class="orange offset end">two<br/>lines</div
+      ><div class="pink offset end">offset</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml
new file mode 100644
index 000000000..417f96658
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+     align-self, implicitly). This test baseline-aligns various types of
+     content against content that is exempt from alignment due to an
+     orthognal writing-mode.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
+    <link rel="match" href="flexbox-align-self-baseline-horiz-006-ref.xhtml"/>
+    <style>
+      .container {
+        display: flex;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+        height: 50px;
+      }
+
+      .base     { align-items: baseline; }
+      .lastbase { align-items: last baseline; }
+
+      .ortho  { writing-mode: vertical-rl;
+                width: 17px;
+                height: 40px; }
+      .offset { margin-top: 10px;
+                margin-bottom: 3px; }
+
+      .lime   { background: lime;   }
+      .yellow { background: yellow; }
+      .orange { background: orange; }
+      .pink   { background: pink;   }
+    </style>
+  </head>
+  <body>
+    <div class="container base">
+      <div class="lime ortho">ortho</div>
+      <div class="yellow">one line</div>
+      <div class="orange">two<br/>lines</div>
+      <div class="pink offset">offset</div>
+    </div>
+    <div class="container lastbase">
+      <div class="lime ortho">ortho</div>
+      <div class="yellow">one line</div>
+      <div class="orange">two<br/>lines</div>
+      <div class="pink offset">offset</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007-ref.xhtml
new file mode 100644
index 000000000..37520d66c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007-ref.xhtml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for behavior of 'baseline' and 'last baseline' values
+     for align-items and align-self.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+    <style>
+      .container {
+        display: flex;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+        height: 50px;
+      }
+
+      .start  { align-self: flex-start; }
+      .end    { align-self: flex-end; }
+
+      .offset { margin-top: 10px;
+                margin-bottom: 3px; }
+
+      .lime   { background: lime;   }
+      .yellow { background: yellow; }
+      .orange { background: orange; }
+      .pink   { background: pink;   }
+   </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="lime offset start">one line (first)</div
+      ><div class="yellow offset end">one line (last)</div
+      ><div class="orange offset end">two<br/>lines and offset (last)</div
+      ><div class="pink offset start">offset (first)</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007.xhtml
new file mode 100644
index 000000000..50d74f5eb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-007.xhtml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of 'baseline' and 'last baseline' values
+     for align-items (and align-self, implicitly). This test confirms
+     non-interference between the 'baseline' and 'last baseline' items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Baseline alignment of block flex items with 'baseline' and 'last-baseline' values for 'align-self' against each other.</title>
+    <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
+    <link rel="match" href="flexbox-align-self-baseline-horiz-007-ref.xhtml"/>
+    <style>
+      .container {
+        display: flex;
+        border: 1px dashed blue;
+        font: 14px sans-serif;
+        height: 50px;
+      }
+
+      .base      { align-self: baseline; }
+      .lastbase { align-self: last baseline; }
+
+      .offset { margin-top: 10px;
+                margin-bottom: 3px; }
+
+      .lime   { background: lime;   }
+      .yellow { background: yellow; }
+      .orange { background: orange; }
+      .pink   { background: pink;   }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="lime base">one line (first)</div>
+      <div class="yellow lastbase">one line (last)</div>
+      <div class="orange offset lastbase">two<br/>lines and offset (last)</div>
+      <div class="pink offset base">offset (first)</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-block.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-block.xhtml
new file mode 100644
index 000000000..569312a70
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-block.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-horiz-001-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 200px;
+        display: inline-flex;
+        font-size: 10px;
+        line-height: 10px;
+
+        /* Any children whose align-self is 'auto' (or unspecified, or
+           initial) will end up taking this value from us: */
+        align-items: center;
+
+        /* Any children whose align-self is 'inherit' will end up
+           inheriting this value from us: */
+        align-self: flex-end;
+      }
+
+      .flexbox > div {
+        width: 40px;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+      .auto {
+        background: yellow;
+        align-self: auto;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+        align-self: initial;
+      }
+      .inherit {
+        background: violet;
+        align-self: inherit;
+      }
+      .left {
+        background: tan;
+        align-self: left;
+      }
+      .right {
+        background: brown;
+        align-self: right;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto">auto</div>
+      <div class="unspecified">unspec</div>
+      <div class="initial">initial</div>
+      <div class="inherit">inherit</div>
+      <div class="left">left</div>
+      <div class="right">right</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-ref.xhtml
new file mode 100644
index 000000000..356ab3d1c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-ref.xhtml
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using floated divs
+     in place of flex items and using margin-top in place of the align-items /
+     align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 200px;
+        width: 640px;
+        font-size: 10px;
+        line-height: 10px;
+      }
+
+      .flexbox > div {
+        width: 40px;
+        float: left;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+      }
+      .flex-end {
+        background: orange;
+      }
+      .center {
+        background: lightblue;
+      }
+      .baseline {
+        background: teal;
+      }
+      .stretch {
+        background: pink;
+      }
+      .auto {
+        background: yellow;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+      }
+      .inherit {
+        background: violet;
+      }
+      .left {
+        background: tan;
+      }
+      .right {
+        background: brown;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end" style="margin-top: 190px">end</div>
+      <div class="flex-end big"  style="margin-top: 100px">a b c d e f</div>
+      <div class="center" style="margin-top: 95px">center</div>
+      <div class="center big" style="margin-top: 50px">a b c d e f</div>
+      <!-- We use inline-blocks inside of a wrapper-block as references for the
+           baseline-aligned flex items, since inline-blocks get
+           baseline-aligned in block layout. We also need to specify the widths
+           manually here since the "flexbox > div" child-selector doesn't
+           handle these guys (since they're grandchildren).
+        -->
+      <div style="width: 80px">
+        <div class="baseline"
+             style="width: 40px; display: inline-block">base</div
+       ><div class="baseline big"
+             style="width: 40px; display: inline-block">abc</div>
+      </div>
+      <div class="stretch" style="height: 100%">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto" style="margin-top: 95px">auto</div>
+      <div class="unspecified" style="margin-top: 95px">unspec</div>
+      <div class="initial" style="margin-top: 95px">initial</div>
+      <div class="inherit" style="margin-top: 190px">inherit</div>
+      <div class="left">left</div>
+      <div class="right">right</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-table.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-table.xhtml
new file mode 100644
index 000000000..10180adac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-001-table.xhtml
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the various 'align-self' property values on flex items that are tables</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-horiz-001-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 200px;
+        display: inline-flex;
+        font-size: 10px;
+        line-height: 10px;
+
+        /* Any children whose align-self is 'auto' (or unspecified, or
+           initial) will end up taking this value from us: */
+        align-items: center;
+
+        /* Any children whose align-self is 'inherit' will end up
+           inheriting this value from us: */
+        align-self: flex-end;
+      }
+
+      .flexbox > * {
+        display: table;
+        width: 40px;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+        display: block; /* XXXdholbert Hackaround for bug 799725 */
+      }
+      .auto {
+        background: yellow;
+        align-self: auto;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+        align-self: initial;
+      }
+      .inherit {
+        background: violet;
+        align-self: inherit;
+      }
+      .left {
+        background: tan;
+        align-self: left;
+      }
+      .right {
+        background: brown;
+        align-self: right;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto">auto</div>
+      <div class="unspecified">unspec</div>
+      <div class="initial">initial</div>
+      <div class="inherit">inherit</div>
+      <div class="left">left</div>
+      <div class="right">right</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml
new file mode 100644
index 000000000..59d13a645
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002-ref.xhtml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using floated divs
+     in place of flex items and using relative positioning in place of the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 200px;
+        display: inline-block;
+        font-size: 10px;
+        line-height: 10px;
+        vertical-align: top;
+      }
+
+      .flexbox > div {  float: left }
+      .flex-start, .flex-end, .center, .baseline, .stretch,
+      .auto, .unspecified, .initial, .inherit {
+        width: 40px;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        position: relative;
+        border-style: dotted;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+      }
+      .flex-end {
+        background: orange;
+      }
+      .center {
+        background: lightblue;
+      }
+      .baseline {
+        background: teal;
+      }
+      .stretch {
+        background: pink;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end" style="top: 172px">end</div>
+      <div class="flex-end big"  style="top: 82px">a b c d e f</div>
+      <div class="center" style="top: 86px">center</div>
+      <div class="center big" style="top: 41px">a b c d e f</div>
+    </div>
+    <br/>
+    <div class="flexbox">
+      <!-- We use inline-blocks inside of a wrapper-block as references for the
+           baseline-aligned flex items, since inline-blocks get
+           baseline-aligned in block layout. We also need to specify the widths
+           manually here since the "flexbox > div" child-selector doesn't
+           handle these guys (since they're grandchildren).
+        -->
+      <div>
+        <div class="baseline"
+             style="display: inline-block">base</div
+       ><div class="baseline big"
+             style="display: inline-block">abc</div>
+      </div>
+      <div class="stretch" style="height: 182px">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002.xhtml
new file mode 100644
index 000000000..cddd5b455
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-002.xhtml
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with
+     margin/border/padding values on each item. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container, with margin/padding/border on the items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-horiz-002-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 200px;
+        display: inline-flex;
+        font-size: 10px;
+        line-height: 10px;
+        vertical-align: top;
+      }
+
+      .flexbox > div {
+        width: 40px;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        border-style: dotted;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+    </div>
+    <br/>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003-ref.xhtml
new file mode 100644
index 000000000..229087cb8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003-ref.xhtml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using floated divs
+     in place of flex items and using relative positioning in place of the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        padding: 3px;
+        width: 600px;
+        height: 4px;
+        font-size: 10px;
+        line-height: 10px;
+        font-family: sans-serif;
+      }
+
+      .flexbox > div {
+        width: 40px;
+        float: left;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+      }
+      .flex-end {
+        background: orange;
+      }
+      .center {
+        background: lightblue;
+      }
+      .baseline {
+        background: teal;
+      }
+      .stretch {
+        background: pink;
+      }
+      .auto {
+        background: yellow;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+      }
+      .inherit {
+        background: violet;
+      }
+      .normal {
+        background: tan;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end" style="position: relative; top: -6px">end</div>
+      <div class="flex-end big"  style="position: relative; top: -96px">a b c d e f</div>
+      <div class="center" style="position: relative; top: -3px">center</div>
+      <div class="center big" style="position: relative; top: -48px">a b c d e f</div>
+      <!-- We use inline-blocks inside of a wrapper-block as references for the
+           baseline-aligned flex items, since inline-blocks get
+           baseline-aligned in block layout. We also need to specify the widths
+           manually here since the "flexbox > div" child-selector doesn't
+           handle these guys (since they're grandchildren).
+        -->
+      <div style="width: 80px">
+        <div class="baseline"
+             style="width: 40px; display: inline-block">base</div
+       ><div class="baseline big"
+             style="width: 40px; display: inline-block">abc</div>
+      </div>
+      <div class="stretch" style="height: 100%">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto" style="height: 100%">auto</div>
+      <div class="unspecified" style="height: 100%">unspec</div>
+      <div class="initial" style="height: 100%">initial</div>
+      <div class="inherit" style="height: 100%">inherit</div>
+      <div class="normal" style="height: 100%">normal</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003.xhtml
new file mode 100644
index 000000000..4414d0a0a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-003.xhtml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being shorter than its items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-horiz-003-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        padding: 3px;
+        height: 4px;
+        display: inline-flex;
+        font-size: 10px;
+        line-height: 10px;
+        font-family: sans-serif;
+      }
+
+      .flexbox > div {
+        width: 40px;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+      .auto {
+        background: yellow;
+        align-self: auto;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+        align-self: initial;
+      }
+      .inherit {
+        background: violet;
+        align-self: inherit;
+      }
+      .normal {
+        background: tan;
+        align-self: normal;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto">auto</div>
+      <div class="unspecified">unspec</div>
+      <div class="initial">initial</div>
+      <div class="inherit">inherit</div>
+      <div class="normal">normal</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004-ref.xhtml
new file mode 100644
index 000000000..5143e07c4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004-ref.xhtml
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using floated divs
+     in place of flex items and using relative positioning in place of the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        padding: 3px;
+        height: 4px;
+        display: inline-block;
+        font-size: 10px;
+        line-height: 10px;
+        font-family: sans-serif;
+        margin-top: 20px;
+        margin-bottom: 120px;
+        vertical-align: top;
+      }
+
+      .flexbox > div {  float: left }
+      .flex-start, .flex-end, .center, .baseline, .stretch,
+      .auto, .unspecified, .initial, .inherit {
+        width: 40px;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        position: relative;
+        border-style: dotted;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+      }
+      .flex-end {
+        background: orange;
+      }
+      .center {
+        background: lightblue;
+      }
+      .baseline {
+        background: teal;
+      }
+      .stretch {
+        background: pink;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end" style="top: -24px">end</div>
+      <div class="flex-end big"  style="top: -114px">a b c d e f</div>
+      <div class="center" style="top: -12px">center</div>
+      <div class="center big" style="top: -57px">a b c d e f</div>
+    </div>
+    <br/>
+    <div class="flexbox">
+      <!-- We use inline-blocks inside of a wrapper-block as references for the
+           baseline-aligned flex items, since inline-blocks get
+           baseline-aligned in block layout. We also need to specify the widths
+           manually here since the "flexbox > div" child-selector doesn't
+           handle these guys (since they're grandchildren).
+        -->
+      <div>
+        <div class="baseline"
+             style="display: inline-block">base</div
+       ><div class="baseline big"
+             style="display: inline-block">abc</div>
+      </div>
+      <div class="stretch" style="height: 2px">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004.xhtml
new file mode 100644
index 000000000..b7bdf396a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-004.xhtml
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being shorter than its items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' with a horizontal flex container that's shorter than its items, with margin/padding/border on the items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-horiz-004-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        padding: 3px;
+        height: 4px;
+        display: inline-flex;
+        font-size: 10px;
+        line-height: 10px;
+        font-family: sans-serif;
+        margin-top: 20px;
+        margin-bottom: 120px;
+        vertical-align: top;
+      }
+
+      .flexbox > div {
+        width: 40px;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        border-style: dotted;
+      }
+
+      .big {
+        height: 100px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        min-height: 2px;
+        align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+    </div>
+    <br/>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005-ref.xhtml
new file mode 100644
index 000000000..48c215ad6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005-ref.xhtml
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior with auto
+     margins in play. This reference case uses fixed margin-top values
+     in place of the testcase's auto margins. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 140px;
+        width: 400px;
+        display: flex;
+        font-size: 10px;
+        line-height: 10px;
+        margin-bottom: 10px;
+      }
+
+      .kidsAutoTop > div      { margin-top: 130px;   }
+      .kidsAutoTop > div.big  { margin-top: 60px;   }
+      .kidsAutoBoth > div     { margin-top: 65px; }
+      .kidsAutoBoth > div.big { margin-top: 30px; }
+
+      .flexbox > div {
+        width: 40px;
+        height: 10px;
+      }
+
+      .flexbox > div.big {
+        height: 80px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+      }
+      .flex-end {
+        background: orange;
+      }
+      .center {
+        background: lightblue;
+      }
+      .baseline {
+        background: teal;
+      }
+      .stretch {
+        background: pink;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox kidsAutoTop">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+
+    <div class="flexbox kidsAutoBottom">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+
+    <div class="flexbox kidsAutoBoth">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005.xhtml
new file mode 100644
index 000000000..cff89d325
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-horiz-005.xhtml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior with auto margins in
+     play (which should negate the effects of align-items / align-self,
+     because there won't be any available space in which to align the item
+     after the auto margins are resolved).  -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' with auto margins in play, in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/>
+    <link rel="match" href="flexbox-align-self-horiz-005-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        height: 140px;
+        width: 400px;
+        display: flex;
+        font-size: 10px;
+        line-height: 10px;
+        margin-bottom: 10px;
+      }
+
+      .kidsAutoTop > div    { margin-top: auto;    }
+      .kidsAutoBottom > div { margin-bottom: auto; }
+      .kidsAutoBoth > div   { margin: auto 0; }
+
+      .flexbox > div {
+        width: 40px;
+      }
+
+      .flexbox > div.big {
+        height: 80px;
+        font-size: 20px;
+        line-height: 20px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox kidsAutoTop">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+
+    <div class="flexbox kidsAutoBottom">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+
+    <div class="flexbox kidsAutoBoth">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">a b c d e f</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001-ref.html
new file mode 100644
index 000000000..3ffa8647b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- In this reference case, we just have the testcases's text placed directly
+     in the outermost wrapper-block, with a lime background on that wrapper
+     instead of on a flex item.
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.fixedWidthWrapper {
+      width: 200px;
+      /* Small enough that 3 characters can _easily_ fit in our width */
+      font-size: 12px;
+      background: lime;
+    }
+  </style>
+</head>
+<body>
+  <div class="fixedWidthWrapper">
+    A B C
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001.html
new file mode 100644
index 000000000..578dff9ca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the sizing of a stretched horizontal flex container in a vertical flex container</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
+  <link rel="match" href="flexbox-align-self-stretch-vert-001-ref.html">
+  <meta name="assert" content="If a stretched flex item's main size is influenced by its cross size, and the flex container has a definite cross size, then the item's cross size should be resolved early so that it can be used when determining the item's main size">
+  <meta name="assert" content="https://drafts.csswg.org/css-flexbox/issues-cr-2012#issue-23">
+  <meta charset="utf-8">
+  <style>
+    div.fixedWidthWrapper {
+      width: 200px;
+      /* Small enough that 3 characters can _easily_ fit in our width */
+      font-size: 12px;
+    }
+    div.vertContainer {
+      display: flex;
+      flex-direction: column;
+    }
+    div.vertItem {
+      background: red;
+    }
+    div.horizContainer {
+      display: flex;
+    }
+    div.horizItem {
+      flex: 1;
+      background: lime;
+    }
+  </style>
+</head>
+<body>
+  <div class="fixedWidthWrapper">
+    <div class="vertContainer">
+      <div class="vertItem">
+        <div class="horizContainer">
+          <div class="horizItem">A B C</div>
+          <div class="horizItem"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002-ref.html
new file mode 100644
index 000000000..4e02cd8b1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- In this reference case, we use floated fixed-sized divs to mimic the
+     testcases's flex items.
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.container {
+      width: 100px;
+      height: 20px;
+      border: 2px solid black;
+    }
+    div.item {
+      width:  48px;
+      height: 15px;
+      float: left;
+      border: 1px dotted blue;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002.html
new file mode 100644
index 000000000..c2b903011
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-stretch-vert-002.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the sizing of stretched flex items in a vertical multi-line flex container</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
+  <link rel="match" href="flexbox-align-self-stretch-vert-002-ref.html">
+  <meta name="assert" content="In a multi-line flex container, flex items should not be stretched (in the cross axis) until after wrapping has been performed.">
+  <meta charset="utf-8">
+  <style>
+    div.container {
+      display: flex;
+      flex-flow: column wrap;
+      width: 100px;
+      height: 20px;
+      border: 2px solid black;
+    }
+    div.item {
+      /* Tall enough to force wrapping (since parent height is 20px): */
+      min-height: 15px;
+      border: 1px dotted blue;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001-ref.xhtml
new file mode 100644
index 000000000..1d19034a1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001-ref.xhtml
@@ -0,0 +1,119 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using blocks in
+     place of flex items and using float and width keywords to emulate the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        font-size: 10px;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      .flexbox > * {
+        clear: both;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        float: left;
+      }
+      .flex-end {
+        background: orange;
+        float: right;
+      }
+      .center {
+        background: lightblue;
+        margin: auto;
+      }
+      .baseline {
+        background: teal;
+        float: left;
+      }
+      .stretch {
+        background: pink;
+        width: 100%;
+      }
+      .auto {
+        background: yellow;
+        margin: auto;
+      }
+      .unspecified {
+        background: lightgreen;
+        margin: auto;
+      }
+      .initial {
+        background: aqua;
+        margin: auto;
+      }
+      .inherit {
+        background: violet;
+        float: right;
+      }
+      .left {
+        background: tan;
+        float: left;
+      }
+      .right {
+        background: brown;
+        float: right;
+      }
+
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. -->
+      .centerParent {
+        text-align: center;
+      }
+      .centerParent > * {
+        display: inline-block;
+        text-align: left; /* Keep parent's centering from tweaking my text */
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="centerParent">
+        <div class="center">center</div>
+      </div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="centerParent">
+        <div class="auto">auto</div>
+      </div>
+      <div class="centerParent">
+        <div class="unspecified">unspec</div>
+      </div>
+      <div class="centerParent">
+        <div class="initial">initial</div>
+      </div>
+      <div class="inherit">inherit</div>
+      <div class="left">left</div>
+      <div class="right">right</div>
+      <!-- Since the last three divs are floated, the container doesn't include
+           their heights by default. So we add some invisible hacky text (of the
+           same font) to make sure our container is tall enough. -->
+      <span style="visibility:hidden">hacky text<br/>(line 2)<br/>(line 3)</span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001.xhtml
new file mode 100644
index 000000000..e611f48fc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-001.xhtml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-vert-001-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        font-size: 10px;
+
+        /* Any children whose align-self is 'auto' (or unspecified, or
+           initial) will end up taking this value from us: */
+        align-items: center;
+
+        /* Any children whose align-self is 'inherit' will end up
+           inheriting this value from us: */
+        align-self: flex-end;
+      }
+
+      .big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+      .auto {
+        background: yellow;
+        align-self: auto;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+        align-self: initial;
+      }
+      .inherit {
+        background: violet;
+        align-self: inherit;
+      }
+      .left {
+        background: tan;
+        align-self: left;
+      }
+      .right {
+        background: brown;
+        align-self: right;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto">auto</div>
+      <div class="unspecified">unspec</div>
+      <div class="initial">initial</div>
+      <div class="inherit">inherit</div>
+      <div class="left">left</div>
+      <div class="right">right</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml
new file mode 100644
index 000000000..3a5ad06a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002-ref.xhtml
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using blocks in
+     place of flex items and using float and width keywords to emulate the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        float: left;
+        font-size: 10px;
+      }
+
+      .flex-start, .flex-end, .center, .baseline, .stretch {
+        clear: both;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        float: left;
+      }
+      .flex-end {
+        background: orange;
+        float: right;
+      }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. -->
+      .centerParent {
+        text-align: center;
+      }
+      .center {
+        background: lightblue;
+        display: inline-block;
+        text-align: left; /* Keep parent's centering from tweaking my text */
+      }
+      .baseline {
+        background: teal;
+        float: left;
+      }
+      .stretch {
+        background: pink;
+      }
+      .clearFloats { clear: both }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="clearFloats"></div>
+      <div class="centerParent">
+        <div class="center">center</div>
+      </div>
+      <div class="centerParent">
+        <div class="center big">a b c d e f</div>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="clearFloats"></div>
+      <div class="stretch">stretch</div>
+      <!-- Force a 3px + 1px = 4px margin between this and the previous div
+           (to thwart the effects of margin-collapsing). This is the only
+           place we need this hack, because everywhere else in this test
+           we use floats or inline-blocks, whose margins don't collapse. -->
+      <div class="stretch big" style="margin-top: 4px">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml
new file mode 100644
index 000000000..c45d737bf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-002.xhtml
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with
+     margin/border/padding values on each item. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-vert-002-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        float: left;
+        font-size: 10px;
+      }
+
+      .flexbox > div {
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003-ref.xhtml
new file mode 100644
index 000000000..4412b3931
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003-ref.xhtml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using blocks in
+     place of flex items and using float and width keywords to emulate the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        float: left;
+      }
+      .flex-end {
+        background: orange;
+        float: right;
+      }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. For this to work, the parent has to be at
+           least as wide as the centered content inside of it, so we make it
+           large with a negative margin such that its center aligns with the
+           4px-wide container's center. -->
+      .centerParent {
+        text-align: center;
+        width: 100px;
+        margin-left: -48px;
+      }
+      .center {
+        background: lightblue;
+        display: inline-block;
+        text-align: left; /* Keep parent's centering from tweaking my text */
+      }
+      .baseline {
+        background: teal;
+        float: left;
+      }
+      .stretch {
+        background: pink;
+      }
+      .clearFloats { clear: both }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+      <div class="centerParent clearFloats">
+        <div class="center">center</div>
+      </div>
+      <div class="centerParent">
+        <div class="center big">a b</div>
+      </div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch clearFloats">stretch</div>
+      <div class="stretch big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003.xhtml
new file mode 100644
index 000000000..23b320941
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-003.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being skinnier than its items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-vert-003-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        display: flex;
+        flex-direction: column;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+      <div class="center">center</div>
+      <div class="center big">a b</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004-ref.xhtml
new file mode 100644
index 000000000..b63c2c7fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004-ref.xhtml
@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior, using blocks in
+     place of flex items and using float and width keywords to emulate the
+     align-items / align-self properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        float: left;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      .flex-start, .flex-end, .center, .baseline, .stretch {
+        clear: both;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        float: left;
+      }
+      .flex-end {
+        background: orange;
+        float: right;
+      }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. For this to work, the parent has to be at
+           least as wide as the centered content inside of it, so we make it
+           large with a negative margin such that its center aligns with the
+           4px-wide container's center. -->
+      .centerParent {
+        text-align: center;
+        width: 100px;
+        margin-left: -48px;
+      }
+      .center {
+        background: lightblue;
+        display: inline-block;
+        text-align: left; /* Keep parent's centering from tweaking my text */
+      }
+      .baseline {
+        background: teal;
+        float: left;
+      }
+      .stretch {
+        background: pink;
+      }
+      .clearFloats { clear: both }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+      <div class="centerParent">
+        <div class="center">center</div>
+      </div>
+      <div class="centerParent">
+        <div class="center big">a b</div>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="clearFloats"></div>
+      <div class="stretch">stretch</div>
+      <!-- Force a 3px + 1px = 4px margin between this and the previous div
+           (to thwart the effects of margin-collapsing). This is the only
+           place we need this hack, because everywhere else in this test
+           we use floats or inline-blocks, whose margins don't collapse. -->
+      <div class="stretch big" style="margin-top: 4px">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004.xhtml
new file mode 100644
index 000000000..4c5287574
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-004.xhtml
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being skinnier than its items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-vert-004-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        display: flex;
+        flex-direction: column;
+        float: left;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      .flexbox > div {
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+      <div class="center">center</div>
+      <div class="center big">a b</div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml
new file mode 100644
index 000000000..a9235f07e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml
@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior in a vertical
+     "direction: rtl" flex container, using blocks in place of flex items and
+     using float and width keywords to emulate the align-items / align-self
+     properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        direction: rtl;
+        font-family: sans-serif;
+        font-size: 10px;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      .flexbox > * {
+        clear: both;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        float: right;
+      }
+      .flex-end {
+        background: orange;
+        float: left;
+      }
+      .center {
+        background: lightblue;
+        margin: auto;
+      }
+      .baseline {
+        background: teal;
+        float: right;
+      }
+      .stretch {
+        background: pink;
+        width: 100%;
+      }
+      .auto {
+        background: yellow;
+        margin: auto;
+      }
+      .unspecified {
+        background: lightgreen;
+        margin: auto;
+      }
+      .initial {
+        background: aqua;
+        margin: auto;
+      }
+      .inherit {
+        background: violet;
+        float: left;
+      }
+      .left {
+        background: tan;
+        float: left;
+      }
+      .right {
+        background: brown;
+        float: right;
+      }
+
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. -->
+      .centerParent {
+        text-align: center;
+      }
+      .centerParent > * {
+        display: inline-block;
+        text-align: left; /* Keep parent's centering from tweaking my text */
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="centerParent">
+        <div class="center">center</div>
+      </div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="centerParent">
+        <div class="auto">auto</div>
+      </div>
+      <div class="centerParent">
+        <div class="unspecified">unspec</div>
+      </div>
+      <div class="centerParent">
+        <div class="initial">initial</div>
+      </div>
+      <div class="inherit">inherit</div>
+      <div class="left">left</div>
+      <div class="right">right</div>
+      <!-- Since the last three divs are floated, the container doesn't include
+           their heights by default. So we add some invisible hacky text (of the
+           same font) to make sure our container is tall enough. -->
+      <span style="visibility:hidden">hacky text<br/>(line 2)<br/>(line 3)</span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001.xhtml
new file mode 100644
index 000000000..d0ef2963c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001.xhtml
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with
+     "direction: rtl" to swap the horizontal (cross) axis. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' property values on flex items that are blocks, in a vertical flex container with 'direction: rtl'</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-vert-rtl-001-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        direction: rtl;
+        font-family: sans-serif;
+        font-size: 10px;
+
+        /* Any children whose align-self is 'auto' (or unspecified, or
+           initial) will end up taking this value from us: */
+        align-items: center;
+
+        /* Any children whose align-self is 'inherit' will end up
+           inheriting this value from us: */
+        align-self: flex-end;
+      }
+
+      .big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+      .auto {
+        background: yellow;
+        align-self: auto;
+      }
+      .unspecified {
+        background: lightgreen;
+      }
+      .initial {
+        background: aqua;
+        align-self: initial;
+      }
+      .inherit {
+        background: violet;
+        align-self: inherit;
+      }
+      .left {
+        background: tan;
+        align-self: left;
+      }
+      .right {
+        background: brown;
+        align-self: right;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+      <div class="auto">auto</div>
+      <div class="unspecified">unspec</div>
+      <div class="initial">initial</div>
+      <div class="inherit">inherit</div>
+      <div class="left">left</div>
+      <div class="right">right</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002-ref.xhtml
new file mode 100644
index 000000000..16cd5611c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002-ref.xhtml
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior in a vertical
+     "direction: rtl" flex container, using blocks in place of flex items and
+     using float and width keywords to emulate the align-items / align-self
+     properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        float: left;
+        direction: rtl;
+        font-family: sans-serif;
+        font-size: 10px;
+      }
+
+      .flex-start, .flex-end, .center, .baseline, .stretch {
+        clear: both;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        float: right;
+      }
+      .flex-end {
+        background: orange;
+        float: left;
+      }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. -->
+      .centerParent {
+        text-align: center;
+      }
+      .center {
+        background: lightblue;
+        display: inline-block;
+        text-align: right; /* Keep parent's centering from tweaking my text */
+      }
+      .baseline {
+        background: teal;
+        float: right;
+      }
+      .stretch {
+        background: pink;
+      }
+      .clearFloats { clear: both }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="clearFloats"></div>
+      <div class="centerParent">
+        <div class="center">center</div>
+      </div>
+      <div class="centerParent">
+        <div class="center big">a b c d e f</div>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="clearFloats"></div>
+      <div class="stretch">stretch</div>
+      <!-- Force a 3px + 1px = 4px margin between this and the previous div
+           (to thwart the effects of margin-collapsing). This is the only
+           place we need this hack, because everywhere else in this test
+           we use floats or inline-blocks, whose margins don't collapse. -->
+      <div class="stretch big" style="margin-top: 4px">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002.xhtml
new file mode 100644
index 000000000..a3a81e25d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-002.xhtml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with
+     margin/border/padding values on each, and with "direction: rtl" to swap
+     the horizontal (cross) axis item. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container, with margin/padding/border on the items and with 'direction: rtl'</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-vert-rtl-002-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: flex;
+        flex-direction: column;
+        direction: rtl;
+        float: left;
+        font-family: sans-serif;
+        font-size: 10px;
+      }
+
+      .flexbox > div {
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 20px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b c d e f</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b c d e f</div>
+      <div class="center">center</div>
+      <div class="center big">a b c d e f</div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b c d e f</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003-ref.xhtml
new file mode 100644
index 000000000..5be37085a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003-ref.xhtml
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior in a vertical
+     "direction: rtl" flex container, using blocks in place of flex items and
+     using float and width keywords to emulate the align-items / align-self
+     properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        font-family: sans-serif;
+        direction: rtl;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        float: right;
+      }
+      .flex-end {
+        background: orange;
+        float: left;
+      }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. For this to work, the parent has to be at
+           least as wide as the centered content inside of it, so we make it
+           large with a negative margin such that its center aligns with the
+           4px-wide container's center. -->
+      .centerParent {
+        text-align: center;
+        width: 100px;
+        margin-right: -48px;
+      }
+      .center {
+        background: lightblue;
+        display: inline-block;
+        text-align: right; /* Keep parent's centering from tweaking my text */
+      }
+      .baseline {
+        background: teal;
+        float: right;
+      }
+      .stretch {
+        background: pink;
+      }
+      .clearFloats { clear: both }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+      <div class="centerParent clearFloats">
+        <div class="center">center</div>
+      </div>
+      <div class="centerParent">
+        <div class="center big">a b</div>
+      </div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch clearFloats">stretch</div>
+      <div class="stretch big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003.xhtml
new file mode 100644
index 000000000..9a3bfccb3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-003.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being skinnier than its items, and with "direction: rtl" to
+     swap the horizontal (cross) axis. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items and  with 'direction: rtl'</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-vert-rtl-003-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        display: flex;
+        flex-direction: column;
+        direction: rtl;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+      <div class="center">center</div>
+      <div class="center big">a b</div>
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004-ref.xhtml
new file mode 100644
index 000000000..faeb28662
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004-ref.xhtml
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for align-items / align-self behavior in a vertical
+     "direction: rtl" flex container, using blocks in place of flex items and
+     using float and width keywords to emulate the align-items / align-self
+     properties. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        float: left;
+        direction: rtl;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      .flex-start, .flex-end, .center, .baseline, .stretch {
+        clear: both;
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        float: right;
+      }
+      .flex-end {
+        background: orange;
+        float: left;
+      }
+      <!-- We center shrinkwrapped text by putting it into an inline-block, and
+           then wrapping that inline-block in a helper-div that has
+           "text-align:center" set. For this to work, the parent has to be at
+           least as wide as the centered content inside of it, so we make it
+           large with a negative margin such that its center aligns with the
+           4px-wide container's center. -->
+      .centerParent {
+        text-align: center;
+        width: 100px;
+        margin-right: -48px;
+      }
+      .center {
+        background: lightblue;
+        display: inline-block;
+        text-align: right; /* Keep parent's centering from tweaking my text */
+      }
+      .baseline {
+        background: teal;
+        float: right;
+      }
+      .stretch {
+        background: pink;
+      }
+      .clearFloats { clear: both }
+   </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="clearFloats"></div>
+      <div class="stretch">stretch</div>
+      <!-- Force a 3px + 1px = 4px margin between this and the previous div
+           (to thwart the effects of margin-collapsing). This is the only
+           place we need this hack, because everywhere else in this test
+           we use floats or inline-blocks, whose margins don't collapse. -->
+      <div class="stretch big" style="margin-top: 4px">a b</div>
+      <div class="centerParent">
+        <div class="center">center</div>
+      </div>
+      <div class="centerParent">
+        <div class="center big">a b</div>
+      </div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004.xhtml
new file mode 100644
index 000000000..4f4f49afd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-004.xhtml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for align-items / align-self behavior, with all the possible
+     values included on different items within a flex container, and with the
+     flex container being skinnier than its items, and with "direction: rtl" to
+     swap the horizontal (cross) axis. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the behavior of 'align-self' with a vertical flex container that's skinnier than its items, with margin/padding/border on the items and with 'direction: rtl'</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property"/>
+    <link rel="match" href="flexbox-align-self-vert-rtl-004-ref.xhtml"/>
+    <style>
+      .flexbox {
+        border: 1px dashed blue;
+        width: 4px;
+        display: flex;
+        flex-direction: column;
+        direction: rtl;
+        float: left;
+        font-family: sans-serif;
+        font-size: 10px;
+        margin-left: 80px;
+      }
+
+      .flexbox > div {
+        margin:       1px 2px 3px 4px;
+        border-width: 2px 3px 4px 5px;
+        padding:      3px 4px 5px 6px;
+
+        border-style: dotted;
+      }
+
+      div.big {
+        font-size: 18px;
+        width: 50px;
+      }
+
+      /* Classes for each of the various align-self values */
+      .flex-start {
+        background: lime;
+        align-self: flex-start;
+      }
+      .flex-end {
+        background: orange;
+        align-self: flex-end;
+      }
+      .center {
+        background: lightblue;
+        align-self: center;
+      }
+      .baseline {
+        background: teal;
+        align-self: baseline;
+      }
+      .stretch {
+        background: pink;
+        align-self: stretch;
+      }
+   </style>
+  </head>
+  <body>
+    <!-- (NOTE: this test has the "stretch" divs and the "flex-end" divs
+         swapped in the ordering, with respect to the other
+         flexbox-align-self-* testcases.  That's because "stretch" and
+         "flex-end" overflow in opposite directions, and in RTL mode (with 2
+         flex containers side by side), they overflow *at* each other and
+         overlap. If we swap them, they float away from each other and we can
+         still see them.)  -->
+    <div class="flexbox">
+      <div class="flex-start">start</div>
+      <div class="flex-start big">a b</div>
+      <div class="stretch">stretch</div>
+      <div class="stretch big">a b</div>
+      <div class="center">center</div>
+      <div class="center big">a b</div>
+    </div>
+    <div class="flexbox">
+      <div class="baseline">base</div>
+      <div class="baseline big">abc</div>
+      <div class="flex-end">end</div>
+      <div class="flex-end big">a b</div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001-ref.html
new file mode 100644
index 000000000..d14234b45
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+</head>
+<body>
+  a ab bx x
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001.html
new file mode 100644
index 000000000..0c85c46d5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-anonymous-items-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
+  <link rel="match" href="flexbox-anonymous-items-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    a a
+    <div style="order: 1">x x</div>
+    b b
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001-ref.html
new file mode 100644
index 000000000..84e231512
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     unaligned children taken out of baseline-alignment with
+     "vertical-align:top".
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    body {
+      margin: 0;
+      font-size: 20px;
+      line-height: 20px;
+    }
+    .flexContainer {
+      display: inline-block;
+      background: lightblue;
+      vertical-align: top;
+    }
+    .hugeAndUnaligned {
+      font-size: 35px;
+      line-height: 35px;
+      vertical-align: top;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+    }
+    .flexContainer > * { display: inline; }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer">
+    <div class="smallFont">b</div
+    ><div>c</div
+    ><div class="hugeAndUnaligned">d</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">e</div
+    ><div>f</div
+    ><div class="smallFont">g</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">h</div
+    ><div class="smallFont">i</div
+    ><div>j</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001.html
new file mode 100644
index 000000000..a7308f748
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-horiz-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a horizontal flex container
+     with several flex items, some of which have "align-self:baseline".  The
+     spec says this about this case:
+       If any of the flex items on the flex container's first line
+       participate in baseline alignment, the flex container's
+       main-axis baseline is the baseline of those flex items.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a horizontal flex container with baseline-aligned flex items</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-align-self-baseline-horiz-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    body {
+      margin: 0;
+      font-size: 20px;
+      line-height: 20px;
+    }
+    .flexContainer {
+      display: inline-flex;
+      background: lightblue;
+      align-items: baseline;
+    }
+    .hugeAndUnaligned {
+      font-size: 35px;
+      line-height: 35px;
+      /* This one flex item won't be baseline-aligned, so it won't impact
+         the flex container's positioning */
+      align-self: stretch;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer">
+    <div class="smallFont">b</div>
+    <div>c</div>
+    <div class="hugeAndUnaligned">d</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">e</div>
+    <div>f</div>
+    <div class="smallFont">g</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">h</div>
+    <div class="smallFont">i</div>
+    <div>j</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001-ref.html
new file mode 100644
index 000000000..1528298dd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     unaligned children taken out of baseline-alignment with
+     "vertical-align:top".
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css" />
+  <style>
+    body {
+      margin: 0;
+      font: 20px Ahem;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+    .flexContainer {
+      display: inline-block;
+      background: lightblue;
+    }
+    .hugeAndUnaligned {
+      font-size: 35px;
+      line-height: 35px;
+      vertical-align: top;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+      /* Baseline is 0.8em = 8px from top */
+    }
+    * { vertical-align: top }
+  </style>
+</head>
+<body>
+  <div style="display: inline-block; margin-top: 12px">a</div>
+  <div class="flexContainer" style="margin-top: 20px">
+    <div class="smallFont">b</div
+    ><div>c</div
+    ><div class="hugeAndUnaligned">d</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">e</div
+    ><div>f</div
+    ><div class="smallFont">g</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">h</div
+    ><div class="smallFont">i</div
+    ><div>j</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001.html
new file mode 100644
index 000000000..25b87367d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-align-self-baseline-vert-001.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a vertical flex container with
+     several flex items, some of which have "align-self:baseline".  Since we're
+     vertical and the items' baselines are horizontal, they do not end up
+     participating in baseline alignment, so their "align-self:baseline"
+     computed style doesn't have any special effect on the container's
+     baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a vertical flex container with baseline-aligned flex items</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-align-self-baseline-vert-001-ref.html">
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css" />
+  <style>
+    body {
+      margin: 0;
+      font: 20px Ahem;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+    .flexContainer {
+      display: inline-flex;
+      flex-direction: column;
+      background: lightblue;
+      align-items: baseline;
+    }
+    .hugeAndUnaligned {
+      font-size: 35px;
+      line-height: 35px;
+      /* This one flex item won't be baseline-aligned, so it won't impact
+         the flex container's positioning */
+      align-self: stretch;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+      /* Baseline is 0.8em = 8px from top */
+    }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer">
+    <div class="smallFont">b</div>
+    <div>c</div>
+    <div class="hugeAndUnaligned">d</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">e</div>
+    <div>f</div>
+    <div class="smallFont">g</div>
+  </div>
+  <div class="flexContainer">
+    <div class="hugeAndUnaligned">h</div>
+    <div class="smallFont">i</div>
+    <div>j</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001-ref.html
new file mode 100644
index 000000000..fc574143e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- In this reference case, we have inline-blocks instead of inline
+     flex containers.  Otherwise it's the same. -->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css" />
+  <style>
+    body {
+      font: 20px Ahem;
+    }
+    .flexContainer {
+      display: inline-block;
+      height: 16px;
+      width: 16px;
+      background: purple;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+  </style>
+</head>
+<body>
+  A
+  <div class="flexContainer"></div>
+  <div class="flexContainer" style="padding-bottom: 20px"></div>
+  <div class="flexContainer" style="padding: 10px"></div>
+  <div class="flexContainer" style="border-width: 3px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001a.html
new file mode 100644
index 000000000..aaf8bb3e5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001a.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a horizontal flex container
+     with no flex items. This is the main-axis baseline. The spec says this
+     about this case:
+     https://drafts.csswg.org/css-flexbox/#flex-baselines
+     "Otherwise, the flex container has no first/last main-axis baseline set,
+     and one is synthesized if needed according to the rules of its alignment context."
+
+     The alignment context in this case is inline-level so the margin-box
+     should be used to synthesize the baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of an empty horizontal flex container</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-empty-001-ref.html">
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css" />
+  <style>
+    body {
+      font: 20px Ahem;
+    }
+    .flexContainer {
+      display: inline-flex;
+      height: 16px;
+      width: 16px;
+      background: purple;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+  </style>
+</head>
+<body>
+  A
+  <div class="flexContainer"></div>
+  <div class="flexContainer" style="padding-bottom: 20px"></div>
+  <div class="flexContainer" style="padding: 10px"></div>
+  <div class="flexContainer" style="border-width: 3px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001b.html
new file mode 100644
index 000000000..74f13fbba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001b.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a vertical flex container
+     with no flex items. This is the cross-axis baseline. The spec says this
+     about this case:
+     https://drafts.csswg.org/css-flexbox/#flex-baselines
+     "Otherwise, the flex container has no first/last main-axis baseline set,
+     and one is synthesized if needed according to the rules of its alignment context."
+
+     The alignment context in this case is inline-level so the margin-box
+     should be used to synthesize the baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of an empty vertical flex container</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-empty-001-ref.html">
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css" />
+  <style>
+    body {
+      font: 20px Ahem;
+    }
+    .flexContainer {
+      display: inline-flex;
+      flex-direction: column;
+      height: 16px;
+      width: 16px;
+      background: purple;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+  </style>
+</head>
+<body>
+  A
+  <div class="flexContainer"></div>
+  <div class="flexContainer" style="padding-bottom: 20px"></div>
+  <div class="flexContainer" style="padding: 10px"></div>
+  <div class="flexContainer" style="border-width: 3px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001-ref.html
new file mode 100644
index 000000000..e6f570ed2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     baseline-aligned items aligned using specific font-size / line-heights,
+     and with unaligned children taken out of baseline-alignment using
+     "vertical-align:top".
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-block;
+      background: lightblue;
+    }
+    .flexContainer > * { display: inline; }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+    }
+    .bigFont {
+      font-size: 20px;
+      line-height: 20px;
+    }
+    .unaligned { vertical-align: top }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer smallFont">
+    <div class="smallFont">b</div
+    ><div class="bigFont unaligned">c</div>
+  </div>
+  <div class="flexContainer bigFont">
+    <div class="bigFont">d</div
+    ><div class="smallFont unaligned">e</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001.html
new file mode 100644
index 000000000..94bbdec20
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-horiz-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a horizontal flex container
+     with several flex items, none of which have "align-self:baseline".  The
+     spec says this about this case:
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a horizontal flex container whose flex items are not baseline-aligned</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-item-horiz-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      background: lightblue;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+    }
+    .bigFont {
+      font-size: 20px;
+      line-height: 20px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer">
+    <div class="smallFont">b</div
+    ><div class="bigFont">c</div>
+  </div>
+  <div class="flexContainer">
+    <div class="bigFont">d</div
+    ><div class="smallFont">e</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001-ref.html
new file mode 100644
index 000000000..203d1fcaa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     inline-blocks manually positioned with "vertical-align:top" and
+     margin-top.
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css" />
+  <style>
+    body {
+      margin: 0;
+      font: 20px Ahem;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+    .flexContainer {
+      display: inline-block;
+      background: lightblue;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+      /* Baseline is 0.8em = 8px from top */
+    }
+    .bigFont {
+      font-size: 20px;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+    * { vertical-align: top }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer" style="margin-top: 8px">
+    <div class="smallFont">b</div
+    ><div class="bigFont">c</div>
+  </div>
+  <div class="flexContainer">
+    <div class="bigFont">d</div
+    ><div class="smallFont">e</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001.html
new file mode 100644
index 000000000..55fab78e9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-item-vert-001.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a vertical flex container
+     with several flex items, none of which have "align-self:baseline".  The
+     spec says this about this case:
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a vertical flex container whose flex items are not baseline-aligned</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-item-vert-001-ref.html">
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css" />
+  <style>
+    body {
+      margin: 0;
+      font: 20px Ahem;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+    .flexContainer {
+      display: inline-flex;
+      flex-direction: column;
+      background: lightblue;
+    }
+    .smallFont {
+      font-size: 10px;
+      line-height: 10px;
+      /* Baseline is 0.8em = 8px from top */
+    }
+    .bigFont {
+      font-size: 20px;
+      line-height: 20px;
+      /* Baseline is 0.8em = 16px from top */
+    }
+  </style>
+</head>
+<body>
+  a
+  <div class="flexContainer">
+    <div class="smallFont">b</div
+    ><div class="bigFont">c</div>
+  </div>
+  <div class="flexContainer">
+    <div class="bigFont">d</div
+    ><div class="smallFont">e</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001-ref.html
new file mode 100644
index 000000000..66513652a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001-ref.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     baseline-aligned items aligned using specific font-size / line-heights,
+     and with unaligned children taken out of baseline-alignment using
+     "vertical-align:top".
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      width: 20px;
+      display: inline-block;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+    .unaligned { vertical-align: top }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer medFont">
+    <div class="medFont">b</div
+    ><div class="bigFont unaligned">c</div>
+  </div>
+
+  <div class="flexContainer bigFont">
+    <div class="bigFont">f</div
+    ><div class="smallFont unaligned">g</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer smallFont">
+    <div class="smallFont">j</div
+    ><div class="bigFont unaligned">k</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001.html
new file mode 100644
index 000000000..0faf41bb3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-001.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a horizontal flex container
+     with several flex lines.
+     The spec says this about this case:
+      [Given that the first line has no baseline-aligned items:]
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-line-horiz-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      flex-wrap: wrap;
+      width: 40px;
+      height: 40px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      width: 20px;
+    }
+
+    /* We'll make the second flex line not paint anything, so that the
+       reference case doesn't need to bother matching it. */
+    .flexContainer > *:nth-child(3),
+    .flexContainer > *:nth-child(4) {
+      visibility: hidden;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer">
+    <div class="medFont">b</div
+    ><div class="bigFont">c</div
+    ><div class="bigFont">d</div
+    ><div class="medFont">e</div>
+  </div>
+
+  <div class="flexContainer">
+    <div class="bigFont">f</div
+    ><div class="smallFont">g</div
+    ><div class="medFont">h</div
+    ><div class="bigFont">i</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer">
+    <div class="smallFont">j</div
+    ><div class="bigFont">k</div
+    ><div class="bigFont" style="align-self: baseline">l</div
+    ><div class="medFont" style="align-self: baseline">m</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002-ref.html
new file mode 100644
index 000000000..361f0965b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002-ref.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     baseline-aligned items aligned using specific font-size / line-heights,
+     and with unaligned children taken out of baseline-alignment using
+     "vertical-align:top".
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-block;
+      width: 40px;
+      /* Split testcase's 40px height into 20px of padding-top and 20px of
+         height, to set aside space for the testcase's (invisible) second line
+         (which is above the first line, since this is wrap-reverse) */
+      height: 20px;
+      padding-top: 20px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      width: 20px;
+      display: inline-block;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+    .unaligned { vertical-align: top }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer medFont">
+    <div class="medFont">b</div
+    ><div class="bigFont unaligned">c</div>
+  </div>
+
+  <div class="flexContainer bigFont">
+    <div class="bigFont">f</div
+    ><div class="smallFont unaligned">g</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer smallFont">
+    <div class="smallFont">j</div
+    ><div class="bigFont unaligned">k</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002.html
new file mode 100644
index 000000000..bd13de7f9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-002.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a horizontal flex container
+     with several flex lines (wrapping in the reverse direction).
+     The spec says this about this case:
+      [Given that the first line has no baseline-aligned items:]
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a horizontal flex container with multiple flex lines</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-line-horiz-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      flex-wrap: wrap-reverse;
+      width: 40px;
+      height: 40px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      width: 20px;
+    }
+
+    /* We'll make the second flex line not paint anything, so that the
+       reference case doesn't need to bother matching it. */
+    .flexContainer > *:nth-child(3),
+    .flexContainer > *:nth-child(4) {
+      visibility: hidden;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer">
+    <div class="medFont">b</div
+    ><div class="bigFont">c</div
+    ><div class="bigFont">d</div
+    ><div class="medFont">e</div>
+  </div>
+
+  <div class="flexContainer">
+    <div class="bigFont">f</div
+    ><div class="smallFont">g</div
+    ><div class="medFont">h</div
+    ><div class="bigFont">i</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer">
+    <div class="smallFont">j</div
+    ><div class="bigFont">k</div
+    ><div class="bigFont" style="align-self: baseline">l</div
+    ><div class="medFont" style="align-self: baseline">m</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003-ref.html
new file mode 100644
index 000000000..ef9e8051d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003-ref.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    /* We use an outer vertical flex container, wrapping two single-line
+       flex containers, to match the testcase's multi-line flex container. */
+    .outerFlexContainer {
+      height: 100px;
+      background: lightgray;
+      display: inline-flex;
+      flex-direction: column;
+      justify-content: center; /* to mimic testcase's "align-content:center" */
+    }
+    .flexContainer {
+      display: flex;
+      width: 40px;
+    }
+    .flexContainer > * {
+      width: 20px;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex container with second item in first line baseline-aligned
+       (should set the container's baseline) -->
+  <div class="outerFlexContainer">
+    <div class="flexContainer">
+      <div class="medFont">b</div>
+      <div class="bigFont" style="align-self: baseline">c</div>
+    </div>
+    <div class="flexContainer">
+      <div class="medFont">d</div>
+      <div class="smallFont">e</div>
+    </div>
+  </div>
+
+  <!-- Flex container with both items in first line baseline-aligned
+       (should set the container's baseline) -->
+  <div class="outerFlexContainer">
+    <div class="flexContainer">
+      <div class="smallFont" style="align-self: baseline">f</div>
+      <div class="medFont" style="align-self: baseline">g</div>
+    </div>
+    <div class="flexContainer">
+      <div class="bigFont">h</div>
+      <div class="smallFont">i</div>
+    </div>
+  </div>
+
+  <!-- Flex container with all items baseline-aligned
+       (only those on first line should set the container's baseline) -->
+  <div class="outerFlexContainer">
+    <div class="flexContainer" style="align-items: baseline">
+      <div class="bigFont">j</div>
+      <div class="smallFont" style="padding-bottom: 20px">k</div>
+    </div>
+    <div class="flexContainer" style="align-items: baseline">
+      <div class="smallFont">l</div>
+      <div class="medFont">m</div>
+    </div>
+  </div>
+  n
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003.html
new file mode 100644
index 000000000..ef7d787be
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-003.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a horizontal multi-line (wrap) flex container with baseline-aligned items on first line</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-line-horiz-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      flex-wrap: wrap;
+      width: 40px;
+      height: 100px;
+      background: lightgray;
+
+      /* Use "align-content", to test that packing space is considered when
+         getting container's baseline from its first FlexLine:*/
+      align-content: center;
+    }
+    .flexContainer > * {
+      width: 20px;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex container with second item in first line baseline-aligned
+       (should set the container's baseline) -->
+  <div class="flexContainer">
+    <div class="medFont">b</div>
+    <div class="bigFont" style="align-self: baseline">c</div>
+    <div class="medFont">d</div>
+    <div class="smallFont">e</div>
+  </div>
+
+  <!-- Flex container with both items in first line baseline-aligned
+       (should set the container's baseline) -->
+  <div class="flexContainer">
+    <div class="smallFont" style="align-self: baseline">f</div>
+    <div class="medFont" style="align-self: baseline">g</div>
+    <div class="bigFont">h</div>
+    <div class="smallFont">i</div>
+  </div>
+
+  <!-- Flex container with all items baseline-aligned, and with some padding
+       (only those on first line should set the container's baseline) -->
+  <div class="flexContainer" style="align-items: baseline">
+    <div class="bigFont">j</div>
+    <div class="smallFont" style="padding-bottom: 20px">k</div>
+    <div class="smallFont">l</div>
+    <div class="medFont">m</div>
+  </div>
+  n
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004-ref.html
new file mode 100644
index 000000000..212b3b1e9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004-ref.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    /* We use an outer vertical flex container, wrapping two single-line
+       flex containers, to match the testcase's multi-line flex container. */
+    .outerFlexContainer {
+      height: 100px;
+      background: lightgray;
+      display: inline-flex;
+      flex-direction: column-reverse;
+      justify-content: center; /* to mimic testcase's "align-content:center" */
+    }
+    .flexContainer {
+      display: flex;
+      width: 40px;
+    }
+    .flexContainer > * {
+      width: 20px;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex container with second item in first line baseline-aligned
+       (should set the container's baseline) -->
+  <div class="outerFlexContainer">
+    <div class="flexContainer">
+      <div class="medFont">b</div>
+      <div class="bigFont" style="align-self: baseline">c</div>
+    </div>
+    <div class="flexContainer">
+      <div class="medFont">d</div>
+      <div class="smallFont">e</div>
+    </div>
+  </div>
+
+  <!-- Flex container with both items in first line baseline-aligned
+       (should set the container's baseline) -->
+  <div class="outerFlexContainer">
+    <div class="flexContainer">
+      <div class="smallFont" style="align-self: baseline">f</div>
+      <div class="medFont" style="align-self: baseline">g</div>
+    </div>
+    <div class="flexContainer">
+      <div class="bigFont">h</div>
+      <div class="smallFont">i</div>
+    </div>
+  </div>
+
+  <!-- Flex container with all items baseline-aligned
+       (only those on first line should set the container's baseline) -->
+  <div class="outerFlexContainer">
+    <div class="flexContainer" style="align-items: baseline">
+      <div class="bigFont">j</div>
+      <div class="smallFont" style="padding-bottom: 20px">k</div>
+    </div>
+    <div class="flexContainer" style="align-items: baseline">
+      <div class="smallFont">l</div>
+      <div class="medFont">m</div>
+    </div>
+  </div>
+  n
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004.html
new file mode 100644
index 000000000..21db212f9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-horiz-004.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a horizontal multi-line (wrap-reverse) flex container with baseline-aligned items on first line</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-line-horiz-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      flex-wrap: wrap-reverse;
+      width: 40px;
+      height: 100px;
+      background: lightgray;
+
+      /* Use "align-content", to test that packing space is considered when
+         getting container's baseline from its first FlexLine:*/
+      align-content: center;
+    }
+    .flexContainer > * {
+      width: 20px;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex container with second item in first line baseline-aligned
+       (should set the container's baseline) -->
+  <div class="flexContainer">
+    <div class="medFont">b</div>
+    <div class="bigFont" style="align-self: baseline">c</div>
+    <div class="medFont">d</div>
+    <div class="smallFont">e</div>
+  </div>
+
+  <!-- Flex container with both items in first line baseline-aligned
+       (should set the container's baseline) -->
+  <div class="flexContainer">
+    <div class="smallFont" style="align-self: baseline">f</div>
+    <div class="medFont" style="align-self: baseline">g</div>
+    <div class="bigFont">h</div>
+    <div class="smallFont">i</div>
+  </div>
+
+  <!-- Flex container with all items baseline-aligned, and with some padding
+       (only those on first line should set the container's baseline) -->
+  <div class="flexContainer" style="align-items: baseline">
+    <div class="bigFont">j</div>
+    <div class="smallFont" style="padding-bottom: 20px">k</div>
+    <div class="smallFont">l</div>
+    <div class="medFont">m</div>
+  </div>
+  n
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001-ref.html
new file mode 100644
index 000000000..ce47baa87
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001-ref.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     baseline-aligned items aligned using specific font-size / line-heights,
+     and with unaligned children taken out of baseline-alignment using
+     "float: left".
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      height: 20px;
+      display: inline-block;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+    .unaligned { float: left }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer medFont">
+    <div class="medFont">b</div
+    ><br><div class="bigFont unaligned">c</div>
+  </div>
+
+  <div class="flexContainer bigFont">
+    <div class="bigFont">f</div
+    ><br><div class="smallFont unaligned">g</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer smallFont">
+    <div class="smallFont">j</div
+    ><br><div class="bigFont unaligned">k</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001.html
new file mode 100644
index 000000000..d2b510ade
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-001.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a vertical flex container
+     with several flex lines.
+     The spec says this about this case:
+      [Given that the first line has no baseline-aligned items:]
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a vertical flex container with multiple flex lines</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-line-vert-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      width: 40px;
+      height: 40px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      height: 20px;
+    }
+
+    /* We'll make the second flex line not paint anything, so that the
+       reference case doesn't need to bother matching it. */
+    .flexContainer > *:nth-child(3),
+    .flexContainer > *:nth-child(4) {
+      visibility: hidden;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer">
+    <div class="medFont">b</div
+    ><div class="bigFont">c</div
+    ><div class="bigFont">d</div
+    ><div class="medFont">e</div>
+  </div>
+
+  <div class="flexContainer">
+    <div class="bigFont">f</div
+    ><div class="smallFont">g</div
+    ><div class="medFont">h</div
+    ><div class="bigFont">i</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer">
+    <div class="smallFont">j</div
+    ><div class="bigFont">k</div
+    ><div class="bigFont" style="align-self: baseline">l</div
+    ><div class="medFont" style="align-self: baseline">m</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002-ref.html
new file mode 100644
index 000000000..f66096644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002-ref.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex, and with the
+     baseline-aligned items aligned using specific font-size / line-heights,
+     and with unaligned children taken out of baseline-alignment using
+     "float: left".
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-block;
+      /* Split testcase's 40px width into 20px of padding-left and 20px of
+         width, to set aside space for the testcase's (invisible) second line
+         (which is to the left of the first line, since this is wrap-reverse)
+      */
+      width: 20px;
+      padding-left: 20px;
+      height: 40px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+    .unaligned { float: left }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer medFont">
+    <div class="medFont">b</div
+    ><br><div class="bigFont unaligned">c</div>
+  </div>
+
+  <div class="flexContainer bigFont">
+    <div class="bigFont">f</div
+    ><br><div class="smallFont unaligned">g</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer smallFont">
+    <div class="smallFont">j</div
+    ><br><div class="bigFont unaligned">k</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002.html
new file mode 100644
index 000000000..5bffc8463
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-multi-line-vert-002.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a vertical flex container
+     with several flex lines (wrapping in the reverse direction).
+     The spec says this about this case:
+      [Given that the first line has no baseline-aligned items:]
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a vertical flex container with multiple flex lines</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-multi-line-vert-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: inline-flex;
+      flex-direction: column;
+      flex-wrap: wrap-reverse;
+      width: 40px;
+      height: 40px;
+      background: lightblue;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 20px;
+    }
+
+    /* We'll make the second flex line not paint anything, so that the
+       reference case doesn't need to bother matching it. */
+    .flexContainer > *:nth-child(3),
+    .flexContainer > *:nth-child(4) {
+      visibility: hidden;
+    }
+
+    .smallFont {
+      font-size: 8px;
+      line-height: 8px;
+    }
+    .medFont {
+      font-size: 12px;
+      line-height: 12px;
+    }
+    .bigFont {
+      font-size: 16px;
+      line-height: 16px;
+    }
+  </style>
+</head>
+<body>
+  a
+  <!-- Flex containers with flex items that have a mix of baselines: -->
+  <div class="flexContainer">
+    <div class="medFont">b</div
+    ><div class="bigFont">c</div
+    ><div class="bigFont">d</div
+    ><div class="medFont">e</div>
+  </div>
+
+  <div class="flexContainer">
+    <div class="bigFont">f</div
+    ><div class="smallFont">g</div
+    ><div class="medFont">h</div
+    ><div class="bigFont">i</div>
+  </div>
+
+  <!-- Flex container with second line baseline-aligned
+       (shouldn't make a difference) -->
+  <div class="flexContainer">
+    <div class="smallFont">j</div
+    ><div class="bigFont">k</div
+    ><div class="bigFont" style="align-self: baseline">l</div
+    ><div class="medFont" style="align-self: baseline">m</div>
+  </div>
+  n
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001-ref.html
new file mode 100644
index 000000000..afca91154
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, using inline-block instead of inline-flex. -->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    body {
+      font: 14px serif;
+    }
+    .flexContainer {
+      display: inline-block;
+      height: 16px;
+      width: 16px;
+      background: pink;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+    .abs {
+      position: absolute;
+      top: 0;
+      font-size: 8px;
+    }
+  </style>
+</head>
+<body>
+  A
+  <div class="flexContainer">a</div>
+  <div class="flexContainer" style="padding-bottom: 20px">a</div>
+  <div class="flexContainer" style="padding: 10px">a</div>
+  <div class="flexContainer" style="border-width: 3px">a</div>
+  <div class="flexContainer" style="border-bottom-width: 4px">a</div>
+  <div class="flexContainer" style="padding: 4px">
+    <!-- (An abspos child shouldn't prevent us from getting our baseline from
+         the first flex item, which happens to be the second child.) -->
+    <div class="abs">abs</div>
+    <div style="font: 26px serif">a</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001a.html
new file mode 100644
index 000000000..b9df6c23f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001a.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a horizontal flex container
+     with one flex item. This is the main-axis baseline. The spec says this
+     about this case:
+       ...if the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's main axis, the flex container's main-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a horizontal flex container with one flex item</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-single-item-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    body {
+      font: 14px serif;
+    }
+    .flexContainer {
+      display: inline-flex;
+      height: 16px;
+      width: 16px;
+      background: pink;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+    .abs {
+      position: absolute;
+      top: 0;
+      font-size: 8px;
+    }
+  </style>
+</head>
+<body>
+  A
+  <div class="flexContainer">a</div>
+  <div class="flexContainer" style="padding-bottom: 20px">a</div>
+  <div class="flexContainer" style="padding: 10px">a</div>
+  <div class="flexContainer" style="border-width: 3px">a</div>
+  <div class="flexContainer" style="border-bottom-width: 4px">a</div>
+  <div class="flexContainer" style="padding: 4px">
+    <!-- (An abspos child shouldn't prevent us from getting our baseline from
+         the first flex item, which happens to be the second child.) -->
+    <div class="abs">abs</div>
+    <div style="font: 26px serif">a</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001b.html
new file mode 100644
index 000000000..523045894
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-single-item-001b.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for how we compute the baseline of a vertical flex container
+     with one flex item. This is the cross-axis baseline. The spec says this
+     about this case:
+       If the flex container has at least one flex item, and its
+       first flex item has a baseline parallel to the flex
+       container's cross axis, the flex container's cross-axis
+       baseline is that baseline.
+-->
+<html>
+<head>
+  <title>CSS Test: Testing the baseline of a vertical flex container with one flex item</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
+  <link rel="match" href="flexbox-baseline-single-item-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    body {
+      font: 14px serif;
+    }
+    .flexContainer {
+      display: inline-flex;
+      flex-direction: column;
+      height: 16px;
+      width: 16px;
+      background: pink;
+      border: 0px dotted black;
+      /* (Elements that want a border will set their border-width.) */
+    }
+    .abs {
+      position: absolute;
+      top: 0;
+      font-size: 8px;
+    }
+  </style>
+</head>
+<body>
+  A
+  <div class="flexContainer">a</div>
+  <div class="flexContainer" style="padding-bottom: 20px">a</div>
+  <div class="flexContainer" style="padding: 10px">a</div>
+  <div class="flexContainer" style="border-width: 3px">a</div>
+  <div class="flexContainer" style="border-bottom-width: 4px">a</div>
+  <div class="flexContainer" style="padding: 4px">
+    <!-- (An abspos child shouldn't prevent us from getting our baseline from
+         the first flex item, which happens to be the second child.) -->
+    <div class="abs">abs</div>
+    <div style="font: 26px serif">a</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001-ref.xhtml
new file mode 100644
index 000000000..9076e1081
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001-ref.xhtml
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+      }
+      div.a {
+        display: inline-block;
+        background: lightgreen;
+      }
+      div.b {
+        display: inline-block;
+        background: yellow;
+      }
+      div.c {
+        display: inline-block;
+        background: orange;
+      }
+      div.auto   {
+        display: inline-block;
+        background: pink;
+      }
+      div.inflex {
+        display: inline-block;
+        background: gray;
+      }
+      div.spacer {
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="width: 80px"/><div class="b" style="width: 120px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 62.5px"/><div class="c" style="width: 137.5px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 185px"/><div class="auto">
+        <div class="spacer" style="width: 15px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 76px"/><div class="c" style="width: 124px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 170px"/><div class="auto">
+        <div class="spacer" style="width: 30px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 45px"/><div class="b" style="width: 50px"
+      /><div class="inflex" style="width: 20px"/><div class="c" style="width: 85px"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001.xhtml
new file mode 100644
index 000000000..1345263df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001.xhtml
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with blocks as flex items in a horizontal flex container, with
+     various "flex" values and various combinations of the items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        font-size: 10px;
+        display: flex;
+      }
+      div.a {
+        flex: 1 0 30px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: 2 0 20px;
+        background: yellow;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001-ref.xhtml
new file mode 100644
index 000000000..c8a6ae4d3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001-ref.xhtml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { width: 50px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        float: left;
+      }
+      div.a {
+        background: lightgreen;
+      }
+      div.b {
+        background: yellow;
+      }
+      div.c {
+        background: orange;
+      }
+      div.auto   {
+        background: pink;
+      }
+      div.inflex {
+        background: gray;
+      }
+      div.spacer {
+        width: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="height: 80px"/><div class="b" style="height: 120px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="height: 62.5px"/><div class="c" style="height: 137.5px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="height: 185px"/><div class="auto">
+        <div class="spacer" style="height: 15px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="height: 76px"/><div class="c" style="height: 124px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="height: 170px"/><div class="auto">
+        <div class="spacer" style="height: 30px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="height: 45px"/><div class="b" style="height: 50px"
+      /><div class="inflex" style="height: 20px"/><div class="c" style="height: 85px"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001.xhtml
new file mode 100644
index 000000000..92c32c828
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001.xhtml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with blocks as flex items in a vertical flex container, with
+     various "flex" values and various combinations of the items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/>
+    <style>
+      div { width: 50px; }
+      div.flexbox {
+        float: left;
+        border: 1px dashed blue;
+        height: 200px;
+        font-size: 10px;
+        display: flex;
+        flex-direction: column;
+      }
+      div.a {
+        flex: 1 0 30px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: 2 0 20px;
+        background: yellow;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001-ref.xhtml
new file mode 100644
index 000000000..274ac15fc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001-ref.xhtml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      canvas {
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <div class="flexbox" style="height: 22px">
+      some words
+      <canvas style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="width: 122.5px"
+    /><canvas style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="width: 93px"
+    /><canvas style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="width: 114px"
+    /><canvas style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="width: 106px"
+    /><canvas style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="width: 46px"
+    /><canvas style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001.xhtml
new file mode 100644
index 000000000..6d3629e32
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001.xhtml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that canvas elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      canvas {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      some words <canvas/>
+    </div>
+
+    <!-- C) Two canvas elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <canvas style="flex: 5"/>
+      <canvas style="flex: 3"/>
+    </div>
+
+    <!-- D) Two canvas elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <canvas style="width: 150px; flex: 1 4 auto"/>
+      <canvas style="width: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; max-width: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="width: 33px; flex: 2 auto"/>
+      <canvas style="width: 13px; min-width: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001-ref.xhtml
new file mode 100644
index 000000000..232ae9e76
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001-ref.xhtml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: 22px;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      canvas {
+        width: 20px;
+        height: 10px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <canvas/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="height: 122.5px"
+    /><canvas style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="height: 93px"
+    /><canvas style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="height: 114px"
+    /><canvas style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="height: 106px"
+    /><canvas style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <canvas style="height: 46px"
+    /><canvas style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001.xhtml
new file mode 100644
index 000000000..1bae70438
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001.xhtml
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that canvas elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      canvas {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <canvas/>
+    </div>
+
+    <!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      a b <canvas/>
+    </div>
+
+    <!-- C) Two canvas elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <canvas style="flex: 5"/>
+      <canvas style="flex: 3"/>
+    </div>
+
+    <!-- D) Two canvas elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <canvas style="height: 150px; flex: 1 4 auto"/>
+      <canvas style="height: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; max-height: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <canvas style="height: 33px; flex: 2 auto"/>
+      <canvas style="height: 13px; min-height: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001-ref.xhtml
new file mode 100644
index 000000000..edb4a42f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001-ref.xhtml
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+        clear: all;
+        height: 22px;
+      }
+      fieldset {
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+        float: left;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+
+    <div class="flexbox" style="height: 22px">
+      some words
+      <fieldset style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="width: 122.5px"
+    /><fieldset style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="width: 93px"
+    /><fieldset style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="width: 114px"
+    /><fieldset style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="width: 106px"
+    /><fieldset style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="width: 46px"
+    /><fieldset style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001.xhtml
new file mode 100644
index 000000000..8a504859d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-horiz-001.xhtml
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that fieldset elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on fieldset flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-fieldset-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      fieldset {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+
+    <!-- B) Text and a fieldset (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      some words <fieldset/>
+    </div>
+
+    <!-- C) Two fieldset elements, getting stretched by different ratios,
+         from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <fieldset style="flex: 5"/>
+      <fieldset style="flex: 3"/>
+    </div>
+
+    <!-- D) Two fieldset elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <fieldset style="width: 33px; flex: 2 auto"/>
+      <fieldset style="width: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <fieldset style="width: 150px; flex: 1 4 auto"/>
+      <fieldset style="width: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <fieldset style="width: 33px; flex: 2 auto"/>
+      <fieldset style="width: 13px; max-width: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <fieldset style="width: 33px; flex: 2 auto"/>
+      <fieldset style="width: 13px; min-width: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001-ref.xhtml
new file mode 100644
index 000000000..41b193019
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001-ref.xhtml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: 22px;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      fieldset {
+        width: 20px;
+        height: 10px;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <fieldset/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="height: 122.5px"
+    /><fieldset style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="height: 93px"
+    /><fieldset style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="height: 114px"
+    /><fieldset style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="height: 106px"
+    /><fieldset style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <fieldset style="height: 46px"
+    /><fieldset style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001.xhtml
new file mode 100644
index 000000000..75d592f4c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-fieldset-vert-001.xhtml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that fieldset elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on fieldset flex items in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-fieldset-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      fieldset {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <fieldset/>
+    </div>
+
+    <!-- B) Text and a fieldset (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      a b <fieldset/>
+    </div>
+
+    <!-- C) Two fieldset elements, getting stretched by different ratios,
+         from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <fieldset style="flex: 5"/>
+      <fieldset style="flex: 3"/>
+    </div>
+
+    <!-- D) Two fieldset elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <fieldset style="height: 33px; flex: 2 auto"/>
+      <fieldset style="height: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <fieldset style="height: 150px; flex: 1 4 auto"/>
+      <fieldset style="height: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <fieldset style="height: 33px; flex: 2 auto"/>
+      <fieldset style="height: 13px; max-height: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <fieldset style="height: 33px; flex: 2 auto"/>
+      <fieldset style="height: 13px; min-height: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001-ref.xhtml
new file mode 100644
index 000000000..bee1ae0bf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001-ref.xhtml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      iframe {
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <iframe/>
+    </div>
+
+    <div class="flexbox" style="height: 22px">
+      some words
+      <iframe style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="width: 122.5px"
+    /><iframe style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="width: 93px"
+    /><iframe style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="width: 114px"
+    /><iframe style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="width: 106px"
+    /><iframe style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="width: 46px"
+    /><iframe style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001.xhtml
new file mode 100644
index 000000000..323b06519
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-horiz-001.xhtml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that iframe elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on iframe flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-iframe-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      iframe {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <iframe/>
+    </div>
+
+    <!-- B) Text and an iframe (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      some words <iframe/>
+    </div>
+
+    <!-- C) Two iframe elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <iframe style="flex: 5"/>
+      <iframe style="flex: 3"/>
+    </div>
+
+    <!-- D) Two iframe elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <iframe style="width: 33px; flex: 2 auto"/>
+      <iframe style="width: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <iframe style="width: 150px; flex: 1 4 auto"/>
+      <iframe style="width: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <iframe style="width: 33px; flex: 2 auto"/>
+      <iframe style="width: 13px; max-width: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <iframe style="width: 33px; flex: 2 auto"/>
+      <iframe style="width: 13px; min-width: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001-ref.xhtml
new file mode 100644
index 000000000..7737008f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001-ref.xhtml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: 22px;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      iframe {
+        width: 20px;
+        height: 10px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <iframe/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <iframe/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="height: 122.5px"
+    /><iframe style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="height: 93px"
+    /><iframe style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="height: 114px"
+    /><iframe style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="height: 106px"
+    /><iframe style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <iframe style="height: 46px"
+    /><iframe style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001.xhtml
new file mode 100644
index 000000000..8b227c67c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-iframe-vert-001.xhtml
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that iframe elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on iframe flex items in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-iframe-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      iframe {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <iframe/>
+    </div>
+
+    <!-- B) Text and an iframe (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      a b <iframe/>
+    </div>
+
+    <!-- C) Two iframe elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <iframe style="flex: 5"/>
+      <iframe style="flex: 3"/>
+    </div>
+
+    <!-- D) Two iframe elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <iframe style="height: 33px; flex: 2 auto"/>
+      <iframe style="height: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <iframe style="height: 150px; flex: 1 4 auto"/>
+      <iframe style="height: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <iframe style="height: 33px; flex: 2 auto"/>
+      <iframe style="height: 13px; max-height: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <iframe style="height: 33px; flex: 2 auto"/>
+      <iframe style="height: 13px; min-height: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001-ref.xhtml
new file mode 100644
index 000000000..a6cd54312
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001-ref.xhtml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      img {
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <img src="support/solidblue.png"/>
+    </div>
+
+    <div class="flexbox" style="height: 22px">
+      some words
+      <img src="support/solidblue.png" style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 122.5px"
+    /><img src="support/solidblue.png" style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 93px"
+    /><img src="support/solidblue.png" style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 114px"
+    /><img src="support/solidblue.png" style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 106px"
+    /><img src="support/solidblue.png" style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 46px"
+    /><img src="support/solidblue.png" style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001.xhtml
new file mode 100644
index 000000000..b5f3a6fce
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-horiz-001.xhtml
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that img elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on img flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-img-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      img {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <img src="support/solidblue.png"/>
+    </div>
+
+    <!-- B) Text and an img (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      some words <img src="support/solidblue.png"/>
+    </div>
+
+    <!-- C) Two img elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 5"/>
+      <img src="support/solidblue.png" style="flex: 3"/>
+    </div>
+
+    <!-- D) Two img elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png" style="width: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 150px; flex: 1 4 auto"/>
+      <img src="support/solidblue.png" style="width: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png"
+           style="width: 13px; max-width: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png"
+           style="width: 13px; min-width: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001-ref.xhtml
new file mode 100644
index 000000000..09c7fc87f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001-ref.xhtml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: 22px;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      img {
+        width: 20px;
+        height: 10px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <img src="support/solidblue.png"/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <img src="support/solidblue.png"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 122.5px"
+    /><img src="support/solidblue.png" style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 93px"
+    /><img src="support/solidblue.png" style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 114px"
+    /><img src="support/solidblue.png" style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 106px"
+    /><img src="support/solidblue.png" style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 46px"
+    /><img src="support/solidblue.png" style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001.xhtml
new file mode 100644
index 000000000..e2949b1e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-img-vert-001.xhtml
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that img elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on img flex items in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-img-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      img {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <img src="support/solidblue.png"/>
+    </div>
+
+    <!-- B) Text and an img (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      a b <img src="support/solidblue.png"/>
+    </div>
+
+    <!-- C) Two img elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 5"/>
+      <img src="support/solidblue.png" style="flex: 3"/>
+    </div>
+
+    <!-- D) Two img elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png" style="height: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 150px; flex: 1 4 auto"/>
+      <img src="support/solidblue.png" style="height: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png"
+           style="height: 13px; max-height: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 33px; flex: 2 auto"/>
+      <img src="support/solidblue.png"
+           style="height: 13px; min-height: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001-ref.xhtml
new file mode 100644
index 000000000..7ea5a05d8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001-ref.xhtml
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      textarea {
+        width: 10px;
+        height: 20px;
+        background: white;
+        border-radius: 0;
+        border: 1px dotted green;
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <textarea/>
+    </div>
+
+    <div class="flexbox"
+         style="height: 22px"><!-- height of textarea's border-box -->
+      some words
+      <textarea style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="width: 122.5px"
+    /><textarea style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="width: 93px"
+    /><textarea style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="width: 114px"
+    /><textarea style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="width: 106px"
+    /><textarea style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="width: 46px"
+    /><textarea style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001.xhtml
new file mode 100644
index 000000000..7906d242a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-horiz-001.xhtml
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that textarea elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on textarea flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-textarea-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      textarea {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        background: white;
+        border-radius: 0;
+        border: 1px dotted green;
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <textarea/>
+    </div>
+
+    <!-- B) Text and a textarea (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      some words <textarea/>
+    </div>
+
+    <!-- C) Two textarea elements, getting stretched by different ratios,
+         from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <textarea style="flex: 5"/>
+      <textarea style="flex: 3"/>
+    </div>
+
+    <!-- D) Two textarea elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <textarea style="width: 33px; flex: 2 auto"/>
+      <textarea style="width: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <textarea style="width: 150px; flex: 1 4 auto"/>
+      <textarea style="width: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <textarea style="width: 33px; flex: 2 auto"/>
+      <textarea
+         style="width: 13px; max-width: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <textarea style="width: 33px; flex: 2 auto"/>
+      <textarea
+         style="width: 13px; min-width: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001-ref.xhtml
new file mode 100644
index 000000000..dbef1eac5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001-ref.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: 22px;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      textarea {
+        width: 20px;
+        height: 10px;
+        background: white;
+        border-radius: 0;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <textarea/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <textarea/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="height: 122.5px"
+    /><textarea style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="height: 93px"
+    /><textarea style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="height: 114px"
+    /><textarea style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="height: 106px"
+    /><textarea style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <textarea style="height: 46px"
+    /><textarea style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001.xhtml
new file mode 100644
index 000000000..a935a101d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-textarea-vert-001.xhtml
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that textarea elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on textarea flex items in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-textarea-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      textarea {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        background: white;
+        border-radius: 0;
+        border: 1px dotted green;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <textarea/>
+    </div>
+
+    <!-- B) Text and a textarea (ensure they aren't merged into one flex item)
+      -->
+    <div class="flexbox">
+      a b <textarea/>
+    </div>
+
+    <!-- C) Two textarea elements, getting stretched by different ratios,
+         from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <textarea style="flex: 5"/>
+      <textarea style="flex: 3"/>
+    </div>
+
+    <!-- D) Two textarea elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <textarea style="height: 33px; flex: 2 auto"/>
+      <textarea style="height: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <textarea style="height: 150px; flex: 1 4 auto"/>
+      <textarea style="height: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <textarea style="height: 33px; flex: 2 auto"/>
+      <textarea
+         style="height: 13px; max-height: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <textarea style="height: 33px; flex: 2 auto"/>
+      <textarea
+         style="height: 13px; min-height: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001-ref.xhtml
new file mode 100644
index 000000000..e37920f17
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001-ref.xhtml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      video {
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <video/>
+    </div>
+
+    <div class="flexbox" style="height: 22px">
+      some words
+      <video style="float:right"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="width: 122.5px"
+    /><video style="width: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="width: 93px"
+    /><video style="width: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="width: 114px"
+    /><video style="width: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="width: 106px"
+    /><video style="width: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="width: 46px"
+    /><video style="width: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001.xhtml
new file mode 100644
index 000000000..c976ccffb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-horiz-001.xhtml
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that video elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on video flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-video-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+        line-height: 8px;
+      }
+      video {
+        min-width: 0;
+        width: 10px;
+        height: 20px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <video/>
+    </div>
+
+    <!-- B) Text and a video (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      some words <video/>
+    </div>
+
+    <!-- C) Two video elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <video style="flex: 5"/>
+      <video style="flex: 3"/>
+    </div>
+
+    <!-- D) Two video elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <video style="width: 33px; flex: 2 auto"/>
+      <video style="width: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <video style="width: 150px; flex: 1 4 auto"/>
+      <video style="width: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-width -->
+    <!-- Same as (D), except we've added a max-width on the second element.
+      -->
+    <div class="flexbox">
+      <video style="width: 33px; flex: 2 auto"/>
+      <video style="width: 13px; max-width: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-width -->
+    <!-- Same as (C), except we've added a min-width on the second element.
+      -->
+    <div class="flexbox">
+      <video style="width: 33px; flex: 2 auto"/>
+      <video style="width: 13px; min-width: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001-ref.xhtml
new file mode 100644
index 000000000..552d14e4c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001-ref.xhtml
@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        width: 22px;
+        float: left;
+        margin-right: 10px;
+        background: lightgreen;
+        line-height: 0;
+      }
+      video {
+        width: 20px;
+        height: 10px;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <video/>
+    </div>
+
+    <div class="flexbox">
+      <div style="font: 8px monospace; height: 188px">
+        a b
+      </div>
+      <video/>
+    </div>
+
+    <div class="flexbox">
+      <video style="height: 122.5px"
+    /><video style="height: 73.5px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="height: 93px"
+    /><video style="height: 103px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="height: 114px"
+    /><video style="height: 82px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="height: 106px"
+    /><video style="height: 90px"/>
+    </div>
+
+    <div class="flexbox">
+      <video style="height: 46px"
+    /><video style="height: 150px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001.xhtml
new file mode 100644
index 000000000..b45f853e6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-video-vert-001.xhtml
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test checks that video elements behave correctly as flex items.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing flexbox layout algorithm property on video flex items in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-basic-video-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        background: lightgreen;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        float: left;
+        margin-right: 10px;
+        font: 8px monospace;
+      }
+      video {
+        width: 20px;
+        height: 10px;
+        min-height: 0;
+        border: 1px dotted green;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- A) One flex item -->
+    <div class="flexbox">
+      <video/>
+    </div>
+
+    <!-- B) Text and a video (ensure they aren't merged into one flex item) -->
+    <div class="flexbox">
+      a b <video/>
+    </div>
+
+    <!-- C) Two video elements, getting stretched by different ratios, from 0.
+
+         Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
+                                 = 196px
+
+         1st element gets 5/8 of space: 5/8 * 196px = 122.5px
+         1st element gets 3/8 of space: 3/8 * 196px = 73.5px
+      -->
+    <div class="flexbox">
+      <video style="flex: 5"/>
+      <video style="flex: 3"/>
+    </div>
+
+    <!-- D) Two video elements, getting stretched by different ratios, from
+         different flex bases.
+
+         Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
+         1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
+         1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
+      -->
+    <div class="flexbox">
+      <video style="height: 33px; flex: 2 auto"/>
+      <video style="height: 13px; flex: 3 auto"/>
+    </div>
+
+    <!-- E) Two flex items, getting shrunk by different amounts.
+
+         Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
+         First element scaled flex ratio = 4 * 150 = 600
+         Second element scaled flex ratio = 3 * 100 = 300
+           * So, total flexibility is 600 + 300 = 900
+
+         1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
+         2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
+      -->
+    <div class="flexbox">
+      <video style="height: 150px; flex: 1 4 auto"/>
+      <video style="height: 100px; flex: 1 3 auto"/>
+    </div>
+
+    <!-- F) Making sure we don't grow past max-height -->
+    <!-- Same as (D), except we've added a max-height on the second element.
+      -->
+    <div class="flexbox">
+      <video style="height: 33px; flex: 2 auto"/>
+      <video style="height: 13px; max-height: 90px; flex: 3 auto"/>
+    </div>
+
+    <!-- G) Making sure we grow at least as large as min-height -->
+    <!-- Same as (C), except we've added a min-height on the second element.
+      -->
+    <div class="flexbox">
+      <video style="height: 33px; flex: 2 auto"/>
+      <video style="height: 13px; min-height: 150px; flex: 3 auto"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001-ref.html
new file mode 100644
index 000000000..642c1e3d1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.fullCrossSize {
+      height: 18px;
+    }
+    div.halfCrossSize {
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize"></div>
+    <div class="item halfCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize"></div>
+    <div class="item halfCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize"></div>
+    <div class="item halfCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001a.html
new file mode 100644
index 000000000..613acd27e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001a.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-before in horizontal multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break">
+  <link rel="match" href="flexbox-break-request-horiz-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-before specified on first (and only) item, at a point where
+       we're already "breaking" (the beginning): -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on second item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on third item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001b.html
new file mode 100644
index 000000000..3ef143639
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-001b.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-after in horizontal multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break">
+  <link rel="match" href="flexbox-break-request-horiz-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-after specified on first (and only) item, at a point where
+       we're already "breaking" (the end): -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on first item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on second item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002-ref.html
new file mode 100644
index 000000000..28943c508
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002-ref.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.fullCrossSize {
+      height: 18px;
+    }
+    div.halfCrossSize {
+      height: 8px;
+    }
+    div.shrunkMainSize {
+      width: 18px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize" style="float: left"></div>
+    <div class="item fullCrossSize" style="float: left"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+    <div class="item fullCrossSize shrunkMainSize" style="float: left"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002a.html
new file mode 100644
index 000000000..3bf1ac438
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002a.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-before in horizontal single-line flex containers (should have no effect)</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break">
+  <link rel="match" href="flexbox-break-request-horiz-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-before specified on first (and only) item, at a point where
+       we're already "breaking" (the beginning): -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on second item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on third item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002b.html
new file mode 100644
index 000000000..3a53dace6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-horiz-002b.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-after in horizontal single-line flex containers (should have no effect)</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break">
+  <link rel="match" href="flexbox-break-request-horiz-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      border: 1px dashed black;
+      width: 60px;
+      height: 20px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      width: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-after specified on first (and only) item, at a point where
+       we're already "breaking" (the end): -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on first item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on second item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001-ref.html
new file mode 100644
index 000000000..a9a286770
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.fullCrossSize {
+      width: 18px;
+    }
+    div.halfCrossSize {
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+    <div class="item halfCrossSize" style="float: left"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001a.html
new file mode 100644
index 000000000..5be8d5307
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001a.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-before in vertical multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break">
+  <link rel="match" href="flexbox-break-request-vert-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-before specified on first (and only) item, at a point where
+       we're already "breaking" (the beginning): -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on second item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on third item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001b.html
new file mode 100644
index 000000000..87ba97a68
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-001b.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-after in vertical multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break">
+  <link rel="match" href="flexbox-break-request-vert-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-after specified on first (and only) item, at a point where
+       we're already "breaking" (the end): -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on first item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on second item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002-ref.html
new file mode 100644
index 000000000..eeb8a4ea7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002-ref.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.fullCrossSize {
+      width: 18px;
+    }
+    div.halfCrossSize {
+      width: 8px;
+    }
+    div.shrunkMainSize {
+      height: 18px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize"></div>
+    <div class="item fullCrossSize"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+    <div class="item fullCrossSize shrunkMainSize"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002a.html
new file mode 100644
index 000000000..e68b98a5a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002a.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-before in vertical single-line flex containers (should have no effect)</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break">
+  <link rel="match" href="flexbox-break-request-vert-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-before specified on first (and only) item, at a point where
+       we're already "breaking" (the beginning): -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on second item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-before specified on third item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-before: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: avoid"></div>
+  </div>
+  <!-- * With 'page-break-before: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item" style="page-break-before: right"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002b.html
new file mode 100644
index 000000000..cda5fecd4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-break-request-vert-002b.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing page-break-after in vertical single-line flex containers (should have no effect)</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break">
+  <link rel="match" href="flexbox-break-request-vert-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      border: 1px dashed black;
+      width: 20px;
+      height: 60px;
+      margin: 2px;
+      float: left;
+    }
+    div.item {
+      height: 28px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <!-- page-break-after specified on first (and only) item, at a point where
+       we're already "breaking" (the end): -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on first item, at a point where breaking
+       would otherwise be unnecessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+  <div style="clear: both"></div>
+
+  <!-- page-break-after specified on second item, at a point where breaking
+       is already necessary: -->
+  <!-- * With 'page-break-after: auto, avoid' (not requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: auto"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: avoid"></div>
+    <div class="item"></div>
+  </div>
+  <!-- * With 'page-break-after: always, left, right' (requesting a break): -->
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: always"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: left"></div>
+    <div class="item"></div>
+  </div>
+  <div class="flexbox">
+    <div class="item"></div>
+    <div class="item" style="page-break-after: right"></div>
+    <div class="item"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001-ref.html
new file mode 100644
index 000000000..2aa1d74bf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- In this reference case, we get each container to be sized the same as
+     in the testcase, without any visible baseline alignemnt, by using some
+     hidden flex items.
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 50px;
+      background: yellow;
+      border: 1px dotted black;
+      margin: 5px;
+      align-items: flex-start;
+    }
+    .hiddenItemForSizing {
+      width: 0;
+      min-width: 0; /* disable default min-width:auto behavior */
+      color: transparent;
+      align-self: baseline;
+    }
+    .largeFont {
+      font-size: 20px;
+      background: lightblue;
+      /* Our flex items get padding on opposite sides (top/bottom) so that they
+         produce a large combined height when baseline-aligned: */
+      padding-top: 5px;
+    }
+    .smallFont {
+      font-size: 10px;
+      background: pink;
+      /* Our flex items get padding on opposite sides (top/bottom) so that they
+         produce a large combined height when baseline-aligned: */
+      padding-bottom: 20px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="largeFont">a</div>
+    <!-- Hidden flex items used to determine container's cross size,
+         based on their baseline-aligned combined cross size: -->
+    <div class="largeFont hiddenItemForSizing">a</div>
+    <div class="smallFont hiddenItemForSizing">b</div>
+  </div>
+
+  <div class="flexContainer">
+    <div class="smallFont">b</div>
+    <!-- Hidden flex items used to determine container's cross size,
+         based on their baseline-aligned combined cross size: -->
+    <div class="largeFont hiddenItemForSizing">a</div>
+    <div class="smallFont hiddenItemForSizing">b</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001.html
new file mode 100644
index 000000000..0ffa27761
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-baseline-001.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing that a collapsed flex item participates in baseline alignment only for the purpose of establishing container's cross size</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility">
+  <link rel="match" href="flexbox-collapsed-item-baseline-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 50px;
+      background: yellow;
+      border: 1px dotted black;
+      margin: 5px;
+      align-items: baseline;
+    }
+    .collapse {
+      visibility: collapse;
+    }
+    .largeFont {
+      font-size: 20px;
+      background: lightblue;
+      /* Our flex items get padding on opposite sides (top/bottom) so that they
+         produce a large combined height when baseline-aligned: */
+      padding-top: 5px;
+    }
+    .smallFont {
+      font-size: 10px;
+      background: pink;
+      /* Our flex items get padding on opposite sides (top/bottom) so that they
+         produce a large combined height when baseline-aligned: */
+      padding-bottom: 20px;
+    }
+  </style>
+</head>
+<body>
+  <!-- Second item collapsed: -->
+  <div class="flexContainer">
+    <div class="largeFont">a</div>
+    <div class="smallFont collapse">b</div>
+  </div>
+
+  <!-- First item collapsed: -->
+  <div class="flexContainer">
+    <div class="largeFont collapse">a</div>
+    <div class="smallFont">b</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001-ref.html
new file mode 100644
index 000000000..901318784
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- In this reference case, we have blocks in place of the testcase's
+     flex containers. The testcase's collapsed flex items are entirely
+     absent here (and the remaining content is sized using exact pixel
+     values).
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      background: yellow;
+      border: 1px dotted black;
+      float: left;
+      margin: 5px;
+    }
+    .flexContainer > * {
+      /* All flex items have 20px base size */
+      width: 20px;
+    }
+    .collapse {
+      flex-basis: 0;
+      height: 20px;
+    }
+    .flexible {
+      flex: 1 auto;
+    }
+    .heightTall {
+      height: 40px;
+      background: purple;
+    }
+    .heightAuto {
+      background: teal;
+    }
+    .heightShort {
+      height: 10px;
+      background: pink;
+    }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: -->
+  <!-- Just one (collapsed) flex item, which ends up establishing
+       the container's size (even though it's collapsed): -->
+  <div class="flexContainer">
+    <div class="heightTall collapse"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- SECOND ROW: -->
+  <!-- One collapsed flex item, one short flex item.
+       (Container ends up with collapsed item's height) -->
+  <div class="flexContainer">
+    <div class="heightTall collapse"></div>
+    <div class="heightShort"></div>
+  </div>
+  <!-- (same, but with items in opposite order) -->
+  <div class="flexContainer">
+    <div class="heightShort"></div>
+    <div class="heightTall collapse"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- THIRD ROW: -->
+  <!-- One collapsed flex item, one stretched flex item.
+       (Container and stretched item end up with collapsed item's height) -->
+  <div class="flexContainer">
+    <div class="heightTall collapse"></div>
+    <div class="heightAuto"></div>
+  </div>
+  <!-- (again, with items in opposite order) -->
+  <div class="flexContainer">
+    <div class="heightAuto"></div>
+    <div class="heightTall collapse"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- FOURTH ROW: -->
+  <!-- One collapsed flex item, one other flex item; both are flexible.
+       (The non-collapsed one should take all of the available width.) -->
+  <div class="flexContainer">
+    <div class="heightAuto collapse"></div>
+    <div class="heightTall flexible"></div>
+  </div>
+  <!-- (again, with items in opposite order) -->
+  <div class="flexContainer">
+    <div class="heightTall flexible"></div>
+    <div class="heightAuto collapse"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001.html
new file mode 100644
index 000000000..2c4385af8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-001.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing that visibility:collapse on a flex item in a single-line flex container maintains the containers's cross size, but doesn't otherwise impact flex layout</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility">
+  <link rel="match" href="flexbox-collapsed-item-horiz-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      background: yellow;
+      border: 1px dotted black;
+      float: left;
+      margin: 5px;
+    }
+    .flexContainer > * {
+      /* All flex items have 20px base size */
+      width: 20px;
+    }
+    .collapse {
+      visibility: collapse;
+    }
+    .flexible {
+      flex: 1 auto;
+    }
+    .heightTall {
+      height: 40px;
+      background: purple;
+    }
+    .heightAuto {
+      background: teal;
+    }
+    .heightShort {
+      height: 10px;
+      background: pink;
+    }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: -->
+  <!-- Just one (collapsed) flex item, which ends up establishing
+       the container's size (even though it's collapsed): -->
+  <div class="flexContainer">
+    <div class="heightTall collapse"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- SECOND ROW: -->
+  <!-- One collapsed flex item, one short flex item.
+       (Container ends up with collapsed item's height) -->
+  <div class="flexContainer">
+    <div class="heightTall collapse"></div>
+    <div class="heightShort"></div>
+  </div>
+  <!-- (same, but with items in opposite order) -->
+  <div class="flexContainer">
+    <div class="heightShort"></div>
+    <div class="heightTall collapse"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- THIRD ROW: -->
+  <!-- One collapsed flex item, one stretched flex item.
+       (Container and stretched item end up with collapsed item's height) -->
+  <div class="flexContainer">
+    <div class="heightTall collapse"></div>
+    <div class="heightAuto"></div>
+  </div>
+  <!-- (again, with items in opposite order) -->
+  <div class="flexContainer">
+    <div class="heightAuto"></div>
+    <div class="heightTall collapse"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- FOURTH ROW: -->
+  <!-- One collapsed flex item, one other flex item; both are flexible.
+       (The non-collapsed one should take all of the available width.) -->
+  <div class="flexContainer">
+    <div class="heightAuto flexible collapse"></div>
+    <div class="heightTall flexible"></div>
+  </div>
+  <!-- (again, with items in opposite order) -->
+  <div class="flexContainer">
+    <div class="heightTall flexible"></div>
+    <div class="heightAuto flexible collapse"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002-ref.html
new file mode 100644
index 000000000..a9040e306
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002-ref.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      flex-wrap: wrap;
+
+      /* These let us show where each flex line begins (and hence, how tall
+         the flex lines end up) */
+      align-content: flex-start;
+      align-items: flex-start;
+
+      width: 30px;
+      background: yellow;
+      border: 1px dotted black;
+      float: left;
+      margin: 5px;
+    }
+    .collapsedItem {
+      width: 0;
+      height: 25px;
+    }
+    .halfWidthItem {
+      width: 15px;
+      height: 15px;
+      background: teal;
+    }
+    .fullWidthItem {
+      width: 30px;
+      height: 20px;
+      background: purple;
+    }
+    .veryTallItem {
+      width: 15px;
+      height: 40px;
+      background: olive;
+    }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: -->
+  <!-- One collapsed flex item, at the beginning of a flex line, which
+       ends up establishing its flex line's cross size: -->
+  <div class="flexContainer">
+    <div class="collapsedItem"></div>
+    <div class="halfWidthItem"></div>
+    <div class="fullWidthItem"></div>
+  </div>
+  <!-- ...and now with it being at the end of that flex line: -->
+  <div class="flexContainer">
+    <div class="halfWidthItem"></div>
+    <div class="collapsedItem"></div>
+    <div class="fullWidthItem"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- SECOND ROW: -->
+  <!-- One collapsed flex item, initially in its own line. It ends
+       up being merged into another line after it collapses, due to its
+       (post-collapse) zero main-size. -->
+  <div class="flexContainer">
+    <div class="collapsedItem"></div>
+    <div class="fullWidthItem"></div>
+    <div class="fullWidthItem"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="fullWidthItem"></div>
+    <div class="collapsedItem"></div>
+    <div class="fullWidthItem"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="fullWidthItem"></div>
+    <div class="fullWidthItem"></div>
+    <div class="collapsedItem"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- THIRD ROW: -->
+  <!-- One collapsed flex item, initially in a line with an even-taller item.
+       The collapsed item ends up shifting into another line after it
+       collapses, but it carries the taller item's cross size with it, as its
+       strut size. -->
+  <div class="flexContainer">
+    <div class="fullWidthItem"></div>
+    <div class="collapsedItem" style="height: 40px"></div>
+    <div class="veryTallItem"></div>
+  </div>
+  <!-- ...and now with two (differently-sized) struts in first line:
+       (the one that's taller - due to being initially grouped with the tall
+       item - wins out.) -->
+  <div class="flexContainer">
+    <div class="collapsedItem"></div>
+    <div class="fullWidthItem"></div>
+    <div class="collapsedItem" style="height: 40px"></div>
+    <div class="veryTallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002.html
new file mode 100644
index 000000000..97af3805c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-002.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing that visibility:collapse on a flex item in a multi-line flex container creates struts, and that they can migrate between lines</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility">
+  <link rel="match" href="flexbox-collapsed-item-horiz-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      flex-wrap: wrap;
+
+      /* These let us show where each flex line begins (and hence, how tall
+         the flex lines end up) */
+      align-content: flex-start;
+      align-items: flex-start;
+
+      width: 30px;
+      background: yellow;
+      border: 1px dotted black;
+      float: left;
+      margin: 5px;
+    }
+    .collapsedItem {
+      visibility: collapse;
+      width: 15px;
+      height: 25px;
+    }
+    .halfWidthItem {
+      width: 15px;
+      height: 15px;
+      background: teal;
+    }
+    .fullWidthItem {
+      width: 30px;
+      height: 20px;
+      background: purple;
+    }
+    .veryTallItem {
+      width: 15px;
+      height: 40px;
+      background: olive;
+    }
+  </style>
+</head>
+<body>
+  <!-- FIRST ROW: -->
+  <!-- One collapsed flex item, at the beginning of a flex line, which
+       ends up establishing its flex line's cross size: -->
+  <div class="flexContainer">
+    <div class="collapsedItem"></div>
+    <div class="halfWidthItem"></div>
+    <div class="fullWidthItem"></div>
+  </div>
+  <!-- ...and now with it being at the end of that flex line: -->
+  <div class="flexContainer">
+    <div class="halfWidthItem"></div>
+    <div class="collapsedItem"></div>
+    <div class="fullWidthItem"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- SECOND ROW: -->
+  <!-- One collapsed flex item, initially in its own line. It ends
+       up being merged into another line after it collapses, due to its
+       (post-collapse) zero main-size. -->
+  <div class="flexContainer">
+    <div class="collapsedItem"></div>
+    <div class="fullWidthItem"></div>
+    <div class="fullWidthItem"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="fullWidthItem"></div>
+    <div class="collapsedItem"></div>
+    <div class="fullWidthItem"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="fullWidthItem"></div>
+    <div class="fullWidthItem"></div>
+    <div class="collapsedItem"></div>
+  </div>
+
+  <div style="clear: both"></div>
+
+  <!-- THIRD ROW: -->
+  <!-- One collapsed flex item, initially in a line with an even-taller item.
+       The collapsed item ends up shifting into another line after it
+       collapses, but it carries the taller item's cross size with it, as its
+       strut size. -->
+  <div class="flexContainer">
+    <div class="fullWidthItem"></div>
+    <div class="collapsedItem"></div>
+    <div class="veryTallItem"></div>
+  </div>
+  <!-- ...and now with two (differently-sized) struts in first line:
+       (the one that's taller - due to being initially grouped with the tall
+       item - wins out.) -->
+  <div class="flexContainer">
+    <div class="collapsedItem"></div>
+    <div class="fullWidthItem"></div>
+    <div class="collapsedItem"></div>
+    <div class="veryTallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003-ref.html
new file mode 100644
index 000000000..c8242106b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      flex-wrap: wrap;
+      align-content: stretch; /* Initial value; just here for emphasis */
+      width: 25px;
+      height: 60px;
+      background: yellow;
+      border: 1px dotted black;
+      float: left;
+      margin: 5px;
+    }
+    .collapsedItem {
+      width: 0;
+      height: 40px;
+    }
+    .shortItem {
+      width: 25px;
+      height: 10px;
+      background: purple;
+    }
+    .tallItem {
+      width: 10px;
+      height: 30px;
+      background: olive;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="shortItem"></div>
+    <div class="collapsedItem"></div>
+    <div class="tallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003.html
new file mode 100644
index 000000000..4476bc18f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-collapsed-item-horiz-003.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing that strut formation (from visibility:collapse) happens *after* lines have been stretched</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-visibility">
+  <link rel="match" href="flexbox-collapsed-item-horiz-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      flex-wrap: wrap;
+      align-content: stretch; /* Initial value; just here for emphasis */
+      width: 25px;
+      height: 60px;
+      background: yellow;
+      border: 1px dotted black;
+      float: left;
+      margin: 5px;
+    }
+    .collapsedItem {
+      visibility: collapse;
+      width: 10px;
+    }
+    .shortItem {
+      width: 25px;
+      height: 10px;
+      background: purple;
+    }
+    .tallItem {
+      width: 10px;
+      height: 30px;
+      background: olive;
+    }
+  </style>
+</head>
+<body>
+  <!-- In this testcase, the first flex line initially has a cross-size of
+       10px, and the second flex line has a cross-size of 30px. Both lines are
+       stretched by 10px each (to hit the container's total cross-size, 60px).
+       Then, we handle "visibility:collapse" and convert the collapsed item
+       into a strut with the second line's stretched cross-size (40px), and we
+       restart flex layout. This strut then ends up in the *first* line (since
+       it has 0 main-size), which means both flex lines end up being 40px tall.
+    -->
+  <div class="flexContainer">
+    <div class="shortItem"></div>
+    <div class="collapsedItem"></div>
+    <div class="tallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001-ref.html
new file mode 100644
index 000000000..f46e11b39
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001-ref.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      height: 60px;
+      width: 60px;
+      font: 10px sans-serif;
+      background: yellow;
+      float: left;
+      border: 1px solid black;
+    }
+    .flexContainer > * {
+      border: 1px dotted gray;
+      width: 28px;
+      height: 28px;
+      float: left;
+    }
+
+    /* The single-line flex containers' flex items are shrunk in main axis: */
+    .singleLineHoriz > * {
+      width: 13px;
+    }
+    .singleLineVert  > * {
+      height: 13px;
+      float: none;
+    }
+  </style>
+</head>
+<body>
+  <!-- single-line (flex-wrap unspecified): -->
+  <div class="flexContainer singleLineHoriz"><!-- flex-flow: row -->
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse -->
+    <div>4</div><div>3</div><div>2</div><div>1</div>
+  </div>
+  <div class="flexContainer singleLineVert"><!-- flex-flow: column -->
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse -->
+    <div>4</div><div>3</div><div>2</div><div>1</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap", after flex-direction: -->
+  <div class="flexContainer"><!-- flex-flow: row wrap -->
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: row-reverse wrap -->
+    <div>2</div><div>1</div><div>4</div><div>3</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: column wrap -->
+    <div>1</div><div>3</div><div>2</div><div>4</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: column-reverse wrap -->
+    <div>2</div><div>4</div><div>1</div><div>3</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap", before flex-direction: -->
+  <div class="flexContainer"><!-- flex-flow: wrap row -->
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap row-reverse -->
+    <div>2</div><div>1</div><div>4</div><div>3</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap column -->
+    <div>1</div><div>3</div><div>2</div><div>4</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap column-reverse -->
+    <div>2</div><div>4</div><div>1</div><div>3</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap-reverse", after flex-direction: -->
+  <div class="flexContainer"><!-- flex-flow: row wrap-reverse -->
+    <div>3</div><div>4</div><div>1</div><div>2</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse -->
+    <div>4</div><div>3</div><div>2</div><div>1</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: column wrap-reverse -->
+    <div>3</div><div>1</div><div>4</div><div>2</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse -->
+    <div>4</div><div>2</div><div>3</div><div>1</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap-reverse", before flex-direction: -->
+  <div class="flexContainer"><!-- flex-flow: wrap-reverse row -->
+    <div>3</div><div>4</div><div>1</div><div>2</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse -->
+    <div>4</div><div>3</div><div>2</div><div>1</div>
+  </div>
+  <div class="flexContainer"> <!-- flex-flow: wrap-reverse column -->
+    <div>3</div><div>1</div><div>4</div><div>2</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse -->
+    <div>4</div><div>2</div><div>3</div><div>1</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now just specifying flex-wrap (no flex-direction) -->
+  <div class="flexContainer"><!-- flex-flow: wrap -->
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap-reverse -->
+    <div>3</div><div>4</div><div>1</div><div>2</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001.html
new file mode 100644
index 000000000..a29b89aa6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-001.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing all the values of the "flex-flow" shorthand property, with 4 flex items in each container</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+  <link rel="match" href="flexbox-flex-flow-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      height: 60px;
+      width: 60px;
+      font: 10px sans-serif;
+      background: yellow;
+      float: left;
+      border: 1px solid black;
+    }
+    .flexContainer > * {
+      border: 1px dotted gray;
+      width: 28px;
+      height: 28px;
+      /* Explicitly set min-width & min-height to 0, to prevent their "auto"
+         value from influencing the sizes of our flex items (particularly for
+         the single-line chunks of this testcase, whose items may be shrunk a
+         little below the numerals' intrinsic sizes): */
+      min-width:  0;
+      min-height: 0;
+    }
+  </style>
+</head>
+<body>
+  <!-- single-line (flex-wrap unspecified): -->
+  <div class="flexContainer" style="flex-flow: row">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap", after flex-direction: -->
+  <div class="flexContainer" style="flex-flow: row wrap">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column wrap">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap", before flex-direction: -->
+  <div class="flexContainer" style="flex-flow: wrap row">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap row-reverse">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap column">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap column-reverse">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap-reverse", after flex-direction: -->
+  <div class="flexContainer" style="flex-flow: row wrap-reverse">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column wrap-reverse">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap-reverse", before flex-direction: -->
+  <div class="flexContainer" style="flex-flow: wrap-reverse row">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap-reverse column">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now just specifying flex-wrap (no flex-direction) -->
+  <div class="flexContainer" style="flex-flow: wrap">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap-reverse">
+    <div>1</div><div>2</div><div>3</div><div>4</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002-ref.html
new file mode 100644
index 000000000..a325959a2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002-ref.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      height: 60px;
+      width: 60px;
+      font: 10px sans-serif;
+      background: yellow;
+      float: left;
+      border: 1px solid black;
+    }
+    .flexContainer > * {
+      border: 1px dotted gray;
+      width: 28px;
+      height: 28px;
+      float: left;
+    }
+
+    /* The single-line flex containers' flex items are shrunk in main axis: */
+    .singleLineHoriz > * {
+      width: 18px;
+    }
+    .singleLineVert  > * {
+      height: 18px;
+      float: none;
+    }
+    .hidden {
+      /* We use this to hide the "4" box in each of the multi-line chunks.
+         The testcase has 3 flex items in each flex container, but it's easier
+         to write this reference case w/ a hidden 4th box as a space-filler. */
+      visibility: hidden;
+    }
+  </style>
+</head>
+<body>
+  <!-- single-line (flex-wrap unspecified): -->
+  <div class="flexContainer singleLineHoriz"><!-- flex-flow: row -->
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse -->
+    <div>3</div><div>2</div><div>1</div>
+  </div>
+  <div class="flexContainer singleLineVert"><!-- flex-flow: column -->
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse -->
+    <div>3</div><div>2</div><div>1</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap", after flex-direction: -->
+  <div class="flexContainer"><!-- flex-flow: row wrap -->
+    <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: row-reverse wrap -->
+    <div>2</div><div>1</div><div class="hidden">4</div><div>3</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: column wrap -->
+    <div>1</div><div>3</div><div>2</div><div class="hidden">4</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: column-reverse wrap -->
+    <div>2</div><div class="hidden">4</div><div>1</div><div>3</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap", before flex-direction: -->
+  <div class="flexContainer"><!-- flex-flow: wrap row -->
+    <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap row-reverse -->
+    <div>2</div><div>1</div><div class="hidden">4</div><div>3</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap column -->
+    <div>1</div><div>3</div><div>2</div><div class="hidden">4</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap column-reverse -->
+    <div>2</div><div class="hidden">4</div><div>1</div><div>3</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap-reverse", after flex-direction: -->
+  <div class="flexContainer"><!-- flex-flow: row wrap-reverse -->
+    <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse -->
+    <div class="hidden">4</div><div>3</div><div>2</div><div>1</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: column wrap-reverse -->
+    <div>3</div><div>1</div><div class="hidden">4</div><div>2</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse -->
+    <div class="hidden">4</div><div>2</div><div>3</div><div>1</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap-reverse", before flex-direction: -->
+  <div class="flexContainer"><!-- flex-flow: wrap-reverse row -->
+    <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse -->
+    <div class="hidden">4</div><div>3</div><div>2</div><div>1</div>
+  </div>
+  <div class="flexContainer"> <!-- flex-flow: wrap-reverse column -->
+    <div>3</div><div>1</div><div class="hidden">4</div><div>2</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse -->
+    <div class="hidden">4</div><div>2</div><div>3</div><div>1</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now just specifying flex-wrap (no flex-direction) -->
+  <div class="flexContainer"><!-- flex-flow: wrap -->
+    <div>1</div><div>2</div><div>3</div><div class="hidden">4</div>
+  </div>
+  <div class="flexContainer"><!-- flex-flow: wrap-reverse -->
+    <div>3</div><div class="hidden">4</div><div>1</div><div>2</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002.html
new file mode 100644
index 000000000..8ba3abdf4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-flow-002.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing all the values of the "flex-flow" shorthand property, with 3 flex items in each container</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-flow-property">
+  <link rel="match" href="flexbox-flex-flow-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      height: 60px;
+      width: 60px;
+      font: 10px sans-serif;
+      background: yellow;
+      float: left;
+      border: 1px solid black;
+    }
+    .flexContainer > * {
+      border: 1px dotted gray;
+      width: 28px;
+      height: 28px;
+      /* Explicitly set min-width & min-height to 0, to prevent their "auto"
+         value from influencing the sizes of our flex items (particularly for
+         the single-line chunks of this testcase, whose items may be shrunk a
+         little below the numerals' intrinsic sizes): */
+      min-width:  0;
+      min-height: 0;
+    }
+  </style>
+</head>
+<body>
+  <!-- single-line (flex-wrap unspecified): -->
+  <div class="flexContainer" style="flex-flow: row">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap", after flex-direction: -->
+  <div class="flexContainer" style="flex-flow: row wrap">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column wrap">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap", before flex-direction: -->
+  <div class="flexContainer" style="flex-flow: wrap row">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap row-reverse">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap column">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap column-reverse">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap-reverse", after flex-direction: -->
+  <div class="flexContainer" style="flex-flow: row wrap-reverse">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column wrap-reverse">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now using "wrap-reverse", before flex-direction: -->
+  <div class="flexContainer" style="flex-flow: wrap-reverse row">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap-reverse row-reverse">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap-reverse column">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap-reverse column-reverse">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+
+  <div style="clear:both"></div>
+
+  <!-- now just specifying flex-wrap (no flex-direction) -->
+  <div class="flexContainer" style="flex-flow: wrap">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+  <div class="flexContainer" style="flex-flow: wrap-reverse">
+    <div>1</div><div>2</div><div>3</div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001-ref.html
new file mode 100644
index 000000000..bb76cafff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001-ref.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 100px;
+      height: 12px;
+      margin-bottom: 2px;
+    }
+    div.halfMainSize {
+      width: 48px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.hugeMainSize {
+      width: 148px;
+      border: 1px solid purple;
+      background: fuchsia;
+    }
+    div.fullCrossSize {
+      height: 10px;
+    }
+    div.halfCrossSize {
+      height: 4px;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"></div>
+  </div>
+
+  <!-- Single small flex item with 'margin-left' set to push it to protrude
+       from the far edge of the container (and to shrink as a result) -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"
+         style="margin-left: 80px; width: 18px"></div>
+  </div>
+
+  <!-- Single small inflexible flex item with 'margin-left' set to push it to
+       protrude from the far edge of the container -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"
+         style="margin-left: 80px"></div>
+  </div>
+
+  <!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize" style="float: left"></div>
+    <div class="halfMainSize fullCrossSize" style="float: left"></div>
+  </div>
+
+  <!-- and now with some margin on first item, to force second item to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize"></div>
+    <div class="halfMainSize halfCrossSize"></div>
+  </div>
+
+  <!-- and now with some margin on second item, again forcing it to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize"></div>
+    <div class="halfMainSize halfCrossSize"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) and is shrunk
+       to fit container's main-size -->
+  <div class="flexbox">
+    <div class="hugeMainSize fullCrossSize" style="width: 98px"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) -->
+  <div class="flexbox">
+    <div class="hugeMainSize fullCrossSize"></div>
+  </div>
+
+  <!-- Small flex item, followed by large flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize"></div>
+    <div class="hugeMainSize halfCrossSize" style="width: 98px"></div>
+  </div>
+
+  <!-- Small flex item, followed by large inflexible flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize"></div>
+    <div class="hugeMainSize halfCrossSize"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001.html
new file mode 100644
index 000000000..75137a2f3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-001.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing flex-wrap in horizontal flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
+  <link rel="match" href="flexbox-flex-wrap-horiz-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 100px;
+      height: 12px;
+      margin-bottom: 2px;
+    }
+    div.halfMainSize {
+      width: 48px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.hugeMainSize {
+      width: 148px;
+      border: 1px solid purple;
+      background: fuchsia;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- Single small flex item with 'margin-left' set to push it to protrude
+       from the far edge of the container (and to shrink as a result) -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-left: 80px"></div>
+  </div>
+
+  <!-- Single small inflexible flex item with 'margin-left' set to push it to
+       protrude from the far edge of the container -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-left: 80px; flex: none"></div>
+  </div>
+
+  <!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- and now with some margin on first item, to force second item to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-right: 1px"></div>
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- and now with some margin on second item, again forcing it to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="halfMainSize" style="margin-right: 1px"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) and is shrunk
+       to fit container's main-size -->
+  <div class="flexbox">
+    <div class="hugeMainSize"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) -->
+  <div class="flexbox">
+    <div class="hugeMainSize" style="flex: none"></div>
+  </div>
+
+  <!-- Small flex item, followed by large flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="hugeMainSize"></div>
+  </div>
+
+  <!-- Small flex item, followed by large inflexible flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="hugeMainSize" style="flex: none"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002-ref.html
new file mode 100644
index 000000000..88c3beb19
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      min-width: 100px;
+      height: 12px;
+      float: left;
+      clear: both;
+      margin-bottom: 2px;
+    }
+    div.smallItem {
+      width: 30px;
+      border: 1px solid blue;
+      background: lightblue;
+      float: left;
+    }
+    div.fullCrossSize {
+      height: 10px;
+    }
+    div.halfCrossSize {
+      height: 4px;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- No flex items -->
+  <div class="flexbox">
+  </div>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="smallItem fullCrossSize"></div>
+  </div>
+
+  <!-- Multiple flex items, larger than flex container's min-size: -->
+  <div class="flexbox">
+    <div class="smallItem fullCrossSize"></div>
+    <div class="smallItem fullCrossSize"></div>
+    <div class="smallItem fullCrossSize"></div>
+    <div class="smallItem fullCrossSize"></div>
+    <div class="smallItem fullCrossSize"></div>
+  </div>
+
+  <!--- ...and now with flex container constrained by both min and max-size -->
+  <div class="flexbox" style="max-width: 120px">
+    <div class="smallItem halfCrossSize"></div>
+    <div class="smallItem halfCrossSize"></div>
+    <div class="smallItem halfCrossSize"></div>
+    <div class="smallItem halfCrossSize"></div>
+    <div class="smallItem halfCrossSize"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002.html
new file mode 100644
index 000000000..901a31ec5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-horiz-002.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Ensure that min-width is honored for horizontal multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
+  <link rel="match" href="flexbox-flex-wrap-horiz-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      min-width: 100px;
+      height: 12px;
+      float: left;
+      clear: both;
+      margin-bottom: 2px;
+    }
+    div.smallItem {
+      width: 30px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- No flex items -->
+  <div class="flexbox">
+  </div>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+  </div>
+
+  <!-- Multiple flex items, larger than flex container's min-size: -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+  </div>
+
+  <!--- ...and now with flex container constrained by both min and max-size -->
+  <div class="flexbox" style="max-width: 120px">
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001-ref.html
new file mode 100644
index 000000000..67f2c75da
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 12px;
+      height: 100px;
+      margin-right: 2px;
+      float: left;
+    }
+    div.halfMainSize {
+      height: 48px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.hugeMainSize {
+      height: 148px;
+      border: 1px solid purple;
+      background: fuchsia;
+    }
+    div.fullCrossSize {
+      width: 10px;
+    }
+    div.halfCrossSize {
+      width: 4px;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"></div>
+  </div>
+
+  <!-- Single small flex item with 'margin-left' set to push it to protrude
+       from the far edge of the container (and to shrink as a result) -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"
+         style="margin-top: 80px; height: 18px"></div>
+  </div>
+
+  <!-- Single small inflexible flex item with 'margin-left' set to push it to
+       protrude from the far edge of the container -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"
+         style="margin-top: 80px"></div>
+  </div>
+
+  <!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
+  <div class="flexbox">
+    <div class="halfMainSize fullCrossSize"></div>
+    <div class="halfMainSize fullCrossSize"></div>
+  </div>
+
+  <!-- and now with some margin on first item, to force second item to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+  </div>
+
+  <!-- and now with some margin on second item, again forcing it to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) and is shrunk
+       to fit container's main-size -->
+  <div class="flexbox">
+    <div class="hugeMainSize fullCrossSize" style="height: 98px"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) -->
+  <div class="flexbox">
+    <div class="hugeMainSize fullCrossSize"></div>
+  </div>
+
+  <!-- Small flex item, followed by large flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+    <div class="hugeMainSize halfCrossSize" style="float: left; height: 98px"></div>
+  </div>
+
+  <!-- Small flex item, followed by large inflexible flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize halfCrossSize" style="float: left"></div>
+    <div class="hugeMainSize halfCrossSize" style="float: left"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001.html
new file mode 100644
index 000000000..b5229b65b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-001.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Testing flex-wrap in vertical flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
+  <link rel="match" href="flexbox-flex-wrap-vert-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 12px;
+      height: 100px;
+      margin-right: 2px;
+      float: left;
+    }
+    div.halfMainSize {
+      height: 48px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.hugeMainSize {
+      height: 148px;
+      border: 1px solid purple;
+      background: fuchsia;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- Single small flex item with 'margin-top' set to push it to protrude
+       from the far edge of the container (and to shrink as a result) -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-top: 80px"></div>
+  </div>
+
+  <!-- Single small inflexible flex item with 'margin-top' set to push it to
+       protrude from the far edge of the container -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-top: 80px; flex: none"></div>
+  </div>
+
+  <!-- Two flex items, exactly large enough to fit in line (no wrapping): -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- and now with some margin on first item, to force second item to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize" style="margin-bottom: 1px"></div>
+    <div class="halfMainSize"></div>
+  </div>
+
+  <!-- and now with some margin on second item, again forcing it to wrap: -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="halfMainSize" style="margin-bottom: 1px"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) and is shrunk
+       to fit container's main-size -->
+  <div class="flexbox">
+    <div class="hugeMainSize"></div>
+  </div>
+
+  <!-- Single large flex item: overflows (but does not wrap) -->
+  <div class="flexbox">
+    <div class="hugeMainSize" style="flex: none"></div>
+  </div>
+
+  <!-- Small flex item, followed by large flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="hugeMainSize"></div>
+  </div>
+
+  <!-- Small flex item, followed by large inflexible flex item (which wraps to
+       its own line and then shrink to container's main-size) -->
+  <div class="flexbox">
+    <div class="halfMainSize"></div>
+    <div class="hugeMainSize" style="flex: none"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002-ref.html
new file mode 100644
index 000000000..f9a4553cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      border: 1px dashed black;
+      width: 12px;
+      min-height: 100px;
+      margin-right: 2px;
+      float: left;
+    }
+    div.smallItem {
+      height: 30px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+    div.halfCrossSize {
+      width: 4px;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- No flex items -->
+  <div class="flexbox">
+  </div>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+  </div>
+
+  <!-- Multiple flex items, larger than flex container's min-size: -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+  </div>
+
+  <!--- ...and now with flex container constrained by both min and max-size -->
+  <div class="flexbox" style="max-height: 120px">
+    <div class="smallItem halfCrossSize" style="float: left"></div>
+    <div class="smallItem halfCrossSize" style="float: left"></div>
+    <div class="smallItem halfCrossSize" style="float: left"></div>
+    <div class="smallItem halfCrossSize" style="float: left"></div>
+    <div class="smallItem halfCrossSize" style="float: left"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002.html
new file mode 100644
index 000000000..8a2dcbc40
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-flex-wrap-vert-002.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Ensure that min-height is honored for vertical multi-line flex containers</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
+  <link rel="match" href="flexbox-flex-wrap-vert-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    div.flexbox {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      border: 1px dashed black;
+      width: 12px;
+      min-height: 100px;
+      margin-right: 2px;
+      float: left;
+    }
+    div.smallItem {
+      height: 30px;
+      border: 1px solid blue;
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- No flex items -->
+  <div class="flexbox">
+  </div>
+
+  <!-- Single small flex item -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+  </div>
+
+  <!-- Multiple flex items, larger than flex container's min-size: -->
+  <div class="flexbox">
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+  </div>
+
+  <!--- ...and now with flex container constrained by both min and max-size -->
+  <div class="flexbox" style="max-height: 120px">
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+    <div class="smallItem"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001-ref.html
new file mode 100644
index 000000000..7441b282f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001-ref.html
@@ -0,0 +1,122 @@
+<!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>
+      .flexbox {
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+        vertical-align: top;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 34px;
+                                              height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 34px;
+                                              height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 34px;
+                                              height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 34px;
+                                              height: 34px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 6px;
+                                              height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 6px;
+                                              height: 6px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001.html
new file mode 100644
index 000000000..43d512dcd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio.
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002.html
new file mode 100644
index 000000000..229540ff4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flex item w/ intrinsic ratio.
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003-ref.html
new file mode 100644
index 000000000..38071c22f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003-ref.html
@@ -0,0 +1,123 @@
+<!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>
+      .flexbox {
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+        vertical-align: top;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 16px;
+                                              height: 40px">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 40px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 34px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 34px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 34px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 34px;
+                                              height: 40px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 6px;
+                                              height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 6px;
+                                              height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 40px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 40px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003.html
new file mode 100644
index 000000000..cf1c7a74c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on stretched flex item w/ intrinsic ratio.
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-003-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: stretch;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004-ref.html
new file mode 100644
index 000000000..38e43a835
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004-ref.html
@@ -0,0 +1,123 @@
+<!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>
+      .flexbox {
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+        vertical-align: top;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 16px">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 34px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 6px;
+                                              height: 6px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004.html
new file mode 100644
index 000000000..bf2912f04
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on stretched flex item w/ intrinsic ratio.
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-004-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: stretch;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 0 0 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005-ref.html
new file mode 100644
index 000000000..2bfd4550c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005-ref.html
@@ -0,0 +1,123 @@
+<!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>
+      .flexbox {
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+        vertical-align: top;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 6px;
+                                              height: 6px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005.html
new file mode 100644
index 000000000..fe7d806bc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flexible flex item w/ intrinsic ratio.
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-005-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: row;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        flex: 1;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 1 1 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006-ref.html
new file mode 100644
index 000000000..513fc0dca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006-ref.html
@@ -0,0 +1,123 @@
+<!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>
+      .flexbox {
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+        vertical-align: top;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 6px;
+                                              height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 6px;
+                                              height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 40px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 40px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 40px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              height: 40px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006.html
new file mode 100644
index 000000000..764075c10
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>
+      CSS Test: Testing how explicit main-size & cross-size constraints
+      influence sizing on non-stretched flexible flex item w/ intrinsic ratio.
+    </title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
+    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
+    <link rel="match" href="flexbox-intrinsic-ratio-006-ref.html">
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid black;
+        margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
+        width: 40px;
+        height: 40px;
+
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        float: left; /* For testing in "rows" */
+      }
+      br { clear: both; }
+
+      .flexbox > * {
+        flex: 1;
+
+        /* Disable "min-width:auto"/"min-height:auto" to focus purely on
+           later channels of influence. */
+        min-width: 0;
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
+
+    <!-- Row 1: no special sizing: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png">
+    </div>
+    <br>
+
+    <!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="flex: 1 1 30px">
+    </div>
+    <br>
+
+    <!-- Row 3: min main-size OR min cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              min-height: 34px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 34px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 4: max main-size OR max cross-size, or both -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              max-height: 6px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 6px;
+                                              max-height: 10px">
+    </div>
+    <br>
+
+    <!-- Row 5: min main-size vs. max cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              min-height: 30px">
+    </div>
+    <br>
+
+    <!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="min-width: 30px;
+                                              height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 30px;
+                                              max-height: 10px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="max-width: 10px;
+                                              height: 30px">
+    </div>
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="width: 10px;
+                                              min-height: 30px">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001-ref.xhtml
new file mode 100644
index 000000000..7e02b799f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001-ref.xhtml
@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case, with floated elements in place of flex items, and using
+     "position: relative" on those elements, to make z-index work on them
+     outside of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .flexbox {
+        width: 90px;
+        height: 10px;
+        border: 2px solid gray;
+        margin-bottom: 10px;
+      }
+      .a {
+        width: 10px;
+        height: 10px;
+        background: lightblue;
+        min-width: 0;
+        float: left;
+      }
+      .b {
+        width: 10px;
+        height: 10px;
+        background: pink;
+        min-width: 0;
+        margin-right: 10px;
+        float: left;
+      }
+      .aKid {
+         margin-left: 3px;
+         margin-top:  3px;
+         width: 10px;
+         height: 10px;
+         background: steelblue;
+         border: 1px solid blue;
+      }
+      .bKid {
+         margin-left: 3px;
+         margin-top:  6px;
+         width: 10px;
+         height: 10px;
+         background: violet;
+         border: 1px solid purple;
+      }
+
+      .z0, .z1, .zn1 { position: relative; }
+      .z0  { z-index:  0; }
+      .z1  { z-index:  1; }
+      .zn1 { z-index: -1; }
+
+    </style>
+  </head>
+ <body>
+   <!-- No "z-index" -->
+    <div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div>
+
+    <!-- Various "z-index" just on the first item -->
+    <div class="flexbox">
+      <div class="a zn1"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+
+      <div class="a z0"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+
+      <div class="a z1"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div>
+
+    <!-- Various "z-index" just on the second item -->
+    <div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b zn1"><div class="bKid"/></div>
+
+      <div class="a"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+
+      <div class="a"><div class="aKid"/></div>
+      <div class="b z1"><div class="bKid"/></div>
+    </div>
+
+    <!-- Various "z-index" on the first item, w/ "z-index:0" on second item -->
+    <div class="flexbox">
+      <div class="a zn1"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+
+      <div class="a z0"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+
+      <div class="a z1"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+    </div>
+
+    <!-- Various "z-index" on the second item, w/ "z-index:0" on first item -->
+    <div class="flexbox">
+      <div class="a z0"><div class="aKid"/></div>
+      <div class="b zn1"><div class="bKid"/></div>
+
+      <div class="a z0"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+
+      <div class="a z0"><div class="aKid"/></div>
+      <div class="b z1"><div class="bKid"/></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001.xhtml
new file mode 100644
index 000000000..fac905339
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-001.xhtml
@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with flex items containing overlapping content, with
+     "z-index" set on some of them, which should make them create
+     stacking contexts. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing that 'z-index' property makes flex items form stacking contexts</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"/>
+    <link rel="match" href="flexbox-items-as-stacking-contexts-001-ref.xhtml"/>
+    <style>
+      .flexbox {
+        width: 90px;
+        height: 10px;
+        border: 2px solid gray;
+        display: flex;
+        margin-bottom: 10px;
+      }
+      .a {
+        width: 10px;
+        height: 10px;
+        background: lightblue;
+        min-width: 0;
+      }
+      .b {
+        width: 10px;
+        height: 10px;
+        background: pink;
+        min-width: 0;
+        margin-right: 10px;
+      }
+      .aKid {
+         margin-left: 3px;
+         margin-top:  3px;
+         width: 10px;
+         height: 10px;
+         background: steelblue;
+         border: 1px solid blue;
+      }
+      .bKid {
+         margin-left: 3px;
+         margin-top:  6px;
+         width: 10px;
+         height: 10px;
+         background: violet;
+         border: 1px solid purple;
+      }
+      .z0  { z-index: 0;  }
+      .z1  { z-index: 1; }
+      .zn1 { z-index: -1; }
+
+    </style>
+  </head>
+ <body>
+   <!-- No "z-index" -->
+    <div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div>
+
+    <!-- Various "z-index" just on the first item -->
+    <div class="flexbox">
+      <div class="a zn1"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+
+      <div class="a z0"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+
+      <div class="a z1"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div>
+
+    <!-- Various "z-index" just on the second item -->
+    <div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b zn1"><div class="bKid"/></div>
+
+      <div class="a"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+
+      <div class="a"><div class="aKid"/></div>
+      <div class="b z1"><div class="bKid"/></div>
+    </div>
+
+    <!-- Various "z-index" on the first item, w/ "z-index:0" on second item -->
+    <div class="flexbox">
+      <div class="a zn1"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+
+      <div class="a z0"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+
+      <div class="a z1"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+    </div>
+
+    <!-- Various "z-index" on the second item, w/ "z-index:0" on first item -->
+    <div class="flexbox">
+      <div class="a z0"><div class="aKid"/></div>
+      <div class="b zn1"><div class="bKid"/></div>
+
+      <div class="a z0"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+
+      <div class="a z0"><div class="aKid"/></div>
+      <div class="b z1"><div class="bKid"/></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002-ref.html
new file mode 100644
index 000000000..a67a31936
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    body { font: 10px sans-serif }
+    .flexContainer {
+      background: orange;
+      width: 70px;
+      padding: 2px;
+      margin-bottom: 2px;
+    }
+
+    .flexContainer > div:first-child {
+      margin-right: 10px; /* the space between the flex items, in testcase */
+    }
+
+    .item1 {
+      display: inline-block;
+      background: lightblue;
+      width: 30px;
+    }
+    .item2 {
+      display: inline-block;
+      background: yellow;
+      width: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"
+    ><div class="item1">ThisIsALongUnbrokenString</div
+    ><div class="item2">HereIsSomeMoreLongText</div
+  ></div>
+
+  <div class="flexContainer"
+    ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div
+    ><div class="item2">HereIsSomeMoreLongText</div
+  ></div>
+
+  <div class="flexContainer"
+    ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div
+    ><div class="item2">HereIsSomeMoreLongText</div
+  ></div>
+
+  <div class="flexContainer"
+    ><div class="item2">HereIsSomeMoreLongText</div
+    ><div class="item1">ThisIsALongUnbrokenString</div
+  ></div>
+
+  <div class="flexContainer"
+    ><div class="item2">HereIsSomeMoreLongText</div
+    ><div class="item1">ThisIsALongUnbrokenString</div
+  ></div>
+
+  <div class="flexContainer"
+    ><div class="item2" style="position:relative">HereIsSomeMoreLongText</div
+    ><div class="item1">ThisIsALongUnbrokenString</div
+  ></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002.html
new file mode 100644
index 000000000..4b21404a9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-002.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks flex items are painted atomically. In particular,
+     if one item has content that overflows into the region of another item,
+     then one item is painted "behind" the other; there shouldn't normally
+     any interleaving of backgrounds and content between the two items.
+
+     This testcase also tests some special cases that will change the paint
+     ordering - specifically, the properties "position", "z-index", and
+     "order" on flex items.
+ -->
+<!-- This was resolved by the CSSWG in April 2013:
+     http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 -->
+<html>
+<head>
+  <title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks): atomically, in the absence of 'z-index' on descendants</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting">
+  <link rel="match" href="flexbox-items-as-stacking-contexts-002-ref.html">
+  <style>
+    body { font: 10px sans-serif }
+    .flexContainer {
+      background: orange;
+      display: flex;
+      justify-content: space-between;
+      width: 70px;
+      padding: 2px;
+      margin-bottom: 2px;
+    }
+    .item1 {
+      background: lightblue;
+      width: 30px;
+      min-width: 0; /* disable default min-width:auto behavior */
+    }
+    .item2 {
+      background: yellow;
+      width: 30px;
+      min-width: 0; /* disable default min-width:auto behavior */
+    }
+  </style>
+</head>
+<body>
+  <!-- This container has two flex items, the first of which has content
+       sticking out & overlapping the second.  If they're painting atomically
+       (and in the right order), the second item's background should cover the
+       first item's overflowing content. -->
+  <div class="flexContainer"
+    ><div class="item1">ThisIsALongUnbrokenString</div
+    ><div class="item2">HereIsSomeMoreLongText</div
+  ></div>
+
+  <!-- Now, the first item is relatively positioned, which should make it paint
+       on top of everything. -->
+  <div class="flexContainer"
+    ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div
+    ><div class="item2">HereIsSomeMoreLongText</div
+  ></div>
+
+  <!-- Now, the first item is has "z-index" set, which should make it paint on
+       top of everything. -->
+  <div class="flexContainer"
+    ><div class="item1" style="z-index: 1">ThisIsALongUnbrokenString</div
+    ><div class="item2">HereIsSomeMoreLongText</div
+  ></div>
+
+  <!-- Now, the first item has "order" set to a higher value than default,
+       which should make it paint on top (and at the far right) -->
+  <div class="flexContainer"
+    ><div class="item1" style="order: 1">ThisIsALongUnbrokenString</div
+    ><div class="item2">HereIsSomeMoreLongText</div
+  ></div>
+
+  <!-- And for thoroughness, let's set "order" to a lower value than default,
+       on the second item. (Should render the same as previous example.)  -->
+  <div class="flexContainer"
+    ><div class="item1">ThisIsALongUnbrokenString</div
+    ><div class="item2" style="order: -1">HereIsSomeMoreLongText</div
+  ></div>
+
+  <!-- ...but if we relatively position that second item, it should paint
+       on top again, despite its low "order" value. -->
+  <div class="flexContainer"
+    ><div class="item1">ThisIsALongUnbrokenString</div
+    ><div class="item2" style="order: -1; position: relative">HereIsSomeMoreLongText</div
+  ></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003-ref.html
new file mode 100644
index 000000000..814f06cca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003-ref.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .flexContainer {
+      background: orange;
+      width: 70px;
+      height: 20px;
+      padding: 2px;
+      margin-bottom: 2px;
+    }
+    .item1 {
+      display: inline-block;
+      background: lightblue;
+      width: 30px;
+      height: 16px;
+      padding: 2px;
+      margin-right: 2px;
+      vertical-align: top;
+    }
+    .item2 {
+      display: inline-block;
+      background: yellow;
+      width: 30px;
+      height: 16px;
+      padding: 2px;
+      vertical-align: top;
+    }
+    .grandchildA {
+      background: purple;
+      width: 80px;
+      height: 6px;
+      position: relative;
+      z-index: 10;
+    }
+    .grandchildB {
+      background: teal;
+      width: 80px;
+      height: 6px;
+      position: relative;
+      z-index: 20;
+    }
+    .grandchildC {
+      background: lime;
+      width: 20px;
+      height: 16px;
+      position: relative;
+      /* This z-index should interleave this content
+         between grandchildA and grandchildB: */
+      z-index: 15;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"
+    ><div class="item1"
+      ><div class="grandchildA"></div
+      ><div class="grandchildB"></div
+    ></div
+    ><div class="item2"
+      ><div class="grandchildC"></div
+    ></div
+  ></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003.html
new file mode 100644
index 000000000..5f0fd8ba3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-003.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that flex items are painted as pseudo-stacking
+     contexts, instead of full stacking contexts. In other words, content
+     inside of one flex item should be able to iterleave between pieces of
+     content in another flex item, if we set appropriately interleaving
+     "z-index" values. -->
+<!-- This was resolved by the CSSWG in April 2013:
+     http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 -->
+<html>
+<head>
+  <title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks), instead of full stacking contexts: 'z-index' should let descendants interleave</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting">
+  <link rel="match" href="flexbox-items-as-stacking-contexts-003-ref.html">
+  <style>
+    .flexContainer {
+      background: orange;
+      display: flex;
+      justify-content: space-between;
+      width: 70px;
+      height: 20px;
+      padding: 2px;
+      margin-bottom: 2px;
+    }
+    .item1 {
+      background: lightblue;
+      width: 30px;
+      min-width: 0; /* disable default min-width:auto behavior */
+      padding: 2px;
+    }
+    .item2 {
+      background: yellow;
+      width: 30px;
+      padding: 2px;
+    }
+    .grandchildA {
+      background: purple;
+      width: 80px;
+      height: 6px;
+      position: relative;
+      z-index: 10;
+    }
+    .grandchildB {
+      background: teal;
+      width: 80px;
+      height: 6px;
+      position: relative;
+      z-index: 20;
+    }
+    .grandchildC {
+      background: lime;
+      width: 20px;
+      height: 16px;
+      position: relative;
+      /* This z-index should interleave this content
+         between grandchildA and grandchildB: */
+      z-index: 15;
+    }
+  </style>
+</head>
+<body>
+  <!-- This flex container's first flex item has content that overflows
+       and overlap the second flex item.  The z-index values are set such
+       that this content should interleave; grandchildC should
+       paint on top of grandchildA, but underneath grandchildB. -->
+  <div class="flexContainer"
+    ><div class="item1"
+      ><div class="grandchildA"></div
+      ><div class="grandchildB"></div
+    ></div
+    ><div class="item2"
+      ><div class="grandchildC"></div
+    ></div
+  ></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml
new file mode 100644
index 000000000..4619337e7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml
@@ -0,0 +1,145 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        margin-bottom: 2px;
+        line-height: 0;
+      }
+      div.flexbox > * {
+        display: inline-block;
+      }
+      div.a {
+        height: 20px;
+        width: 10px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        width: 50px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        width: 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 140px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 70px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 20px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b" style="margin-left: 140px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"
+           /><div class="b" style="margin-left: 20px"
+           /><div class="c" style="margin-left: 20px"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 35px"
+           /><div class="b" style="margin-left: 70px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: calc(40px / 6)"
+           /><div class="b" style="margin-left: calc(40px / 3)"
+           /><div class="c" style="margin-left: calc(40px / 3)"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: calc(140px / 3)"
+           /><div class="b" style="margin-left: calc(140px / 3)"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 10px"
+           /><div class="b" style="margin-left: 10px"
+           /><div class="c" style="margin-left: 10px"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 140px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml
new file mode 100644
index 000000000..37c9db7a3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of horizontal flex containers, testing each
+     possible value of the 'justify-content' property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        display: flex;
+        margin-bottom: 2px;
+      }
+      div.a {
+        height: 20px;
+        flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001b.xhtml
new file mode 100644
index 000000000..43c540564
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001b.xhtml
@@ -0,0 +1,145 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of horizontal flex containers, testing each
+     possible value of the 'justify-content' property. The flex containers'
+     widths are determined by their "min-width" property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a horizontal flex container with "min-width"</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        min-width: 200px;
+        display: flex;
+        margin-bottom: 2px;
+
+        /* Use "float" to trigger intrinsic sizing, which in this case will
+            make us clamp to "min-width": */
+        float: left;
+        clear: both;
+      }
+      div.a {
+        height: 20px;
+        flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002-ref.xhtml
new file mode 100644
index 000000000..0e43e6ff8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002-ref.xhtml
@@ -0,0 +1,159 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        line-height: 0;
+        margin-bottom: 4px;
+        border: 1px dotted black;
+      }
+      div.flexbox > * {
+        vertical-align: top;
+        display: inline-block;
+      }
+      div.a {
+        height: 10px;
+        width: 10px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    1px;
+        border-right-width:  2px;
+        border-bottom-width: 3px;
+        border-left-width:   4px;
+        padding: 2px;
+      }
+      div.b {
+        height: 10px;
+        width: 50px;
+        background: pink;
+        padding: 4px 3px 2px 1px;
+        margin: 2px 3px 4px 5px;
+      }
+      div.c {
+        height: 10px;
+        width: 100px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 180px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 118px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 59px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 4px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div style="margin-left: 118px"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"
+           /><div style="margin-left: 4px"><div class="b"/></div
+            ><div style="margin-left: 4px"><div class="c"/></div>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 29.5px"
+           /><div style="margin-left: 59px"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: calc(8px / 6)"
+           /><div style="margin-left: calc(8px / 3)"><div class="b"/></div
+            ><div style="margin-left: calc(8px / 3)"><div class="c"/></div>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: calc(118px / 3)"
+           /><div style="margin-left: calc(118px / 3)"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 2px"
+           /><div style="margin-left: 2px"><div class="b"/></div
+            ><div style="margin-left: 2px"><div class="c"/></div>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox">
+      <div class="a" style="margin-left: 180px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 118px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002.xhtml
new file mode 100644
index 000000000..93d34ab79
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002.xhtml
@@ -0,0 +1,152 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of flex containers testing each possible value of
+     the 'justify-content' property, with margin/border/padding on the
+     flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a horizontal flex container, with margins/border/padding on flex items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-horiz-002-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        display: flex;
+        margin-bottom: 4px;
+        border: 1px dotted black;
+      }
+      div.a {
+        height: 10px;
+        flex: 0 10px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    1px;
+        border-right-width:  2px;
+        border-bottom-width: 3px;
+        border-left-width:   4px;
+        padding: 2px;
+      }
+      div.b {
+        height: 10px;
+        flex: 0 50px;
+        background: pink;
+        padding: 4px 3px 2px 1px;
+        margin: 2px 3px 4px 5px;
+      }
+      div.c {
+        height: 10px;
+        flex: 0 100px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003-ref.xhtml
new file mode 100644
index 000000000..4ad2dc202
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003-ref.xhtml
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      body { margin-left: 0px; } /* We'll apply margins w/ style attribute */
+      div.flexbox {
+        margin-bottom: 2px;
+        line-height: 0;
+      }
+      div.flexbox > * {
+        display: inline-block;
+      }
+      div.a {
+        height: 20px;
+        width: 35px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        width: 40px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        width: 45px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="margin-left: 95px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 55px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 10px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="margin-left: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="margin-left: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="margin-left: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="margin-left: 95px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 55px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 10px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003.xhtml
new file mode 100644
index 000000000..40c8fb5c0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003.xhtml
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a variety of 'display: flex' examples testing each
+     possible value of the 'justify-content' property, and with each
+     individual flex item being wider than the flexbox itself (so that
+     there isn't any packing space available).
+       * For 'flex-start'/'space-between', we should overflow on the end
+         (right) side.
+       * For 'flex-end', we should overflow on the start (left) side.
+       * For 'center'/'space-around', we should overflow equally on both sides.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-horiz-003-ref.xhtml"/>
+    <style>
+      body { margin-left: 100px; } /* So we can see left-overflowed stuff */
+      div.flexbox {
+        width: 30px;
+        display: flex;
+        margin-bottom: 2px;
+      }
+      div.a {
+        height: 20px;
+        flex: 0 0 35px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        flex: 0 0 40px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        flex: 0 0 45px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004-ref.xhtml
new file mode 100644
index 000000000..231729d85
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004-ref.xhtml
@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      body { margin-left: 0px; } /* We'll apply margins w/ style attribute */
+      div.flexbox {
+        line-height: 0;
+        margin-bottom: 4px;
+      }
+      div.flexbox > * {
+        vertical-align: top;
+        display: inline-block;
+      }
+      div.a {
+        height: 10px;
+        width: 35px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    1px;
+        border-right-width:  2px;
+        border-bottom-width: 3px;
+        border-left-width:   4px;
+        padding: 2px;
+      }
+      div.b {
+        height: 10px;
+        width: 40px;
+        background: pink;
+        padding: 4px 3px 2px 1px;
+        margin: 2px 3px 4px 5px;
+      }
+      div.c {
+        height: 10px;
+        width: 45px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="margin-left: 85px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 33px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: -22px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="margin-left: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="margin-left: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="margin-left: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="margin-left: 85px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 33px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: -22px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004.xhtml
new file mode 100644
index 000000000..8f46426e4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004.xhtml
@@ -0,0 +1,158 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a variety of 'display: flex' examples testing each
+     possible value of the 'justify-content' property, and with each
+     individual flex item being wider than the flexbox itself (so that
+     there isn't any packing space available).
+       * For 'flex-start'/'space-between', we should overflow on the end
+         (right) side.
+       * For 'flex-end', we should overflow on the start (left) side.
+       * For 'center'/'space-around', we should overflow equally on both sides.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a horizontal flex container, and its effects on flex items that overflow, with margins/border/padding on flex items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-horiz-004-ref.xhtml"/>
+    <style>
+      body { margin-left: 100px; } /* So we can see left-overflowed stuff */
+      div.flexbox {
+        width: 30px;
+        display: flex;
+        margin-bottom: 4px;
+      }
+      div.a {
+        height: 10px;
+        flex: 0 0 35px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    1px;
+        border-right-width:  2px;
+        border-bottom-width: 3px;
+        border-left-width:   4px;
+        padding: 2px;
+      }
+      div.b {
+        height: 10px;
+        flex: 0 0 40px;
+        background: pink;
+        padding: 4px 3px 2px 1px;
+        margin: 2px 3px 4px 5px;
+      }
+      div.c {
+        height: 10px;
+        flex: 0 0 45px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml
new file mode 100644
index 000000000..82f872d29
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml
@@ -0,0 +1,189 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      body { line-height: 0; }
+
+      div.flexbox > * {
+        display: inline-block;
+      }
+      div.a {
+        height: 20px;
+        width: 10px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        width: 50px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        width: 100px;
+        background: orange;
+      }
+      .centerParent {
+        text-align: center;
+      }
+      .center {
+        display: inline-block;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="float:right; clear:right;">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="float:right; clear:right;">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="float:right; clear:right;">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+    <div style="clear:right;"></div>
+
+    <!-- center -->
+    <div class="centerParent">
+      <div class="flexbox center">
+        <div class="a"/>
+      </div>
+    </div>
+    <div class="centerParent">
+      <div class="flexbox center">
+        <div class="a"/><div class="b"/>
+      </div>
+    </div>
+    <div class="centerParent">
+      <div class="flexbox center">
+        <div class="a"/><div class="b"/><div class="c"/>
+      </div>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b" style="float: right"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="display:block; float: left"/>
+      <div class="c" style="float:right"/>
+      <!-- Use fixed-size margins to subtract space for "a" and "c", and then
+           use auto margins to center 'b' within the remaining space -->
+      <div style="display: block; margin-left: 10px; margin-right: 100px">
+        <div class="b" style="margin: auto"/>
+      </div>
+    </div>
+
+    <!-- space-around -->
+    <!-- Center "a" here just as we did above in the "center" case. -->
+    <div class="centerParent">
+      <div class="flexbox center">
+        <div class="a"/>
+      </div>
+    </div>
+    <!-- For the rest, we'll use a flex container with invisible flexible items
+         instead of packing space. That's simpler than trying to hack up
+         a width-independent reference case for "justify-content: space-around".
+         (There are other reftests to ensure that basic flex container
+         behavior is correct, so it's safe to rely on it here.) -->
+    <div class="flexbox" style="display: flex">
+      <div style="flex: 0.5"/>
+      <div class="a"/>
+      <div style="flex: 1"/>
+      <div class="b"/>
+      <div style="flex: 0.5"/>
+    </div>
+    <div class="flexbox" style="display: flex">
+      <div style="flex: 0.5"/>
+      <div class="a"/>
+      <div style="flex: 1"/>
+      <div class="b"/>
+      <div style="flex: 1"/>
+      <div class="c"/>
+      <div style="flex: 0.5"/>
+    </div>
+
+    <!-- space-evenly -->
+    <!-- Center "a" here just as we did above in the "center" case. -->
+    <div class="centerParent">
+      <div class="flexbox center">
+        <div class="a"/>
+      </div>
+    </div>
+    <!-- As above with space-around, we'll use a flex container with invisible
+         flexible items instead of packing space. -->
+    <div class="flexbox" style="display: flex">
+      <div style="flex: 1"/>
+      <div class="a"/>
+      <div style="flex: 1"/>
+      <div class="b"/>
+      <div style="flex: 1"/>
+    </div>
+    <div class="flexbox" style="display: flex">
+      <div style="flex: 1"/>
+      <div class="a"/>
+      <div style="flex: 1"/>
+      <div class="b"/>
+      <div style="flex: 1"/>
+      <div class="c"/>
+      <div style="flex: 1"/>
+    </div>
+
+
+    <!-- left -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="float:right; clear:right;">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="float:right; clear:right;">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="float:right; clear:right;">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+    <div style="clear:right;"></div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml
new file mode 100644
index 000000000..53cba03fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase to exercise each possible value of the 'justify-content'
+     property, in an auto-sized horizontal flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in an auto-sized horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-horiz-005-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        display: flex;
+      }
+      div.a {
+        height: 20px;
+        flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 20px;
+        flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        height: 20px;
+        flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
new file mode 100644
index 000000000..20f1c5df3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        margin-right: 2px;
+        float: left;
+      }
+      div.a {
+        width: 20px;
+        height: 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        height: 50px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        height: 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 140px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 40px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 70px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 20px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b" style="margin-top: 140px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"
+           /><div class="b" style="margin-top: 20px"
+           /><div class="c" style="margin-top: 20px"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 35px"
+           /><div class="b" style="margin-top: 70px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: calc(40px / 6)"
+           /><div class="b" style="margin-top: calc(40px / 3)"
+           /><div class="c" style="margin-top: calc(40px / 3)"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 95px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: calc(140px / 3)"
+           /><div class="b" style="margin-top: calc(140px / 3)"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 10px"
+           /><div class="b" style="margin-top: 10px"
+           /><div class="c" style="margin-top: 10px"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
new file mode 100644
index 000000000..d4b32b391
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
@@ -0,0 +1,141 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of vertical flex containers, testing each
+     possible value of the 'justify-content' property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        display: flex;
+        flex-direction: column;
+        margin-right: 2px;
+        float: left;
+      }
+      div.a {
+        width: 20px;
+        flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001b.xhtml
new file mode 100644
index 000000000..0ce154e24
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001b.xhtml
@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of vertical flex containers, testing each
+     possible value of the 'justify-content' property. The flex containers'
+     heights are determined by their "min-height" property. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a vertical flex container with "min-height"</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-vert-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        min-height: 200px;
+        display: flex;
+        flex-direction: column;
+        margin-right: 2px;
+        float: left;
+      }
+      div.a {
+        width: 20px;
+        flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002-ref.xhtml
new file mode 100644
index 000000000..d0ca31012
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002-ref.xhtml
@@ -0,0 +1,156 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        margin-right: 2px;
+        border: 1px dotted black;
+        float: left;
+      }
+      div.a {
+        width: 10px;
+        height: 10px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    4px;
+        border-right-width:  3px;
+        border-bottom-width: 2px;
+        border-left-width:   1px;
+        padding: 2px;
+      }
+      div.b {
+        width: 10px;
+        height: 50px;
+        background: pink;
+        padding: 1px 2px 3px 4px;
+        margin: 5px 4px 3px 2px;
+      }
+      div.c {
+        width: 10px;
+        height: 100px;
+        background: orange;
+        margin: 3px;
+        margin-top: 6px; /* Increased to counteract for collapsing */
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 180px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 118px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 8px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 59px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 4px"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div style="margin-top: 123px"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"
+           /><div style="margin-top: 9px"><div class="b"/></div
+            ><div style="margin-top: 10px"><div class="c"/></div>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 29.5px"
+           /><div style="margin-top: 64px"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: calc(8px / 6)"
+           /><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div
+            ><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a" style="margin-top: 90px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: calc(118px / 3)"
+           /><div style="margin-top: calc(5px + 118px / 3)"><div class="b"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-top: 2px"
+           /><div style="margin-top: 7px"><div class="b"/></div
+            ><div style="margin-top: 8px"><div class="c"/></div>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002.xhtml
new file mode 100644
index 000000000..21683a6cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002.xhtml
@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of flex containers testing each possible value of
+     the 'justify-content' property, with margin/border/padding on the
+     flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a vertical flex container, with margins/border/padding on flex items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-vert-002-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        height: 200px;
+        display: flex;
+        flex-direction: column;
+        margin-right: 2px;
+        float: left;
+        border: 1px dotted black;
+      }
+      div.a {
+        width: 10px;
+        flex: 0 10px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    4px;
+        border-right-width:  3px;
+        border-bottom-width: 2px;
+        border-left-width:   1px;
+        padding: 2px;
+      }
+      div.b {
+        width: 10px;
+        flex: 0 50px;
+        background: pink;
+        padding: 1px 2px 3px 4px;
+        margin: 5px 4px 3px 2px;
+      }
+      div.c {
+        width: 10px;
+        flex: 0 100px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003-ref.xhtml
new file mode 100644
index 000000000..a205a6bad
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003-ref.xhtml
@@ -0,0 +1,136 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      body { margin-top: 0px; } /* We'll apply margins w/ style attribute */
+      div.flexbox {
+        height: 200px;
+        margin-right: 2px;
+        float: left;
+      }
+      div.a {
+        width: 20px;
+        height: 35px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        height: 40px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        height: 45px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="margin-top: 95px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 55px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 10px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="margin-top: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="margin-top: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="margin-top: 97.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 77.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 55px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003.xhtml
new file mode 100644
index 000000000..dd32333e4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003.xhtml
@@ -0,0 +1,150 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of vertical flex containers testing each possible
+     value of the 'justify-content' property, and with each individual
+     flex item being larger than the flexbox itself (so that there isn't any
+     packing space available).
+
+       * For 'flex-start'/'space-between', we should overflow on the end
+         (bottom) side.
+       * For 'flex-end', we should overflow on the start (top) side.
+       * For 'center'/'space-around', we should overflow equally on both sides.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-vert-003-ref.xhtml"/>
+    <style>
+      body { margin-top: 100px; } /* So we can see top-overflowed stuff */
+      div.flexbox {
+        height: 30px;
+        display: flex;
+        flex-direction: column;
+        margin-right: 2px;
+        float: left;
+      }
+      div.a {
+        width: 20px;
+        flex: 0 0 35px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        flex: 0 0 40px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        flex: 0 0 45px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004-ref.xhtml
new file mode 100644
index 000000000..b3a45e06f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004-ref.xhtml
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      body { margin-top: 0px; } /* We'll apply margins w/ style attribute */
+      div.flexbox {
+        margin-right: 4px;
+        float: left;
+      }
+      div.a {
+        width: 10px;
+        height: 35px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    4px;
+        border-right-width:  3px;
+        border-bottom-width: 2px;
+        border-left-width:   1px;
+        padding: 2px;
+      }
+      div.b {
+        width: 10px;
+        height: 40px;
+        background: pink;
+        padding: 1px 2px 3px 4px;
+        margin: 5px 4px 3px 2px;
+      }
+      div.c {
+        width: 10px;
+        height: 45px;
+        background: orange;
+        margin: 3px;
+        margin-top: 6px; /* Increased to counteract for collapsing */
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="margin-top: 85px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 33px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: -22px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="margin-top: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="margin-top: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="margin-top: 92.5px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 66.5px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 39px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004.xhtml
new file mode 100644
index 000000000..770ba7ba4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004.xhtml
@@ -0,0 +1,161 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a series of vertical flex containers, testing each possible
+     value of the 'justify-content' property, and with each individual
+     flex item being larger than the flexbox itself (so that there isn't any
+     packing space available).  Also, we've got margin/border/padding on the
+     flex items.
+       * For 'flex-start'/'space-between', we should overflow on the end
+         (bottom) side.
+       * For 'flex-end', we should overflow on the start (top) side.
+       * For 'center'/'space-around', we should overflow equally on both sides.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in a vertical flex container, and its effects on flex items that overflow, with margins/border/padding on flex items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-vert-004-ref.xhtml"/>
+    <style>
+      body { margin-top: 100px; } /* So we can see top-overflowed stuff */
+      div.flexbox {
+        height: 30px;
+        display: flex;
+        flex-direction: column;
+        margin-right: 4px;
+        float: left;
+      }
+      div.a {
+        width: 10px;
+        flex: 0 0 35px;
+        background: lightgreen;
+        border-style: solid;
+        border-color:     purple;
+        border-top-width:    4px;
+        border-right-width:  3px;
+        border-bottom-width: 2px;
+        border-left-width:   1px;
+        padding: 2px;
+      }
+      div.b {
+        width: 10px;
+        flex: 0 0 40px;
+        background: pink;
+        padding: 1px 2px 3px 4px;
+        margin: 5px 4px 3px 2px;
+      }
+      div.c {
+        width: 10px;
+        flex: 0 0 45px;
+        background: orange;
+        margin: 3px;
+        border: 2px dashed teal;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005-ref.xhtml
new file mode 100644
index 000000000..ebc97819a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005-ref.xhtml
@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        margin-right: 2px;
+        float: left;
+        border: 1px dotted black;
+      }
+      div.a {
+        width: 20px;
+        height: 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        height: 50px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        height: 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005.xhtml
new file mode 100644
index 000000000..bb99dd09b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005.xhtml
@@ -0,0 +1,144 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase to exercise each possible value of the 'justify-content'
+     property, in an auto-sized vertical flex container.  The flex container
+     should shrink-wrap its contents' heights, leaving no packing space
+     available.  So, the "justify-content" values should have no effect
+     in this testcase. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing 'justify-content' in an auto-sized vertical flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"/>
+    <link rel="match" href="flexbox-justify-content-vert-005-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        display: flex;
+        flex-direction: column;
+        margin-right: 2px;
+        float: left;
+        border: 1px dotted black;
+      }
+      div.a {
+        width: 20px;
+        flex: 0 10px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        flex: 0 50px;
+        background: pink;
+      }
+      div.c {
+        width: 20px;
+        flex: 0 100px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+
+    <!-- default (start) -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"></div>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-start -->
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-start">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- flex-end -->
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: flex-end">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- center -->
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: center">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-between -->
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-between">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-around -->
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-around">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- space-evenly -->
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: space-evenly">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001-ref.xhtml
new file mode 100644
index 000000000..1321e5a38
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001-ref.xhtml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { height: 20px; }
+      div.flexbox {
+        width: 200px;
+        background: lightgray;
+        margin-bottom: 2px;
+      }
+      div.a {
+        width: 20px;
+        background: green;
+        display: inline-block;
+      }
+      div.b {
+        width: 20px;
+        background: pink;
+        display: inline-block;
+      }
+      div.c {
+        width: 20px;
+        background: purple;
+        display: inline-block;
+      }
+
+      <!-- These classes allow us to conveniently/concisely specify margin
+           values below, for exact positioning of the items on each reference
+           line. ("l" = "margin-_l_eft", and the number = number of pixels) -->
+      div.l180 { margin-left: 180px }
+      div.l90  { margin-left:  90px }
+      div.l80  { margin-left:  80px }
+      div.l70  { margin-left:  70px }
+      div.l53  { margin-left: calc(160px / 3) } <!-- == 53.33333px -->
+      div.l35  { margin-left:  35px }
+    </style>
+  </head>
+  <body>
+    <!-- just one item -->
+    <div class="flexbox">
+      <div class="a l180"/>
+    </div>
+    <div class="flexbox">
+      <div class="b l90"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/>
+    </div>
+
+    <!-- Two items -->
+    <div class="flexbox">
+      <div class="a l53"/><div class="b l53"/>
+    </div>
+    <div class="flexbox">
+      <div class="a l80"/><div class="c"/>
+    </div>
+    <div class="flexbox">
+      <div class="b l53"/><div class="c l53"/>
+    </div>
+
+    <!-- Three items -->
+    <div class="flexbox">
+      <div class="a l35"/><div class="b l35"/><div class="c l35"/>
+    </div>
+    <div class="flexbox">
+      <div class="a l35"/><div class="c"/><div class="b l70"/>
+    </div>
+    <div class="flexbox">
+      <div class="b l35"/><div class="a l70"/><div class="c"/>
+    </div>
+    <div class="flexbox">
+      <div class="b l35"/><div class="c l35"/><div class="a l70"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/><div class="a l70"/><div class="b l35"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/><div class="b l70"/><div class="a l70"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001.xhtml
new file mode 100644
index 000000000..76d7a8831
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-001.xhtml
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a variety of 'display: flex' examples
+     with margin-left and/or margin-right set to 'auto'. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing horizontal auto margins on flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/>
+    <link rel="match" href="flexbox-margin-auto-horiz-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        width: 200px;
+        height: 20px;
+        background: lightgray;
+        display: flex;
+        margin-bottom: 2px;
+      }
+      div.a {
+        width: 20px;
+        background: green;
+        margin-left: auto;
+      }
+      div.b {
+        width: 20px;
+        background: pink;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      div.c {
+        width: 20px;
+        background: purple;
+        margin-right: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- just one item -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/>
+    </div>
+
+    <!-- Two items -->
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="c"/>
+    </div>
+    <div class="flexbox">
+      <div class="b"/><div class="c"/>
+    </div>
+
+    <!-- Three items -->
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="c"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="b"/><div class="a"/><div class="c"/>
+    </div>
+    <div class="flexbox">
+      <div class="b"/><div class="c"/><div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/><div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="c"/><div class="b"/><div class="a"/>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002-ref.xhtml
new file mode 100644
index 000000000..b310ab97c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002-ref.xhtml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a variety of 'display: flex' examples
+     with margin-top and/or margin-bottom set to 'auto' on flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        border: 2px dotted black;
+        display: flex;
+        margin-bottom: 2px;
+        width: 100px;
+      }
+      div.fixedSize {
+        width:  20px;
+        height: 20px;
+      }
+      div.gray        { background: gray;  }
+      div.green       { background: green; }
+      div.pink        { background: pink;  }
+      div.blue        { background: blue;  }
+    </style>
+  </head>
+  <body>
+
+    <!-- fixed-height flexbox, with items that have auto margins -->
+    <div class="flexbox" style="height: 100px">
+      <div class="fixedSize green" style="margin-top: 80px"/>
+      <div class="fixedSize pink"/>
+      <div class="fixedSize blue"  style="margin-top: 40px"/>
+    </div>
+    <!-- fixed-height flexbox, with items that have auto & fixed margins -->
+    <div class="flexbox" style="height: 100px">
+      <div class="fixedSize green" style="margin-top: 70px"/>
+      <div class="fixedSize pink"  style="margin-top: 10px"/>
+    </div>
+
+    <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
+         with other items that have auto margins -->
+    <div class="flexbox" style="height: 50px">
+      <div class="fixedSize green" style="margin-top: 30px"/>
+      <div class="fixedSize pink"/>
+      <div class="fixedSize blue"  style="margin-top: 15px"/>
+      <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/>
+    </div>
+
+    <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
+         with other items that have auto & fixed margins -->
+    <div class="flexbox" style="height: 50px">
+      <div class="fixedSize green" style="margin-top: 20px"/>
+      <div class="fixedSize pink"  style="margin-top: 10px"/>
+      <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002.xhtml
new file mode 100644
index 000000000..a31bc7d6f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-margin-auto-horiz-002.xhtml
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with a variety of 'display: flex' examples
+     with margin-top and/or margin-bottom set to 'auto' on flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing vertical auto margins on flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#auto-margins"/>
+    <link rel="match" href="flexbox-margin-auto-horiz-002-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        border: 2px dotted black;
+        display: flex;
+        margin-bottom: 2px;
+        width: 100px;
+      }
+      div.fixedSize {
+        width:  20px;
+        height: 20px;
+      }
+      div.gray        { background: gray;  }
+      div.green       { background: green; }
+      div.pink        { background: pink;  }
+      div.blue        { background: blue;  }
+
+      div.autoTop     { margin-top:    auto; }
+      div.autoBottom  { margin-bottom: auto; }
+      div.fixedTop    { margin-top:    10px; }
+      div.fixedBottom { margin-bottom: 10px; }
+    </style>
+  </head>
+  <body>
+
+    <!-- fixed-height flexbox, with items that have auto margins -->
+    <div class="flexbox" style="height: 100px">
+      <div class="fixedSize green autoTop"/>
+      <div class="fixedSize pink  autoBottom"/>
+      <div class="fixedSize blue  autoTop autoBottom"/>
+    </div>
+    <!-- fixed-height flexbox, with items that have auto & fixed margins -->
+    <div class="flexbox" style="height: 100px">
+      <div class="fixedSize green autoTop fixedBottom"/>
+      <div class="fixedSize pink  autoBottom fixedTop"/>
+    </div>
+
+    <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
+         with other items that have auto margins -->
+    <div class="flexbox">
+      <div class="fixedSize green autoTop"/>
+      <div class="fixedSize pink autoBottom"/>
+      <div class="fixedSize blue autoTop autoBottom"/>
+      <div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/>
+    </div>
+
+    <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins,
+         with other items that have auto & fixed margins -->
+    <div class="flexbox">
+      <div class="fixedSize green autoTop fixedBottom"/>
+      <div class="fixedSize pink  autoBottom fixedTop"/>
+      <div class="fixedTop fixedBottom gray" style="width: 10px; height: 30px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-ref.xhtml
new file mode 100644
index 000000000..d30386618
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-ref.xhtml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+      }
+      div.a {
+        display: inline-block;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        display: inline-block;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        display: inline-block;
+        background: orange;
+      }
+      div.flexNone {
+        display: inline-block;
+        background: pink;
+      }
+      div.flexBasis {
+        display: inline-block;
+        background: gray;
+      }
+      div.spacer {
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="width: 74px"/><div class="b" style="width: 110px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 56.5px"/><div class="c" style="width: 137.5px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 179px"/><div class="flexNone">
+        <div class="spacer" style="width: 15px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 66px"/><div class="c" style="width: 124px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 160px"/><div class="flexNone">
+        <div class="spacer" style="width: 30px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 39px"/><div class="b" style="width: 40px"
+      /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse-ref.xhtml
new file mode 100644
index 000000000..ca4ef80ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse-ref.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+      }
+      div.a {
+        display: inline-block;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        display: inline-block;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        display: inline-block;
+        background: orange;
+      }
+      div.flexNone {
+        display: inline-block;
+        background: pink;
+      }
+      div.flexBasis {
+        display: inline-block;
+        background: gray;
+      }
+      div.spacer {
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="b" style="width: 110px"/><div class="a" style="width: 74px"/>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="width: 137.5px"/><div class="a" style="width: 56.5px"/>
+    </div>
+    <div class="flexbox">
+      <div class="flexNone"><div class="spacer" style="width: 15px"/>
+      </div><div class="a" style="width: 179px"/>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="width: 124px"
+      /><div class="b" style="width: 66px"/>
+    </div>
+    <div class="flexbox">
+      <div class="flexNone"><div class="spacer" style="width: 30px"/>
+      </div><div class="b" style="width: 160px"/>
+    </div>
+    <div class="flexbox">
+      <div class="c" style="width: 85px"
+      /><div class="flexBasis" style="width: 20px"
+      /><div class="b" style="width: 40px"
+      /><div class="a" style="width: 39px"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse.xhtml
new file mode 100644
index 000000000..11c723221
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-reverse.xhtml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with borders on flex items, and "flex-direction: row-reverse" to
+     reverse the flex container's main axis. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing borders on flex items in a row-reverse horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-001-reverse-ref.xhtml"/>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: flex;
+        flex-direction: row-reverse;
+      }
+      div.a {
+        flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml
new file mode 100644
index 000000000..51186205d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl-reverse.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with borders on flex items, and "direction: rtl" and
+     "flex-direction: row-reverse" to *doubly* reverse the flex container's
+     main axis. --> 
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing borders on flex items in a row-reverse horizontal flex container, with 'direction: rtl'</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-001-ref.xhtml"/>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: flex;
+        flex-direction: row-reverse;
+        direction: rtl;
+      }
+      div.a {
+        flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl.xhtml
new file mode 100644
index 000000000..00f5aa54f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001-rtl.xhtml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with borders on flex items, and "direction: rtl" to reverse
+     the flex container's main axis. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing borders on flex items in a horizontal flex container with 'direction: rtl'</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-001-reverse-ref.xhtml"/>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: flex;
+        direction: rtl;
+      }
+      div.a {
+        flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001.xhtml
new file mode 100644
index 000000000..31560f446
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-001.xhtml
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with borders on flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing borders on flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-001-ref.xhtml"/>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: flex;
+      }
+      div.a {
+        flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002-ref.xhtml
new file mode 100644
index 000000000..6203a40a0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002-ref.xhtml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+      }
+      div.a {
+        display: inline-block;
+        background: lightgreen;
+        margin-left: 1px;
+        margin-right: 3px;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        display: inline-block;
+        background: yellow;
+        margin-left: 2px;
+        margin-right: 4px;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        display: inline-block;
+        background: orange;
+      }
+      div.flexNone {
+        display: inline-block;
+        background: pink;
+      }
+      div.flexBasis {
+        display: inline-block;
+        background: gray;
+      }
+      div.spacer {
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="width: 70px"/><div class="b" style="width: 104px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 52.5px"/><div class="c" style="width: 137.5px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 175px"/><div class="flexNone">
+        <div class="spacer" style="width: 15px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 60px"/><div class="c" style="width: 124px"/>
+    </div>
+    <div class="flexbox">
+      <div class="b" style="width: 154px"/><div class="flexNone">
+        <div class="spacer" style="width: 30px"/></div>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="width: 35px"/><div class="b" style="width: 34px"
+      /><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002a.xhtml
new file mode 100644
index 000000000..b47b7aa55
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002a.xhtml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with margin/border on flex items. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing margins and borders on flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: flex;
+      }
+      div.a {
+        flex: 1 0 20px;
+        background: lightgreen;
+        margin-left: 1px;
+        margin-right: 3px;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.b {
+        flex: 2 0 4px;
+        background: yellow;
+        margin-left: 2px;
+        margin-right: 4px;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002b.xhtml
new file mode 100644
index 000000000..b8a861655
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002b.xhtml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with margin/border/padding on flex items. (NOTE: This renders
+     the same as the "-2a" variant, which lacks padding, because we've
+     just replaced some of the "-2a" variant's content-box area with
+     padding-box area in this test.) -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/>
+    <style>
+      div { height: 100px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        font-size: 10px;
+        display: flex;
+      }
+      div.a {
+        flex: 1 0 9px;
+        background: lightgreen;
+        margin-left: 1px;
+        margin-right: 3px;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+        padding-left: 5px;
+        padding-right: 6px;
+      }
+      div.b {
+        flex: 2 0 1px;
+        background: yellow;
+        margin-left: 2px;
+        margin-right: 4px;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+        padding-left: 1px;
+        padding-right: 2px;
+      }
+      div.c {
+        flex: 3 0 40px;
+        background: orange;
+      }
+      div.flexNone {
+        flex: none;
+        background: pink;
+      }
+      div.flexBasis {
+        flex: 0 0 20px;
+        background: gray;
+      }
+      div.spacer {
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        background: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"></div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div class="c"/></div>
+    <div class="flexbox"><div class="a"/>
+      <div class="flexNone"><div class="spacer"/></div>
+    </div>
+    <div class="flexbox"><div class="b"/><div class="c"/></div>
+    <div class="flexbox"><div class="b"/>
+      <div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-ref.xhtml
new file mode 100644
index 000000000..a91d72b9f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-ref.xhtml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { height: 20px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        margin-bottom: 2px;
+      }
+
+      <!-- customizations for flexbox border/padding -->
+      .borderA {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 6px;
+        border-right-width: 4px;
+        border-bottom-width: 2px;
+        border-left-width: 8px;
+      }
+
+      .borderB {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 4px;
+        border-right-width: 5px;
+        border-bottom-width: 6px;
+        border-left-width: 7px;
+      }
+
+      .paddingA {
+        padding: 4px 3px 2px 1px;
+      }
+
+      .paddingB {
+        padding: 8px 11px 14px 17px;
+      }
+
+      div.child1 {
+        display: inline-block;
+        width: 74px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.child2 {
+        display: inline-block;
+        width: 110px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox borderA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse-ref.xhtml
new file mode 100644
index 000000000..7929c8907
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse-ref.xhtml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { height: 20px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        margin-bottom: 2px;
+      }
+
+      <!-- customizations for flexbox border/padding -->
+      .borderA {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 6px;
+        border-right-width: 4px;
+        border-bottom-width: 2px;
+        border-left-width: 8px;
+      }
+
+      .borderB {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 4px;
+        border-right-width: 5px;
+        border-bottom-width: 6px;
+        border-left-width: 7px;
+      }
+
+      .paddingA {
+        padding: 4px 3px 2px 1px;
+      }
+
+      .paddingB {
+        padding: 8px 11px 14px 17px;
+      }
+
+      div.child1 {
+        display: inline-block;
+        width: 74px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.child2 {
+        display: inline-block;
+        width: 110px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox borderA"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox borderA paddingA"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox borderA paddingB"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox borderB"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox borderB paddingA"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox borderB paddingB"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox paddingA"
+         ><div class="child2"/><div class="child1"/></div>
+    <div class="flexbox paddingB"
+         ><div class="child2"/><div class="child1"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse.xhtml
new file mode 100644
index 000000000..cbe4c58b4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003-reverse.xhtml
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with border/padding on a row-reverse flex container and on its children -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing borders and padding on a row-reverse horizontal flex container and its flex items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-003-reverse-ref.xhtml"/>
+    <style>
+      div { height: 20px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        display: flex;
+        flex-direction: row-reverse;
+        margin-bottom: 2px;
+      }
+
+      <!-- customizations for flex container border/padding -->
+      .borderA {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 6px;
+        border-right-width: 4px;
+        border-bottom-width: 2px;
+        border-left-width: 8px;
+      }
+
+      .borderB {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 4px;
+        border-right-width: 5px;
+        border-bottom-width: 6px;
+        border-left-width: 7px;
+      }
+
+      .paddingA {
+        padding: 4px 3px 2px 1px;
+      }
+
+      .paddingB {
+        padding: 8px 11px 14px 17px;
+      }
+
+      div.child1 {
+        flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.child2 {
+        flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox borderA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003.xhtml
new file mode 100644
index 000000000..f0dc49b5a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003.xhtml
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with border/padding on a flex container and on its children -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing borders and padding on a horizontal flex container and its flex items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/>
+    <style>
+      div { height: 20px; border: 0; }
+      div.flexbox {
+        width: 200px;
+        display: flex;
+        margin-bottom: 2px;
+      }
+
+      <!-- customizations for flex container border/padding -->
+      .borderA {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 6px;
+        border-right-width: 4px;
+        border-bottom-width: 2px;
+        border-left-width: 8px;
+      }
+
+      .borderB {
+        border-style: dashed;
+        border-color: purple;
+        border-top-width: 4px;
+        border-right-width: 5px;
+        border-bottom-width: 6px;
+        border-left-width: 7px;
+      }
+
+      .paddingA {
+        padding: 4px 3px 2px 1px;
+      }
+
+      .paddingB {
+        padding: 8px 11px 14px 17px;
+      }
+
+      div.child1 {
+        flex: 1 0 24px;
+        background: lightgreen;
+        border-style: dotted;
+        border-left-width: 2px;
+        border-right-width: 4px;
+      }
+      div.child2 {
+        flex: 2 0 10px;
+        background: yellow;
+        border-style: dashed;
+        border-left-width: 7px;
+        border-right-width: 3px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox borderA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderA paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox borderB paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingA"
+         ><div class="child1"/><div class="child2"/></div>
+    <div class="flexbox paddingB"
+         ><div class="child1"/><div class="child2"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004-ref.xhtml
new file mode 100644
index 000000000..00db4823e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004-ref.xhtml
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case - identical to the testcase, but with with the flex items'
+     vertical margin and padding values set to 0 by default, and then set to
+     specific pixel values for the items that have a 50px percent-basis.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { border: 0; }
+      div.flexbox {
+        width: 200px;
+        display: flex;
+        margin-bottom: 2px;
+        border: 1px dotted black;
+      }
+      div.height50 { height: 50px; }
+
+      .marginA  { margin:  0  8% 0  4%; }
+      .marginB  { margin:  0 10% 0 14%; }
+      .paddingA { padding: 0  6% 0  2%; }
+      .paddingB { padding: 0  8% 0 12%; }
+
+      div.height50 > .marginA {
+        margin-top: 5px;
+        margin-bottom: 3px;
+      }
+      div.height50 > .marginB {
+        margin-top: 4px;
+        margin-bottom: 6px;
+      }
+      div.height50 > .paddingA {
+        padding-top: 4px;
+        padding-bottom: 2px;
+      }
+      div.height50 > .paddingB {
+        padding-top: 3px;
+        padding-bottom: 5px;
+      }
+
+      div.child1 {
+        flex: none;
+        width: 10px;
+        height: 10px;
+        background: lightgreen;
+      }
+      div.child2 {
+        flex: none;
+        width: 10px;
+        height: 10px;
+        background: purple;
+      }
+
+      div.filler {
+        /* Filler-div to fill up content-box and make padding easier to see. */
+        height: 10px;
+        width: 100%;
+        background: lightgrey;
+      }
+
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <div class="flexbox height50"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <div class="flexbox height50" style="align-items: flex-end"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <div class="flexbox height50"
+         ><div class="child1 paddingA marginA"><div class="filler"/></div
+         ><div class="child2 paddingB marginB"><div class="filler"/></div
+    ></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004.xhtml
new file mode 100644
index 000000000..545e54f71
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-004.xhtml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with percent-valued padding and/or margin on flex items. The spec
+     says that percentage values on padding/margin-top and -bottom should be
+     resolved against the flex container's height (not its width, as would
+     be the case in a block).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing percent-valued padding and margin on flex items</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-mbp-horiz-004-ref.xhtml"/>
+    <style>
+      div { border: 0; }
+      div.flexbox {
+        width: 200px;
+        display: flex;
+        margin-bottom: 2px;
+        border: 1px dotted black;
+      }
+      div.height50 { height: 50px; }
+
+      .marginA  { margin: 10%  8%  6%  4%; }
+      .marginB  { margin:  8% 10% 12% 14%; }
+      .paddingA { padding: 8%  6%  4%  2%; }
+      .paddingB { padding: 6%  8% 10% 12%; }
+
+      div.child1 {
+        flex: none;
+        width: 10px;
+        height: 10px;
+        background: lightgreen;
+      }
+      div.child2 {
+        flex: none;
+        width: 10px;
+        height: 10px;
+        background: purple;
+      }
+
+      div.filler {
+        /* Filler-div to fill up content-box and make padding easier to see. */
+        height: 10px;
+        width: 100%;
+        background: lightgrey;
+      }
+
+    </style>
+  </head>
+  <body>
+    <!-- Flex container is auto-height - vertical margin and padding should
+         resolve to 0, since they don't have anything to resolve % against. -->
+    <div class="flexbox"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <!-- Flex container has height: 50px - vertical margin and padding should
+         resolve % values against that. -->
+    <div class="flexbox height50"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <!-- ...and now with align-items: flex-end, so we can see the margin-bottom
+         in action -->
+    <div class="flexbox height50" style="align-items: flex-end"
+         ><div class="child1 paddingA"><div class="filler"/></div
+         ><div class="child2 paddingB"><div class="filler"/></div
+         ><div class="child1 marginA"></div
+         ><div class="child2 marginB"></div
+    ></div>
+
+    <!-- ...and finally, with margin and padding applied to the same items -->
+    <div class="flexbox height50"
+         ><div class="child1 paddingA marginA"><div class="filler"/></div
+         ><div class="child2 paddingB marginB"><div class="filler"/></div
+    ></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-001-ref.html
new file mode 100644
index 000000000..146a6ad6b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-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>
+      .item {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        margin-right: 2px; /* (Just for spacing things out, visually) */
+        float: left;
+      }
+
+      .small { height: 50px; }
+      .big   { height: 80px; }
+
+      .item > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        width: 10px;
+        height: 80px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+
+    <div class="item big"><div></div></div>
+    <div class="item big"><div></div></div>
+    <div class="item big"><div></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-001.html
new file mode 100644
index 000000000..f69ed9561
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-height:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-height-auto-001-ref.html">
+<!--
+     This testcase tests the used value of "min-height:auto" (the property's
+     initial value) on flex items in a vertical flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-height' property
+      c) If there's no intrinsic aspect ratio: the item's min-content height.
+      d) If there is an intrinsic aspect ratio: the item's height derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-height.
+
+    This test checks for situations where we should resolve the min-height as
+    (a), (b), or (c) above. Another test will check (d).
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        height: 1px;  /* No available space; shrink flex items to min-height */
+        margin-right: 2px; /* (Just for spacing things out, visually) */
+        float: left;
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+      }
+
+      .flexbox > * > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        width: 10px;
+        height: 80px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-height:auto resolving correctly when the smallest
+         candidate value is: -->
+    <!-- *** (a) Used 'flex-basis' (from 'height') *** -->
+    <!-- First, without definite max-height: -->
+    <div class="flexbox">
+      <div style="height: 50px"><div></div></div>
+    </div>
+    <!-- ...and now with definite (& large) 'max-height': -->
+    <div class="flexbox">
+      <div style="height: 50px; max-height: 120px;"><div></div></div>
+    </div>
+    <!-- ...and now with used 'flex-basis' being a calc expression:-->
+    <div class="flexbox">
+      <div style="height: calc(10% + 50px)"><div></div></div>
+    </div>
+
+    <!-- *** (b) The computed 'max-height' *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'height') -->
+    <div class="flexbox">
+      <div style="height: 100px; max-height:50px"><div></div></div>
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-height:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 100px; max-height:50px"><div></div></div>
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-height:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 10px; max-height:50px"><div></div></div>
+    </div>
+
+    <!-- *** (c) (no intrinsic aspect ratio) The min-content size *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'height') -->
+    <div class="flexbox">
+      <div style="height: 100px"><div></div></div>
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-height:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 100px"><div></div></div>
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-height:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 10px"><div></div></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002-ref.html
new file mode 100644
index 000000000..ca1aad42a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002-ref.html
@@ -0,0 +1,26 @@
+<!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>
+      img {
+        width: 30px;
+        height: 30px;
+        float: left;
+        border: 2px dotted purple;
+        margin-right: 2px; /* (Just for spacing things out, visually) */
+      }
+    </style>
+  </head>
+  <body>
+    <img src="support/solidblue.png" alt="blue square">
+    <img src="support/solidblue.png" alt="blue square">
+    <img src="support/solidblue.png" alt="blue square">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002a.html
new file mode 100644
index 000000000..0fd9207fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002a.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-height:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-height-auto-002-ref.html">
+<!--
+     This testcase tests the used value of "min-height:auto" (the property's
+     initial value) on flex items in a vertical flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-height' property
+      c) If there's no intrinsic aspect ratio: the item's min-content height.
+      d) If there is an intrinsic aspect ratio: the item's height derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-height.
+
+    This test checks for situations where we should resolve the min-height as
+    (d) above, with "constraints in the other dimension" being "width".
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        height: 1px;  /* No available space; shrink flex items to min-height */
+        margin-right: 2px; /* (Just for spacing things out, visually) */
+        float: left;
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        /* Flex items have sizing constraint in cross axis: */
+        width: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-height:auto resolving correctly when the smallest
+         candidate value is: -->
+
+    <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio
+                 and constraints in the other dimension *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'height') -->
+    <div class="flexbox">
+      <img style="height: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-height:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-height:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002b.html
new file mode 100644
index 000000000..e8c94f766
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002b.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-height:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-height-auto-002-ref.html">
+<!--
+     This testcase tests the used value of "min-height:auto" (the property's
+     initial value) on flex items in a vertical flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-height' property
+      c) If there's no intrinsic aspect ratio: the item's min-content height.
+      d) If there is an intrinsic aspect ratio: the item's height derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-height.
+
+    This test checks for situations where we should resolve the min-height as
+    (d) above, with "constraints in the other dimension" being "min-width".
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        height: 1px;  /* No available space; shrink flex items to min-height */
+        margin-right: 2px; /* (Just for spacing things out, visually) */
+        float: left;
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        /* Flex items have sizing constraint in cross axis: */
+        min-width: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-height:auto resolving correctly when the smallest
+         candidate value is: -->
+
+    <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio
+                 and constraints in the other dimension *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'height') -->
+    <div class="flexbox">
+      <img style="height: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-height:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-height:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002c.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002c.html
new file mode 100644
index 000000000..3093c65e5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-002c.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-height:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-height-auto-002-ref.html">
+<!--
+     This testcase tests the used value of "min-height:auto" (the property's
+     initial value) on flex items in a vertical flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'height'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-height' property
+      c) If there's no intrinsic aspect ratio: the item's min-content height.
+      d) If there is an intrinsic aspect ratio: the item's height derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-height.
+
+    This test checks for situations where we should resolve the min-height as
+    (d) above, with "constraints in the other dimension" being
+    max-width-clamped "width".
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        height: 1px;  /* No available space; shrink flex items to min-height */
+        margin-right: 2px; /* (Just for spacing things out, visually) */
+        float: left;
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        /* Flex items have sizing constraint in cross axis: */
+        max-width: 30px;
+        width: 60px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-height:auto resolving correctly when the smallest
+         candidate value is: -->
+
+    <!-- *** (d) (with intrinsic aspect ratio) The height derived from ratio
+                 and constraints in the other dimension *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'height') -->
+    <div class="flexbox">
+      <img style="height: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-height:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-height:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003-ref.html
new file mode 100644
index 000000000..ff1ced0c0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003-ref.html
@@ -0,0 +1,41 @@
+<!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>
+      .item {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        margin-right: 2px; /* (Just for spacing things out, visually) */
+        float: left;
+      }
+
+      .small { height: 26px; }
+      .big   { height: 80px; }
+
+      .item > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        width: 40px;
+        height: 80px;
+      }
+
+      .yvisible { overflow-y: visible; }
+      .yhidden  { overflow-y: hidden;  }
+      .yscroll  { overflow-y: scroll;  }
+      .yauto    { overflow-y: auto;    }
+    </style>
+  </head>
+  <body>
+    <div class="item big   yvisible"><div></div></div>
+    <div class="item small yhidden"><div></div></div>
+    <div class="item small yscroll"><div></div></div>
+    <div class="item small yauto"><div></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003.html
new file mode 100644
index 000000000..15ef35d9c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-003.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-height:auto & 'overflow' interaction</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-height-auto-003-ref.html">
+<!--
+     This testcase checks how "overflow-y" impacts the sizing behavior of flex
+     items with "min-height:auto" (the new initial value for "min-height").
+
+     In particular, the flex-item-specific "min-height:auto" behavior is
+     supposed to be disabled (e.g. we end up with min-height:0) when
+     "overflow-y" is non-"visible".
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        height: 30px;  /* Shrink flex items below min-height */
+        margin-right: 2px; /* (Just for spacing things out, visually) */
+        float: left;
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+      }
+
+      .flexbox > * > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        width: 40px;
+        height: 80px;
+      }
+
+      .yvisible { overflow-y: visible; }
+      .yhidden  { overflow-y: hidden;  }
+      .yscroll  { overflow-y: scroll;  }
+      .yauto    { overflow-y: auto;    }
+    </style>
+  </head>
+  <body>
+    <!-- min-height:auto should prevent shrinking below intrinsic height when
+         the flex item has "overflow-y: visible", but not for any other
+         overflow-y values. -->
+    <div class="flexbox"><div class="yvisible"><div></div></div></div>
+    <div class="flexbox"><div class="yhidden"><div></div></div></div>
+    <div class="flexbox"><div class="yscroll"><div></div></div></div>
+    <div class="flexbox"><div class="yauto"><div></div></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004-ref.html
new file mode 100644
index 000000000..768185d43
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004-ref.html
@@ -0,0 +1,41 @@
+<!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>
+      .item {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        margin-right: 2px; /* (Just for spacing things out, visually) */
+        float: left;
+      }
+
+      .small { height: 26px; }
+      .big   { height: 80px; }
+
+      .item > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        width: 40px;
+        height: 80px;
+      }
+
+      .xvisible { overflow-x: visible; }
+      .xhidden  { overflow-x: hidden;  }
+      .xscroll  { overflow-x: scroll;  }
+      .xauto    { overflow-x: auto;    }
+    </style>
+  </head>
+  <body>
+    <div class="item big   xvisible"><div></div></div>
+    <div class="item small xhidden"><div></div></div>
+    <div class="item small xscroll"><div></div></div>
+    <div class="item small xauto"><div></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004.html
new file mode 100644
index 000000000..a04b9b573
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-height-auto-004.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-height:auto & 'overflow' interaction</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-height-auto-004-ref.html">
+<!--
+     This testcase checks how "overflow-x" indirectly impacts the sizing
+     behavior of flex items with "min-height:auto" (the new initial value
+     for "min-height"), via its influence on "overflow-y".
+
+     In particular, the flex-item-specific "min-height:auto" behavior is
+     supposed to be disabled (e.g. we end up with min-height:0) when
+     "overflow-y" is non-"visible".  Moreover, when "overflow-x" is set to a
+     scrolling value, it forces "overflow-y" to compute to a scrolling value
+     as well, as described at
+       http://www.w3.org/TR/css-overflow-3/#overflow-properties
+     So, "overflow-x" has an indirect effect (via "overflow-y") here.
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        flex-direction: column;
+        height: 30px;  /* Shrink flex items below min-height */
+        margin-right: 2px; /* (Just for spacing things out, visually) */
+        float: left;
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+      }
+
+      .flexbox > * > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        width: 40px;
+        height: 80px;
+      }
+
+      .xvisible { overflow-x: visible; }
+      .xhidden  { overflow-x: hidden;  }
+      .xscroll  { overflow-x: scroll;  }
+      .xauto    { overflow-x: auto;    }
+    </style>
+  </head>
+  <body>
+    <!-- min-height:auto should prevent shrinking below intrinsic height when
+         the flex item has "overflow-x: visible", but not for any other
+         overflow-x values (because of overflow-x's influence on overflow-y).
+    -->
+    <div class="flexbox"><div class="xvisible"><div></div></div></div>
+    <div class="flexbox"><div class="xhidden"><div></div></div></div>
+    <div class="flexbox"><div class="xscroll"><div></div></div></div>
+    <div class="flexbox"><div class="xauto"><div></div></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001-ref.html
new file mode 100644
index 000000000..946db39cf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001-ref.html
@@ -0,0 +1,41 @@
+<!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>
+      .item {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .small { width: 50px; }
+      .big   { width: 80px; }
+
+      .item > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        height: 10px;
+        width: 80px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+    <div class="item small"><div></div></div>
+
+    <div class="item big"><div></div></div>
+    <div class="item big"><div></div></div>
+    <div class="item big"><div></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001.html
new file mode 100644
index 000000000..cb347abea
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-001.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-width:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-width-auto-001-ref.html">
+<!--
+     This testcase tests the used value of "min-width:auto" (the property's
+     initial value) on flex items in a horizontal flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-width' property
+      c) If there's no intrinsic aspect ratio: the item's min-content width.
+      d) If there is an intrinsic aspect ratio: the item's width derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-width.
+
+    This test checks for situations where we should resolve the min-width as
+    (a), (b), or (c) above. Another test will check (d).
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        width: 1px;  /* No available space; shrink flex items to min-width */
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+      }
+
+      .flexbox > * > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        height: 10px;
+        width: 80px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-width:auto resolving correctly when the smallest
+         candidate value is: -->
+    <!-- *** (a) Used 'flex-basis' (from 'width') *** -->
+    <!-- First, without definite max-width: -->
+    <div class="flexbox">
+      <div style="width: 50px"><div></div></div>
+    </div>
+    <!-- ...and now with definite (& large) 'max-width': -->
+    <div class="flexbox">
+      <div style="width: 50px; max-width: 120px;"><div></div></div>
+    </div>
+    <!-- ...and now with used 'flex-basis' being a calc expression:-->
+    <div class="flexbox">
+      <div style="width: calc(10% + 50px)"><div></div></div>
+    </div>
+
+    <!-- *** (b) The computed 'max-width' *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
+    <div class="flexbox">
+      <div style="width: 100px; max-width:50px"><div></div></div>
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 100px; max-width:50px"><div></div></div>
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 10px; max-width:50px"><div></div></div>
+    </div>
+
+    <!-- *** (c) (no intrinsic aspect ratio) The min-content size *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
+    <div class="flexbox">
+      <div style="width: 100px"><div></div></div>
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 100px"><div></div></div>
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <div style="flex-basis: 10px"><div></div></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002-ref.html
new file mode 100644
index 000000000..21beb3f93
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002-ref.html
@@ -0,0 +1,26 @@
+<!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>
+      img {
+        width: 30px;
+        height: 30px;
+        display: block;
+        border: 2px dotted purple;
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+    </style>
+  </head>
+  <body>
+    <img src="support/solidblue.png" alt="blue square">
+    <img src="support/solidblue.png" alt="blue square">
+    <img src="support/solidblue.png" alt="blue square">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002a.html
new file mode 100644
index 000000000..fe60255c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002a.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-width:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-width-auto-002-ref.html">
+<!--
+     This testcase tests the used value of "min-width:auto" (the property's
+     initial value) on flex items in a horizontal flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-width' property
+      c) If there's no intrinsic aspect ratio: the item's min-content width.
+      d) If there is an intrinsic aspect ratio: the item's width derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-width.
+
+    This test checks for situations where we should resolve the min-width as
+    (d) above, with "constraints in the other dimension" being "height".
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        width: 0px;  /* No available space; shrink flex items to min-width */
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        /* Flex items have sizing constraint in cross axis: */
+        height: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-width:auto resolving correctly when the smallest
+         candidate value is: -->
+
+    <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio
+                 and constraints in the other dimension *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
+    <div class="flexbox">
+      <img style="width: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002b.html
new file mode 100644
index 000000000..a56b214dc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002b.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-width:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-width-auto-002-ref.html">
+<!--
+     This testcase tests the used value of "min-width:auto" (the property's
+     initial value) on flex items in a horizontal flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-width' property
+      c) If there's no intrinsic aspect ratio: the item's min-content width.
+      d) If there is an intrinsic aspect ratio: the item's width derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-width.
+
+    This test checks for situations where we should resolve the min-width as
+    (d) above, with "constraints in the other dimension" being "min-height".
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        width: 0px;  /* No available space; shrink flex items to min-width */
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        /* Flex items have sizing constraint in cross axis: */
+        min-height: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-width:auto resolving correctly when the smallest
+         candidate value is: -->
+
+    <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio
+                 and constraints in the other dimension *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
+    <div class="flexbox">
+      <img style="width: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002c.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002c.html
new file mode 100644
index 000000000..95b98e5b5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-002c.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-width:auto</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-width-auto-002-ref.html">
+<!--
+     This testcase tests the used value of "min-width:auto" (the property's
+     initial value) on flex items in a horizontal flex container.
+
+     It's supposed to resolve to the smallest of:
+      a) The used 'flex-basis' (taken from 'width'), if 'flex-basis' is at its
+         initial value.
+      b) The computed 'max-width' property
+      c) If there's no intrinsic aspect ratio: the item's min-content width.
+      d) If there is an intrinsic aspect ratio: the item's width derived from
+         the ratio & constraints in the other dimension.
+
+    We measure what the used value is by putting flex items in a small flex
+    container, which will shrink its items down to their min-width.
+
+    This test checks for situations where we should resolve the min-width as
+    (d) above, with "constraints in the other dimension" being
+    max-height-clamped "height".
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        width: 0px;  /* No available space; shrink flex items to min-width */
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        /* Flex items have sizing constraint in cross axis: */
+        max-height: 30px;
+        height: 60px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Check for min-width:auto resolving correctly when the smallest
+         candidate value is: -->
+
+    <!-- *** (d) (with intrinsic aspect ratio) The width derived from ratio
+                 and constraints in the other dimension *** -->
+    <!-- First, with a larger candidate 'flex-basis' value (from 'width') -->
+    <div class="flexbox">
+      <img style="width: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a larger explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 100px" src="support/solidblue.png" alt="blue square">
+    </div>
+    <!-- ...and now with a smaller explicit 'flex-basis' value (which shouldn't
+         be considered for 'min-width:auto' anyway) -->
+    <div class="flexbox">
+      <img style="flex-basis: 10px" src="support/solidblue.png" alt="blue square">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003-ref.html
new file mode 100644
index 000000000..09066eef7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003-ref.html
@@ -0,0 +1,40 @@
+<!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>
+      .item {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .small { width: 26px; }
+      .big   { width: 80px; }
+
+      .item > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        height: 40px;
+        width: 80px;
+      }
+
+      .xvisible { overflow-x: visible; }
+      .xhidden  { overflow-x: hidden;  }
+      .xscroll  { overflow-x: scroll;  }
+      .xauto    { overflow-x: auto;    }
+    </style>
+  </head>
+  <body>
+    <div class="item big   xvisible"><div></div></div>
+    <div class="item small xhidden"><div></div></div>
+    <div class="item small xscroll"><div></div></div>
+    <div class="item small xauto"><div></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003.html
new file mode 100644
index 000000000..ecc7ab717
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-width:auto & 'overflow' interaction</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-width-auto-003-ref.html">
+<!--
+     This testcase checks how "overflow-x" impacts the sizing behavior of flex
+     items with "min-width:auto" (the new initial value for "min-width").
+
+     In particular, the flex-item-specific "min-width:auto" behavior is
+     supposed to be disabled (e.g. we end up with min-width:0) when
+     "overflow-x" is non-"visible".
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        width: 30px;  /* Shrink flex items below min-width */
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+      }
+
+      .flexbox > * > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        height: 40px;
+        width: 80px;
+      }
+
+      .xvisible { overflow-x: visible; }
+      .xhidden  { overflow-x: hidden;  }
+      .xscroll  { overflow-x: scroll;  }
+      .xauto    { overflow-x: auto;    }
+    </style>
+  </head>
+  <body>
+    <!-- min-width:auto should prevent shrinking below intrinsic width when
+         the flex item has "overflow-x: visible", but not for any other
+         overflow-x values. -->
+    <div class="flexbox"><div class="xvisible"><div></div></div></div>
+    <div class="flexbox"><div class="xhidden"><div></div></div></div>
+    <div class="flexbox"><div class="xscroll"><div></div></div></div>
+    <div class="flexbox"><div class="xauto"><div></div></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004-ref.html
new file mode 100644
index 000000000..64501367a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004-ref.html
@@ -0,0 +1,40 @@
+<!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>
+      .item {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .small { width: 26px; }
+      .big   { width: 80px; }
+
+      .item > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        height: 40px;
+        width: 80px;
+      }
+
+      .yvisible { overflow-y: visible; }
+      .yhidden  { overflow-y: hidden;  }
+      .yscroll  { overflow-y: scroll;  }
+      .yauto    { overflow-y: auto;    }
+    </style>
+  </head>
+  <body>
+    <div class="item big   yvisible"><div></div></div>
+    <div class="item small yhidden"><div></div></div>
+    <div class="item small yscroll"><div></div></div>
+    <div class="item small yauto"><div></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004.html
new file mode 100644
index 000000000..a090f2154
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-min-width-auto-004.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: Testing min-width:auto & 'overflow' interaction</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#min-size-auto">
+    <link rel="match" href="flexbox-min-width-auto-004-ref.html">
+<!--
+     This testcase checks how "overflow-y" indirectly impacts the sizing
+     behavior of flex items with "min-width:auto" (the new initial value
+     for "min-width"), via its influence on "overflow-x".
+
+     In particular, the flex-item-specific "min-width:auto" behavior is
+     supposed to be disabled (e.g. we end up with min-width:0) when
+     "overflow-x" is non-"visible".  Moreover, when "overflow-y" is set to a
+     scrolling value, it forces "overflow-x" to compute to a scrolling value
+     as well, as described at
+       http://www.w3.org/TR/css-overflow-3/#overflow-properties
+     So, "overflow-y" has an indirect effect (via "overflow-x") here.
+-->
+    <style>
+      .flexbox {
+        display: flex;
+        width: 30px;  /* Shrink flex items below min-width */
+        margin-bottom: 2px; /* (Just for spacing things out, visually) */
+      }
+
+      .flexbox > * {
+        /* Flex items have purple border: */
+        border: 2px dotted purple;
+      }
+
+      .flexbox > * > * {
+        /* Flex items' contents are gray & fixed-size: */
+        background: gray;
+        height: 40px;
+        width: 80px;
+      }
+
+      .yvisible { overflow-y: visible; }
+      .yhidden  { overflow-y: hidden;  }
+      .yscroll  { overflow-y: scroll;  }
+      .yauto    { overflow-y: auto;    }
+    </style>
+  </head>
+  <body>
+    <!-- min-width:auto should prevent shrinking below intrinsic width when
+         the flex item has "overflow-y: visible", but not for any other
+         overflow-y values (because of overflow-y's influence on overflow-x).
+    -->
+    <div class="flexbox"><div class="yvisible"><div></div></div></div>
+    <div class="flexbox"><div class="yhidden"><div></div></div></div>
+    <div class="flexbox"><div class="yscroll"><div></div></div></div>
+    <div class="flexbox"><div class="yauto"><div></div></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001-ref.html
new file mode 100644
index 000000000..82af03233
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .flexContainer {
+      background: purple;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      display: inline-block;
+      height: 200px;
+      width: 75%;
+      float: left;
+    }
+    .smallItem {
+      background: teal;
+      width: 25%;
+      /* In the testcase, we'll stretch to container's height,
+         minus our 10px margin-bottom. */
+      height: calc(100% - 10px);
+      float: left;
+    }
+    .scroll { overflow: scroll }
+    .auto   { overflow: auto   }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer scroll">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer auto">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001.html
new file mode 100644
index 000000000..afc08d8c4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we correctly handle the "overflow" property on
+     a horizontal flex container. -->
+<html>
+<head>
+  <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with contents not overflowing</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
+  <link rel="match" href="flexbox-overflow-horiz-001-ref.html">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      height: 200px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      margin-bottom: 10px;
+      flex: 1;
+    }
+    .scroll { overflow: scroll }
+    .auto   { overflow: auto   }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer scroll">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer auto">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002-ref.html
new file mode 100644
index 000000000..16cc9f4fa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      align-items: center;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      height: 10px;
+      /* Tall border (taller than our container): */
+      border: solid coral;
+      border-width: 50px 2px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      height: 20px;
+      flex: 1;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller border that exactly fits our container (and
+         doesn't overflow). */
+      border-width: 30px 2px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002.html
new file mode 100644
index 000000000..545ebb12e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-002.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "align-items" on a horizontal
+     flex container that has "overflow: hidden".  We use a huge border on
+     one of the flex items, large enough that it overflows the container,
+     to be sure that "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-items: center'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
+  <link rel="match" href="flexbox-overflow-horiz-002-ref.html">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      align-items: center;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      height: 10px;
+      /* Tall border (taller than our container): */
+      border: solid coral;
+      border-width: 50px 2px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      height: 20px;
+      flex: 1;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003-ref.html
new file mode 100644
index 000000000..5693c9328
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      justify-content: space-around;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 20px;
+      height: 200px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller height that exactly fits our container (and
+         doesn't overflow). */
+      height: 70px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003.html
new file mode 100644
index 000000000..66cbe7662
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "justify-content" on a horizontal
+     flex container that has "overflow:hidden".  We use a large flex item,
+     large enough that it overflows the container, to be sure that
+     "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'justify-content: space-around'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
+  <link rel="match" href="flexbox-overflow-horiz-003-ref.html">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      justify-content: space-around;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 20px;
+      height: 200px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004-ref.html
new file mode 100644
index 000000000..f9ae88ce4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-wrap: wrap;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 50px;
+      height: 200px;
+    }
+    .smallItem {
+      background: teal;
+      width: 50px;
+      height: 20px;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller height that exactly fits the space remaining
+         in our container, after wrapping */
+      height: 50px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="smallItem"></div>
+    <div class="bigItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="smallItem"></div>
+    <div class="bigItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004.html
new file mode 100644
index 000000000..ca7471f1d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "flex-wrap" on a horizontal
+     flex container that has "overflow:hidden".  We use a large flex item,
+     large enough that it overflows the container in the cross axis, to be
+     sure that "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'flex-wrap: wrap'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
+  <link rel="match" href="flexbox-overflow-horiz-004-ref.html">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-wrap: wrap;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 50px;
+      height: 200px;
+    }
+    .smallItem {
+      background: teal;
+      width: 50px;
+      height: 20px;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="smallItem"></div>
+    <div class="bigItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="smallItem"></div>
+    <div class="bigItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005-ref.html
new file mode 100644
index 000000000..589712c6a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: space-around;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      flex: none; /* prevent shrinking (so we can intentionally overflow) */
+      width: 72px;
+      height: 20px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller width that exactly fits our container (and
+         doesn't overflow). */
+      width: 70px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005.html
new file mode 100644
index 000000000..da4e063ca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-horiz-005.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "align-content" on a horizontal
+     flex container that has "overflow:hidden".  We use a large flex item,
+     large enough that it overflows the container in the main axis, to be
+     sure that "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <title>CSS Test: Testing 'overflow' property on a horizontal flex container, with 'align-content: space-around'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property">
+  <link rel="match" href="flexbox-overflow-horiz-005-ref.html">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: space-around;
+      width: 70px;
+      height: 70px;
+      float: left;
+      margin-right: 5px;
+    }
+    .bigItem {
+      background: blue;
+      flex: none; /* prevent shrinking (so we can intentionally overflow) */
+      width: 72px;
+      height: 20px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001-ref.html
new file mode 100644
index 000000000..3dfddb7bb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .flexContainer {
+      background: purple;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      width: 200px;
+      background: blue;
+      height: 75%;
+    }
+    .smallItem {
+      background: teal;
+      margin-right: 10px;
+      height: 25%;
+    }
+    .scroll { overflow: scroll }
+    .auto   { overflow: auto   }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer scroll">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer auto">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001.html
new file mode 100644
index 000000000..9c6ad35c1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we correctly handle the "overflow" property on
+     a vertical flex container with overflowing contents. -->
+<html>
+<head>
+  <title>CSS Test: Testing 'overflow' property on a vertical flex container</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
+  <link rel="match" href="flexbox-overflow-vert-001-ref.html">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 200px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      margin-right: 10px;
+      flex: 1;
+    }
+    .scroll { overflow: scroll }
+    .auto   { overflow: auto   }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer scroll">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer auto">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002-ref.html
new file mode 100644
index 000000000..cf95a6b7b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 10px;
+      /* Tall border (taller than our container): */
+      border: solid coral;
+      border-width: 2px 50px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      flex: 1;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller border that exactly fits our container (and
+         doesn't overflow). */
+      border-width: 2px 30px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002.html
new file mode 100644
index 000000000..aeec44e54
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-002.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "align-items" on a vertical
+     flex container that has "overflow: hidden".  We use a huge border on
+     one of the flex items, large enough that it overflows the container,
+     to be sure that "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-items: center'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
+  <link rel="match" href="flexbox-overflow-vert-002-ref.html">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 10px;
+      /* Tall border (taller than our container): */
+      border: solid coral;
+      border-width: 2px 50px;
+      flex: 3;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      flex: 1;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003-ref.html
new file mode 100644
index 000000000..84bf02227
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 200px;
+      height: 20px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller width that exactly fits our container (and
+         doesn't overflow). */
+      width: 70px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003.html
new file mode 100644
index 000000000..965b99a40
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "justify-content" on a vertical
+     flex container that has "overflow:hidden".  We use a large flex item,
+     large enough that it overflows the container, to be sure that
+     "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'justify-content: space-around'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
+  <link rel="match" href="flexbox-overflow-vert-003-ref.html">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 200px;
+      height: 20px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004-ref.html
new file mode 100644
index 000000000..154fca8cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 200px;
+      height: 50px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 50px;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller width that exactly fits the space remaining
+         in our container, after wrapping */
+      width: 50px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="smallItem"></div>
+    <div class="bigItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="smallItem"></div>
+    <div class="bigItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004.html
new file mode 100644
index 000000000..579cb4fd1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "flex-wrap" on a vertical
+     flex container that has "overflow:hidden".  We use a large flex item,
+     large enough that it overflows the container in the cross axis, to be
+     sure that "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'flex-wrap: wrap'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
+  <link rel="match" href="flexbox-overflow-vert-004-ref.html">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      width: 200px;
+      height: 50px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 50px;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="smallItem"></div>
+    <div class="bigItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="smallItem"></div>
+    <div class="bigItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005-ref.html
new file mode 100644
index 000000000..56022a478
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-content: space-around;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      flex: none; /* prevent shrinking (so we can intentionally overflow) */
+      width: 20px;
+      height: 72px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden > .bigItem {
+      /* To match the testcase's "overflow:hidden"-cropped flex item, we
+         just use a smaller height that exactly fits our container (and
+         doesn't overflow). */
+      height: 70px;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005.html
new file mode 100644
index 000000000..1de6d1b8c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-overflow-vert-005.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we honor "align-content" on a vertical
+     flex container that has "overflow:hidden".  We use a large flex item,
+     large enough that it overflows the container in the main axis, to be
+     sure that "overflow: hidden" is actually applying. -->
+<html>
+<head>
+  <title>CSS Test: Testing 'overflow' property on a vertical flex container, with 'align-content: space-around'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-content-property">
+  <link rel="match" href="flexbox-overflow-vert-005-ref.html">
+  <style>
+    .flexContainer {
+      background: purple;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-content: space-around;
+      width: 70px;
+      height: 70px;
+      margin-bottom: 5px;
+    }
+    .bigItem {
+      background: blue;
+      flex: none; /* prevent shrinking (so we can intentionally overflow) */
+      width: 20px;
+      height: 72px;
+    }
+    .smallItem {
+      background: teal;
+      width: 20px;
+      height: 20px;
+    }
+    .hidden { overflow: hidden }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- (overflow un-set) -->
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+  <div class="flexContainer hidden">
+    <div class="bigItem"></div>
+    <div class="smallItem"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001-ref.xhtml
new file mode 100644
index 000000000..635b0b29c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001-ref.xhtml
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      .container {
+        width: 40px;
+        height: 14px;
+        border: 2px solid green;
+        margin-bottom: 2px;
+      }
+      .a {
+          width: 16px;
+          height: 10px;
+          background: blue;
+          min-width: 0;
+          border: 2px solid lightblue;
+      }
+      .b {
+          width: 16px;
+          height: 10px;
+          background: purple;
+          min-width: 0;
+          border: 2px solid slateblue;
+      }
+      .aKid {
+          margin-left: 10px;
+          margin-top: 2px;
+          width: 16px;
+          height: 6px;
+          background: yellow;
+          border: 1px solid black;
+      }
+      .a, .b { float: left; }
+    </style>
+  </head>
+  <body>
+    <!-- Just 6 copies of the same container, since they all should look the
+         same (except for the final "position: fixed" one, which needs to be
+         explicitly marked as "position: fixed" or else it paints differently
+         on Android.) -->
+    <div class="container">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+
+    <div class="container">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+
+    <div class="container">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+
+    <div class="container">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+
+    <div class="container">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+
+    <div class="container" style="position: fixed">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001.xhtml
new file mode 100644
index 000000000..06b42e126
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-001.xhtml
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with flex items containing overlapping content, to test
+     their paint-order. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the paint-order of overlapping flex items, with varying tweaks on the container</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"/>
+    <link rel="match" href="flexbox-paint-ordering-001-ref.xhtml"/>
+    <style>
+      body {
+        line-height: 0;
+      }
+      .container {
+        width: 40px;
+        height: 14px;
+        border: 2px solid green;
+        margin-bottom: 2px;
+      }
+      .a {
+          width: 16px;
+          height: 10px;
+          background: blue;
+          min-width: 0;
+          border: 2px solid lightblue;
+      }
+      .b {
+          width: 16px;
+          height: 10px;
+          background: purple;
+          min-width: 0;
+          border: 2px solid slateblue;
+      }
+      .aKid {
+          margin-left: 10px;
+          margin-top: 2px;
+          width: 16px;
+          height: 6px;
+          background: yellow;
+          border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- inline-level flex container -->
+    <div class="container" style="display: inline-flex">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+
+    <!-- block-level flex container -->
+    <div class="container" style="display: flex">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+
+    <!-- floated flex container -->
+    <div class="container" style="display: flex; float: left">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+    <!-- Helper-div to clear floats: -->
+    <div style="clear: both"/>
+
+    <!-- relatively-positioned flex container -->
+    <div class="container" style="display: flex; position: relative">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+
+    <!-- absolutely-positioned flex container -->
+    <div class="container" style="display: flex; position: absolute">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+    <!--- Spacer div, since abspos div doesn't set aside space for itself -->
+    <div style="height: 20px"/>
+
+    <!-- fixed-position flex container -->
+    <div class="container" style="display: flex; position: fixed">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002-ref.xhtml
new file mode 100644
index 000000000..55ca62df7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002-ref.xhtml
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for flex items containing overlapping content.
+     This reference uses inline-block in place of inline-flex, with floated
+     children in place of flex items, and with hardcoded DOM-reordering in
+     place of "order" reordering. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      body {
+        line-height: 0;
+      }
+
+      .flexbox {
+        display: inline-block;
+        width: 20px;
+        height: 10px;
+        border: 2px solid gray;
+        margin-bottom: 10px;
+        margin-right: 10px;
+      }
+      .a {
+        width: 10px;
+        height: 10px;
+        background: lightblue;
+        float: left; /* to stack horizontally, like a flex item */
+      }
+      .b {
+        width: 10px;
+        height: 10px;
+        background: pink;
+        float: left; /* to stack horizontally, like a flex item */
+      }
+      .aKid {
+         margin-left: 3px;
+         margin-top:  3px;
+         width: 10px;
+         height: 10px;
+         background: steelblue;
+         border: 1px solid blue;
+      }
+      .bKid {
+         margin-left: 3px;
+         margin-top:  6px;
+         width: 10px;
+         height: 10px;
+         background: violet;
+         border: 1px solid purple;
+      }
+
+      /* Need to set 'position' for z-index to take effect. */
+      .zn2 { z-index: -2; position: relative; }
+      .zn1 { z-index: -1; position: relative; }
+      .z0  { z-index:  0; position: relative; }
+      .z1  { z-index:  1; position: relative; }
+
+    </style>
+  </head>
+  <body>
+    <!-- order not set: -->
+    <div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div>
+
+    <br/>
+
+    <!-- order set, but it matches content order, so it shouldn't matter: -->
+    <div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div>
+
+    <br/>
+
+    <!-- order set to reverse of content-order: -->
+    <div class="flexbox">
+      <div class="b"><div class="bKid"/></div>
+      <div class="a"><div class="aKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="b"><div class="bKid"/></div>
+      <div class="a"><div class="aKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="b"><div class="bKid"/></div>
+      <div class="a"><div class="aKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="b"><div class="bKid"/></div>
+      <div class="a"><div class="aKid"/></div>
+    </div>
+
+    <br/>
+
+    <!-- order set to reverse of content-order, AND with z-index set on
+         one or both items, but not such that it changes the paint order -->
+    <div class="flexbox">
+      <div class="b"><div class="bKid"/></div>
+      <div class="a"><div class="aKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="b"><div class="bKid"/></div>
+      <div class="a"><div class="aKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="b"><div class="bKid"/></div>
+      <div class="a"><div class="aKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="b"><div class="bKid"/></div>
+      <div class="a"><div class="aKid"/></div>
+    </div>
+
+    <br/>
+
+    <!-- order set to reverse of content-order, AND with z-index set on
+         one or both items, in such a way that it affects paint order -->
+    <div class="flexbox">
+      <!-- 'a' is behind the container's border -->
+      <div class="b"><div class="bKid"/></div>
+      <div class="a zn1"><div class="aKid"/></div>
+    </div
+    ><div class="flexbox">
+      <!-- 'a' and 'b' are both behind the container's border -->
+      <div class="b zn1"><div class="bKid"/></div>
+      <div class="a zn1"><div class="aKid"/></div>
+    </div
+    ><div class="flexbox">
+      <!-- 'a' and 'b' are both behind the container's border,
+           and 'a' is behind 'b' despite coming after it in the 'order'
+           ordering-->
+      <div class="b zn1"><div class="bKid"/></div>
+      <div class="a zn2"><div class="aKid"/></div>
+    </div
+    ><div class="flexbox">
+      <!-- 'a' and 'b' are both in front of the container's border,
+           and 'a' is behind 'b' despite coming after it in the 'order'
+           ordering-->
+      <div class="b z1"><div class="bKid"/></div>
+      <div class="a z0"><div class="aKid"/></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002.xhtml
new file mode 100644
index 000000000..55a18d5b7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-paint-ordering-002.xhtml
@@ -0,0 +1,176 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase with flex items containing overlapping content, with
+     "order" and "z-index" set on some of them, to test how that affects
+     paint-order. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing the paint-order of overlapping flex items with 'order' and 'z-index' set</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"/>
+    <link rel="match" href="flexbox-paint-ordering-002-ref.xhtml"/>
+    <style>
+      body {
+        line-height: 0;
+      }
+
+      .flexbox {
+        display: inline-flex;
+        width: 20px;
+        height: 10px;
+        border: 2px solid gray;
+        margin-bottom: 10px;
+        margin-right: 10px;
+      }
+      .a {
+        width: 10px;
+        height: 10px;
+        background: lightblue;
+        min-width: 0;
+      }
+      .b {
+        width: 10px;
+        height: 10px;
+        background: pink;
+        min-width: 0;
+      }
+
+      .aKid {
+         margin-left: 3px;
+         margin-top:  3px;
+         width: 10px;
+         height: 10px;
+         background: steelblue;
+         border: 1px solid blue;
+      }
+      .bKid {
+         margin-left: 3px;
+         margin-top:  6px;
+         width: 10px;
+         height: 10px;
+         background: violet;
+         border: 1px solid purple;
+      }
+
+      .on1 { order: -1; }
+      .o0  { order:  0; }
+      .o1  { order:  1; }
+      .o2  { order:  2; }
+
+      .zn2 { z-index: -2; }
+      .zn1 { z-index: -1; }
+      .z0  { z-index:  0; }
+      .z1  { z-index:  1; }
+
+    </style>
+  </head>
+  <body>
+    <!-- order not set: -->
+    <div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div>
+
+    <br/>
+
+    <!-- order set, but it matches content order, so it shouldn't matter: -->
+    <div class="flexbox">
+      <div class="a on1"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a o0"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a o0"><div class="aKid"/></div>
+      <div class="b o0"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a o2"><div class="aKid"/></div>
+      <div class="b o2"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b o0"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b o1"><div class="bKid"/></div>
+    </div>
+
+    <br/>
+
+    <!-- order set to reverse of content-order: -->
+    <div class="flexbox">
+      <div class="a o1"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a"><div class="aKid"/></div>
+      <div class="b on1"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a o0"><div class="aKid"/></div>
+      <div class="b on1"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a o2"><div class="aKid"/></div>
+      <div class="b o1"><div class="bKid"/></div>
+    </div>
+
+    <br/>
+
+    <!-- order set to reverse of content-order, AND with z-index set on
+         one or both items, but not such that it changes the paint order -->
+    <div class="flexbox">
+      <div class="a o1 z0"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a o1 z1"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a o1 z0"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <div class="a o1 z1"><div class="aKid"/></div>
+      <div class="b z0"><div class="bKid"/></div>
+    </div>
+
+    <br/>
+
+    <!-- order set to reverse of content-order, AND with z-index set on
+         one or both items, in such a way that it affects paint order -->
+    <div class="flexbox">
+      <!-- 'a' is behind the container's border -->
+      <div class="a o1 zn1"><div class="aKid"/></div>
+      <div class="b"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <!-- 'a' and 'b' are both behind the container's border -->
+      <div class="a o1 zn1"><div class="aKid"/></div>
+      <div class="b zn1"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <!-- 'a' and 'b' are both behind the container's border,
+           and 'a' is behind 'b' despite coming after it in the 'order'
+           ordering-->
+      <div class="a o1 zn2"><div class="aKid"/></div>
+      <div class="b zn1"><div class="bKid"/></div>
+    </div
+    ><div class="flexbox">
+      <!-- 'a' and 'b' are both in front of the container's border,
+           and 'a' is behind 'b' despite coming after it in the 'order'
+           ordering-->
+      <div class="a o1 z0"><div class="aKid"/></div>
+      <div class="b z1"><div class="bKid"/></div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001-ref.html
new file mode 100644
index 000000000..6a72f7618
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html style="display: flex; justify-content: center">
+<head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    div {
+      display: flex;
+      justify-content: center;
+    }
+  </style>
+</head>
+<body>
+  <div>centered</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001a.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001a.html
new file mode 100644
index 000000000..195503b94
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001a.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we correctly handle 'display:flex' property on
+     the root <html> element, with the <body> as the sole flex item. -->
+<html style="display: flex; justify-content: center">
+<head>
+  <title>CSS Test: Testing 'display:flex' on root node</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
+  <link rel="match" href="flexbox-root-node-001-ref.html">
+  <style>
+    html {
+      display: flex;
+      justify-content: center;
+    }
+  </style>
+</head>
+<body>
+  centered
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001b.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001b.html
new file mode 100644
index 000000000..87d4fc1e1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-root-node-001b.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- This testcase checks that we correctly handle 'display:flex' property on
+     the root <html> element, with no explicit <body>. -->
+<html style="display: flex; justify-content: center">
+<head>
+  <title>CSS Test: Testing 'display:flex' on root node</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers">
+  <link rel="match" href="flexbox-root-node-001-ref.html">
+  <style>
+    html {
+      display: flex;
+      justify-content: center;
+    }
+  </style>
+</head>
+centered
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1-ref.html
new file mode 100644
index 000000000..602c027f7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com">
+<style>
+.container {
+  display: block;
+  background: gray;
+  max-height: 200px;
+}
+.panel {
+  background: lightblue;
+  width: 150px;
+  height: 200px;
+  border: 1px solid purple;
+  box-sizing: border-box;
+}
+</style>
+<div class="container">
+  <div class="panel">
+  </div>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1.html
new file mode 100644
index 000000000..f97d5c578
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-1.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<meta charset="utf-8">
+<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com">
+<link rel="match" href="flexbox-single-line-clamp-1-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line">
+<style>
+.container {
+  display: flex;
+  background: gray;
+  max-height: 200px;
+}
+.panel {
+  background: lightblue;
+  width: 150px;
+  border: 1px solid purple;
+  box-sizing: border-box;
+}
+.tall-child {
+  width: 50px;
+  height: 400px;
+}
+</style>
+<div class="container">
+  <div class="panel">
+    <div class="tall-child"></div>
+  </div>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2-ref.html
new file mode 100644
index 000000000..fda5fa7cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com">
+<style>
+.container {
+  background: gray;
+  height: 500px;
+  width: 250px;
+}
+.panel {
+  background: lightblue;
+  border: 1px solid purple;
+  height: 100px;
+}
+</style>
+<div class="container">
+  <div class="panel">
+  </div>
+  <div class="panel">
+  </div>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2.html
new file mode 100644
index 000000000..be9e50b90
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-2.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<meta charset="utf-8">
+<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com">
+<link rel="match" href="flexbox-single-line-clamp-2-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line">
+<style>
+.container {
+  display: flex;
+  background: gray;
+  height: 500px;
+  flex-direction: column;
+  max-width: 250px;
+}
+.panel {
+  background: lightblue;
+  border: 1px solid purple;
+}
+.small-box {
+  width: 100px;
+  height: 100px;
+}
+.big-box {
+  width: 500px;
+  height: 100px;
+}
+</style>
+<div class="container">
+  <div class="panel">
+    <div class="small-box"></div>
+  </div>
+  <div class="panel">
+    <div class="big-box"></div>
+  </div>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3-ref.html
new file mode 100644
index 000000000..02f7eaa96
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3-ref.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com">
+<style>
+.container {
+  background: gray;
+  height: 80px;
+}
+.panel {
+  background: lightblue;
+  width: 150px;
+  height: 80px;
+}
+.contents {
+  height: 10px;
+  width: 10px;
+  background: purple;
+}
+</style>
+</head>
+<div class="container">
+  <div class="panel">
+    <div class="contents"></div>
+  </div>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3.html
new file mode 100644
index 000000000..f3afbd410
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-single-line-clamp-3.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<meta charset="utf-8">
+<title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title>
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="match" href="flexbox-single-line-clamp-3-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line">
+<style>
+.container {
+  display: flex;
+  background: gray;
+  min-height: 80px;
+
+  /* Don't let (default) align-content:stretch save us
+     by stretching the line to fit the container! The point
+     here is that the line should already be clamped to the
+     container's min-height. */
+  align-content: flex-start;
+}
+.panel {
+  background: lightblue;
+  width: 150px;
+}
+.contents {
+  height: 10px;
+  width: 10px;
+  background: purple;
+}
+</style>
+</head>
+<div class="container">
+  <div class="panel">
+    <div class="contents"></div>
+  </div>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001-ref.xhtml
new file mode 100644
index 000000000..54bafd034
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001-ref.xhtml
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { height: 10px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        font-size: 10px;
+        margin-bottom: 2px;
+      }
+      div.a, div.b, div.c { float: left }
+      div.a {
+        width: 20px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 40px;
+        background: purple;
+      }
+      div.c {
+        width: 40px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="width: 60px"/>
+      <div class="b" style="width: 60px"/>
+      <div class="c" style="width: 60px"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="width: 60px"/>
+      <div class="b" style="width: 60px"/>
+      <div class="c" style="width: 60px"/>
+    </div>
+
+    <div class="flexbox" style="width: 300px">
+      <div class="a" style="width: 60px"/>
+      <div class="b" style="width: 60px"/>
+      <div class="c" style="width: 60px"/>
+    </div>
+
+    <div class="flexbox" style="width: 70px">
+      <div class="a" style="width: 10px"/>
+      <div class="b"/>
+      <div class="c" style="width: 20px"/>
+    </div>
+
+    <div class="flexbox" style="width: 20px">
+      <!-- We add an extra layer of <div> wrapping in this chunk, with a
+           fixed width, to keep the overflowing children from wrapping. -->
+      <div style="width: 50px">
+        <div class="b"/>
+        <div class="c" style="width: 10px"/>
+      </div>
+    </div>
+
+    <div class="flexbox" style="width: 58px">
+      <div class="a" style="width: 6px"/>
+      <div class="b"/>
+      <div class="c" style="width: 12px"/>
+    </div>
+
+    <div class="flexbox" style="width: 140px">
+      <div class="a" style="width: 40px"/>
+      <div class="b" style="width: 40px"/>
+      <div class="c" style="width: 60px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001.xhtml
new file mode 100644
index 000000000..0f9b5846d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-001.xhtml
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase checks how "min-width" and "max-width" affect the sizing
+     of horizontal flex containers that have no explicit "width" property.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing sizing of an auto-sized horizontal flex container with min-width and max-width constraints</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-sizing-horiz-001-ref.xhtml"/>
+    <style>
+      div { height: 10px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        font-size: 10px;
+        display: flex;
+        margin-bottom: 2px;
+      }
+      div.a {
+        flex: 1 20px;
+        max-width: 60px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: 1 20px;
+        min-width: 40px;
+        max-width: 60px;
+        background: purple;
+      }
+      div.c {
+        flex: 1 40px;
+        min-width: 10px;
+        max-width: 60px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- auto-sized horizontal flexbox should occupy the available width. -->
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- Adding a small min-size shouldn't affect that. -->
+    <div class="flexbox" style="min-width: 10px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- ...but a (large) max-size will limit us to that size, instead of
+         our available size.-->
+    <div class="flexbox" style="max-width: 300px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- If we set a maximum size that's even smaller, it'll limit our
+         size and compress our children. -->
+    <div class="flexbox" style="max-width: 70px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- The max-size may be small enough that our items will overflow. -->
+    <div class="flexbox" style="max-width: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- But if we add a min-size, it beats the max-size. Here, we use a
+         min-size smaller than the sum of the items' base sizes... -->
+    <div class="flexbox" style="min-width: 58px; max-width: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- ...and here we use a min-size larger than the sum of the items'
+         base sizes. -->
+    <div class="flexbox" style="min-width: 140px; max-width: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002-ref.xhtml
new file mode 100644
index 000000000..29aa55a62
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002-ref.xhtml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { width: 200px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        background: lightgreen;
+        font-size: 10px;
+        margin-bottom: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div>text</div>
+    </div>
+
+    <div class="flexbox">
+      <div>text</div>
+    </div>
+
+    <div class="flexbox">
+      <div>text</div>
+    </div>
+
+    <div class="flexbox" style="height: 30px">
+      <div>text</div>
+    </div>
+
+    <div class="flexbox" style="height: 6px">
+      <div>text</div>
+    </div>
+
+    <div class="flexbox" style="height: 30px">
+      <div>text</div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002.xhtml
new file mode 100644
index 000000000..c450dd301
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-horiz-002.xhtml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase checks how "min-height" and "max-height" affect the sizing
+     of horizontal flex containers that have no explicit "height" property.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing sizing of an auto-sized horizontal flex container with min-height and max-height constraints</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-sizing-horiz-002-ref.xhtml"/>
+    <style>
+      div { width: 200px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        background: lightgreen;
+        font-size: 10px;
+        display: flex;
+        margin-bottom: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- auto-height horizontal flexbox should shrinkwrap its contents. -->
+    <div class="flexbox">
+      <div>text</div>
+    </div>
+
+    <!-- Adding a small min-size shouldn't affect that. -->
+    <div class="flexbox" style="min-height: 2px">
+      <div>text</div>
+    </div>
+
+    <!-- ...nor should a large max-size. -->
+    <div class="flexbox" style="max-height: 300px">
+      <div>text</div>
+    </div>
+
+    <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap
+         size, we should jump up to that size.-->
+    <div class="flexbox" style="min-height: 30px">
+      <div>text</div>
+    </div>
+
+    <!-- If we set a maximum size that's smaller than the shrinkwrap size,
+         we should max out at that size.-->
+    <div class="flexbox" style="max-height: 6px">
+      <div>text</div>
+    </div>
+
+    <!-- But if we add a min-size, it beats the max-size. -->
+    <div class="flexbox" style="min-height: 30px; max-height: 5px">
+      <div>text</div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001-ref.xhtml
new file mode 100644
index 000000000..00c8dbaa4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001-ref.xhtml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { width: 10px; }
+      div.flexbox {
+        float: left;
+        border: 1px dashed blue;
+        font-size: 10px;
+        margin-right: 2px;
+      }
+      div.a {
+        height: 20px;
+        background: lightgreen;
+      }
+      div.b {
+        height: 40px;
+        background: purple;
+      }
+      div.c {
+        height: 40px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="height: 30px"/>
+      <div class="b"/>
+      <div class="c" style="height: 50px"/>
+    </div>
+
+    <div class="flexbox" style="height: 200px">
+      <div class="a" style="height: 60px"/>
+      <div class="b" style="height: 60px"/>
+      <div class="c" style="height: 60px"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="height: 10px"/>
+      <div class="b"/>
+      <div class="c" style="height: 20px"/>
+    </div>
+
+    <div class="flexbox" style="height: 20px">
+      <div class="b"/>
+      <div class="c" style="height: 10px"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="height: 6px"/>
+      <div class="b"/>
+      <div class="c" style="height: 12px"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="height: 40px"/>
+      <div class="b" style="height: 40px"/>
+      <div class="c" style="height: 60px"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001.xhtml
new file mode 100644
index 000000000..5ac29a700
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-001.xhtml
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase checks how "min-height" and "max-height" affect the sizing
+     of vertical flex containers that have no explicit "height" property.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing sizing of an auto-sized vertical flex container with min-height and max-height constraints</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-sizing-vert-001-ref.xhtml"/>
+    <style>
+      div { width: 10px; }
+      div.flexbox {
+        float: left;
+        border: 1px dashed blue;
+        font-size: 10px;
+        display: flex;
+        flex-direction: column;
+        margin-right: 2px;
+      }
+      div.a {
+        flex: 1 20px;
+        max-height: 60px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: 1 20px;
+        min-height: 40px;
+        max-height: 60px;
+        background: purple;
+      }
+      div.c {
+        flex: 1 40px;
+        min-height: 10px;
+        max-height: 60px;
+        background: orange;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- floated auto-sized vertical flexbox should shrinkwrap its flex items'
+         hypothetical main sizes (their flex base sizes, clamped to min/max) -->
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- Adding a small min-size shouldn't affect that. -->
+    <div class="flexbox" style="min-height: 10px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- ...nor should a large max-size. -->
+    <div class="flexbox" style="max-height: 300px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap
+         size, we should jump up to that size.-->
+    <div class="flexbox" style="min-height: 120px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- ...even if it's large enough that our items won't occupy all the
+         space. -->
+    <div class="flexbox" style="min-height: 200px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- If we set a maximum size that's smaller than the shrinkwrap size,
+         we should max out at that size.-->
+    <div class="flexbox" style="max-height: 70px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- The max-size may be small enough that our items will overflow. -->
+    <div class="flexbox" style="max-height: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- But if we add a min-size, it beats the max-size. Here, we use a
+         min-size smaller than the sum of the items' base sizes... -->
+    <div class="flexbox" style="min-height: 58px; max-height: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- ...and here we use a min-size larger than the sum of the items'
+         base sizes. -->
+    <div class="flexbox" style="min-height: 140px; max-height: 20px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002-ref.xhtml
new file mode 100644
index 000000000..4a4cc5891
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002-ref.xhtml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        float: left;
+        border: 1px dashed blue;
+        background: lightgreen;
+        font-size: 10px;
+        margin-right: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div>AB</div>
+    </div>
+
+    <div class="flexbox">
+      <div>AB</div>
+    </div>
+
+    <div class="flexbox">
+      <div>AB</div>
+    </div>
+
+    <div class="flexbox" style="width: 30px">
+      <div>AB</div>
+    </div>
+
+    <div class="flexbox" style="width: 3px">
+      <div>AB</div>
+    </div>
+
+    <div class="flexbox" style="width: 30px">
+      <div>AB</div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002.xhtml
new file mode 100644
index 000000000..9cba454e9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-sizing-vert-002.xhtml
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This testcase checks how "min-width" and "max-width" affect the sizing
+     of vertical flex containers that have no explicit "width" property.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing sizing of an auto-sized vertical flex container with min-width and max-width constraints</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
+    <link rel="match" href="flexbox-sizing-vert-002-ref.xhtml"/>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        float: left;
+        border: 1px dashed blue;
+        background: lightgreen;
+        font-size: 10px;
+        display: flex;
+        margin-right: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- floated auto-width vertical flexbox should shrinkwrap its contents. -->
+    <div class="flexbox">
+      <div>AB</div>
+    </div>
+
+    <!-- Adding a small min-size shouldn't affect that. -->
+    <div class="flexbox" style="min-width: 2px">
+      <div>AB</div>
+    </div>
+
+    <!-- ...nor should a large max-size. -->
+    <div class="flexbox" style="max-width: 300px">
+      <div>AB</div>
+    </div>
+
+    <!-- OK. Now, if we set a minimum size that's larger than the shrinkwrap
+         size, we should jump up to that size.-->
+    <div class="flexbox" style="min-width: 30px">
+      <div>AB</div>
+    </div>
+
+    <!-- If we set a maximum size that's smaller than the shrinkwrap size,
+         we should max out at that size.-->
+    <div class="flexbox" style="max-width: 3px">
+      <div>AB</div>
+    </div>
+
+    <!-- But if we add a min-size, it beats the max-size. -->
+    <div class="flexbox" style="min-width: 30px; max-width: 5px">
+      <div>AB</div>
+    </div>
+
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001-ref.xhtml
new file mode 100644
index 000000000..461152154
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001-ref.xhtml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case for ensuring table-fixup does not happen to adjacent
+     table parts directly inside of a flex container. -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: flex;
+        justify-content: space-around;
+      }
+
+      .a {
+        background: lightgreen;
+        width: 48px;
+      }
+
+      .b {
+        background: yellow;
+        width: 48px;
+      }
+
+      .c {
+        background: pink;
+        width: 48px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- In each example here, we simply use blocks instead of table parts -->
+    <div class="flexbox"
+         ><div class="a">cell1</div><div class="b">cell2</div
+    ></div>
+
+    <div class="flexbox"
+         ><div class="a">cell1</div><div class="b">t</div
+    ></div>
+
+    <div class="flexbox"
+         ><div></div
+         ><div class="b">cell1</div
+    ></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001.xhtml
new file mode 100644
index 000000000..00e1a54ff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-table-fixup-001.xhtml
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Testcase with table parts inside of a flex container, which should *not*
+     trigger table-fixup.  We use justify-content:space-between to stick packing
+     space between flex items, so that we can verify that e.g. a contiguous
+     run of <td>s will each be blockified & form its own flex item (instead of
+     being aggregated into a single table & single flex item).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Testing that table cells in a flex container get blockified and each form their own flex item</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/>
+    <link rel="match" href="flexbox-table-fixup-001-ref.xhtml"/>
+    <style>
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: flex;
+        justify-content: space-around;
+      }
+
+      td {
+        /* Remove any default padding for td elements, so we can compare them
+           easily against blocks in the reference case. */
+        padding: 0px;
+      }
+
+      .a {
+        background: lightgreen;
+        width: 48px;
+      }
+
+      .b {
+        background: yellow;
+        width: 48px;
+      }
+
+      .c {
+        background: pink;
+        width: 48px;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- The adjacent table-parts in each example below should *not* be
+         grouped into the same flex item. -->
+    <!-- 2 adjacent table cells -->
+    <div class="flexbox"
+         ><td class="a">cell1</td><td class="b">cell2</td></div>
+
+    <!-- Table cell followed by tbody -->
+    <div class="flexbox"
+         ><td class="a">cell1</td><tbody class="b">t</tbody></div>
+
+    <!-- Empty table cell (ends up occupying 2px of width), followed by
+         nonempty table cell.-->
+    <div class="flexbox"
+         ><td></td><td class="b">cell1</td></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001-ref.xhtml
new file mode 100644
index 000000000..236e3ee3b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001-ref.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     Reference case, with inline-blocks instead of flexbox/flex items,
+     with positioning done using margins.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+        display: inline-block;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+        display: inline-block;
+      }
+      img {
+        width: 40px;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 85px"/>
+    </div>
+
+    <div class="flexbox">
+      <div class="a" style="margin-left: 37.5px"
+           /><div class="b" style="margin-left: 75px"/>
+    </div>
+
+    <div class="flexbox">
+      <img src="support/solidblue.png" style="margin-left: 30px"
+           /><img src="support/solidblue.png" style="margin-left: 60px"/>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001a.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001a.xhtml
new file mode 100644
index 000000000..3bae116b4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001a.xhtml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we don't create anonymous flex items around
+     runs of inline content that are _purely_ whitespace.
+
+     The test uses "white-space: pre", to try to tempt us into honoring
+     that whitespace. (but we should resist that temptation).
+
+     The test also uses 'justify-content: space-around' to be sure we can
+     tell whether anonymous flex items are being created around the whitespace
+     (since they'd claim a share of the packing space if they were there).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Test that anonymous flex items aren't created for pure-whitespace inline content</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/>
+    <link rel="match" href="flexbox-whitespace-handling-001-ref.xhtml"/>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        white-space: pre;
+        border: 1px dashed blue;
+        width: 200px;
+        display: flex;
+        justify-content: space-around;
+      }
+      div.a {
+        flex: none;
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        flex: none;
+        width: 20px;
+        background: lightblue;
+      }
+      img { width: 40px; }
+    </style>
+  </head>
+  <body>
+    <!-- whitespace & tab after flex item -->
+    <div class="flexbox"><div class="a"/> 	</div>
+
+    <!-- 2 spaces before flex item -->
+    <div class="flexbox">  <div class="a"/><div class="b"/></div>
+
+    <!-- newline & whitespace between flex items  -->
+    <div class="flexbox"><img src="support/solidblue.png"/>
+      <img src="support/solidblue.png"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001b.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001b.xhtml
new file mode 100644
index 000000000..43a4c60ce
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-001b.xhtml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test is like the -1a variant, but with the whitespace removed between
+     flex items (since that whitespace should be ignored anyway, if we're
+     doing things right).
+-->
+<!-- XXXdholbert Does this testcase add value?
+    (Maybe it should be an alternate reference case.) -->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Test that flex items are created correctly</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/>
+    <link rel="match" href="flexbox-whitespace-handling-001-ref.xhtml"/>
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        border: 1px dashed blue;
+        width: 200px;
+        display: flex;
+        justify-content: space-around;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+      }
+      img { width: 40px; }
+    </style>
+  </head>
+  <body>
+    <div class="flexbox"><div class="a"/></div>
+
+    <div class="flexbox"><div class="a"/><div class="b"/></div>
+
+    <div class="flexbox"
+      ><img src="support/solidblue.png"
+     /><img src="support/solidblue.png"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002-ref.xhtml
new file mode 100644
index 000000000..b7de64727
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002-ref.xhtml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This reference case is the same as the testcase, but with an explicit <div>
+     around each run of content that we expect to turn into an anonymous
+     flex item (to ensure that the whitespace is included).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="stylesheet" type="text/css" href="support/ahem.css" />
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        white-space: pre;
+        border: 1px dashed blue;
+        width: 200px;
+        display: flex;
+        justify-content: space-around;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- spaces around inline content at the beginning of flexbox -->
+    <div class="flexbox"><div>  abc</div><div class="a"/></div>
+    <div class="flexbox"><div>abc   </div><div class="a"/></div>
+    <div class="flexbox"><div>  abc   </div><div class="a"/></div>
+
+    <!-- spaces around inline content at the end of flexbox -->
+    <div class="flexbox"><div class="a"/><div>  abc</div></div>
+    <div class="flexbox"><div class="a"/><div>abc   </div></div>
+    <div class="flexbox"><div class="a"/><div>  abc   </div></div>
+
+    <!-- whitespace around inline content in between flex items -->
+    <div class="flexbox"><div class="a"/><div>  abc</div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div>abc   </div><div class="b"/></div>
+    <div class="flexbox"><div class="a"/><div>  abc   </div><div class="b"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002.xhtml
new file mode 100644
index 000000000..e7d00d2f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-whitespace-handling-002.xhtml
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!--
+     This test verifies that we preserve whitespace at the beginning & end of
+     anonymous flex items (using "white-space: pre" so that it actually
+     occupies space and affects the rendering).
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Test that whitespace is preserved at the edges of anonymous flex items if 'white-space: pre' is set</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items"/>
+    <link rel="match" href="flexbox-whitespace-handling-002-ref.xhtml"/>
+    <link rel="stylesheet" type="text/css" href="support/ahem.css" />
+    <style>
+      div { height: 100px; }
+      div.flexbox {
+        white-space: pre;
+        border: 1px dashed blue;
+        width: 200px;
+        display: flex;
+        justify-content: space-around;
+      }
+      div.a {
+        width: 30px;
+        background: lightgreen;
+      }
+      div.b {
+        width: 20px;
+        background: lightblue;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- spaces around inline content at the beginning of flexbox -->
+    <div class="flexbox">  abc<div class="a"/></div>
+    <div class="flexbox">abc   <div class="a"/></div>
+    <div class="flexbox">  abc   <div class="a"/></div>
+
+    <!-- spaces around inline content at the end of flexbox -->
+    <div class="flexbox"><div class="a"/>  abc</div>
+    <div class="flexbox"><div class="a"/>abc   </div>
+    <div class="flexbox"><div class="a"/>  abc   </div>
+
+    <!-- whitespace around inline content in between flex items -->
+    <div class="flexbox"><div class="a"/>  abc<div class="b"/></div>
+    <div class="flexbox"><div class="a"/>abc   <div class="b"/></div>
+    <div class="flexbox"><div class="a"/>  abc   <div class="b"/></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001-ref.html
new file mode 100644
index 000000000..98d23cc8d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter)
+     for the testcase's ::before and ::after generated content.
+
+     fakeBefore div is always the first child; fakeAfter is always the last.
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      height: 50px;
+      width: 300px;
+      margin-bottom: 2px;
+      background: lightgray;
+    }
+    .fakeBefore {
+      align-self: center;
+      content: 'b';
+      background: yellow;
+    }
+    .fakeAfter {
+      align-self: center;
+      content: 'a';
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="fakeBefore">b</div>
+    x
+    <div>y</div>
+    z
+  </div>
+  <div class="flexContainer">
+    x
+    <div>y</div>
+    z
+    <div class="fakeAfter">a</div>
+  </div>
+  <div class="flexContainer">
+    <div class="fakeBefore">b</div>
+    x
+    <div>y</div>
+    z
+    <div class="fakeAfter">a</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001.html
new file mode 100644
index 000000000..0abf6ea89
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on
+     a flex container and treat them as flex items (e.g. honoring "align-self",
+     and not merging them into anonymous flex items formed around text).
+-->
+<html>
+<head>
+  <title>CSS Test: Testing that generated content nodes are treated as a flex items</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
+  <link rel="match" href="flexbox-with-pseudo-elements-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      height: 50px;
+      width: 300px;
+      margin-bottom: 2px;
+      background: lightgray;
+    }
+    div.withBefore::before {
+      align-self: center;
+      content: 'b';
+      background: yellow;
+    }
+    div.withAfter::after {
+      align-self: center;
+      content: 'a';
+      background: lightblue;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer withBefore">
+    x
+    <div>y</div>
+    z
+  </div>
+  <div class="flexContainer withAfter">
+    x
+    <div>y</div>
+    z
+  </div>
+  <div class="flexContainer withBefore withAfter">
+    x
+    <div>y</div>
+    z
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002-ref.html
new file mode 100644
index 000000000..48d17019b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002-ref.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter)
+     for the testcase's ::before and ::after generated content.
+
+     fakeBefore div is always the first child; fakeAfter is always the last.
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      margin-bottom: 2px;
+      background: lightgray;
+    }
+    .fakeBefore {
+      background: yellow;
+      /* This 'order' value should place us after the other elements, visually,
+         even though we're ::before. */
+      order: 1;
+    }
+    .fakeAfter {
+      background: lightblue;
+      order: -1;
+    }
+  </style>
+</head>
+<body>
+  <!-- 'b' should be at end, due to its high 'order' value: -->
+  <div class="flexContainer">
+    <div class="fakeBefore">b</div>
+    <div>I</div>
+  </div>
+
+  <!-- 'b' should be at beginning, since it's '::before' and the other item has
+        a matching 'order' value: -->
+  <div class="flexContainer">
+    <div class="fakeBefore">b</div>
+    <div style="order: 1">I</div>
+  </div>
+
+  <!-- 'a' should be at beginning, due to its low 'order' value: -->
+  <div class="flexContainer">
+    <div>I</div>
+    <div class="fakeAfter">a</div>
+  </div>
+
+  <!-- 'a' should be at end, since it's '::after' and the other item has
+        a matching 'order' value: -->
+  <div class="flexContainer">
+    <div style="order: -1">I</div>
+    <div class="fakeAfter">a</div>
+  </div>
+
+  <!-- As above, the ::after 'a' should be at beginning, and the ::before 'b'
+       should be at end, due to their 'order' values -->
+  <div class="flexContainer">
+    <div class="fakeBefore">b</div>
+    <div>I</div>
+    <div class="fakeAfter">a</div>
+  </div>
+
+  <!-- ...but now the normal item "I" has its order increased, so it'll go
+       at the end. -->
+  <div class="flexContainer">
+    <div class="fakeBefore">b</div>
+    <div style="order: 1">I</div>
+    <div class="fakeAfter">a</div>
+  </div>
+
+  <!-- ...and now the normal item "I" has its order reduced, so it'll go
+       at the beginning. -->
+  <div class="flexContainer">
+    <div class="fakeBefore">b</div>
+    <div style="order: -1">I</div>
+    <div class="fakeAfter">a</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002.html
new file mode 100644
index 000000000..6e0738e74
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-002.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on
+     a flex container and treat them as flex items (e.g. honoring "order").
+-->
+<html>
+<head>
+  <title>CSS Test: Testing that generated content nodes are treated as a flex items, and honor 'order'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
+  <link rel="match" href="flexbox-with-pseudo-elements-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      margin-bottom: 2px;
+      background: lightgray;
+    }
+    .withBefore::before {
+      content: 'b';
+      background: yellow;
+      /* This 'order' value should place us after the other elements, visually,
+         even though we're ::before. */
+      order: 1;
+    }
+    .withAfter::after {
+      content: 'a';
+      background: lightblue;
+      /* This 'order' value should place us before the other elements, visually,
+         even though we're ::after. */
+      order: -1;
+    }
+  </style>
+</head>
+<body>
+  <!-- 'b' should be at end, due to its high 'order' value: -->
+  <div class="flexContainer withBefore">
+    <div>I</div>
+  </div>
+
+  <!-- 'b' should be at beginning, since it's '::before' and the other item has
+        a matching 'order' value: -->
+  <div class="flexContainer withBefore">
+    <div style="order: 1">I</div>
+  </div>
+
+  <!-- 'a' should be at beginning, due to its low 'order' value: -->
+  <div class="flexContainer withAfter">
+    <div>I</div>
+  </div>
+
+  <!-- 'b' should be at beginning, since it's '::after' and the other item has
+        a matching 'order' value: -->
+  <div class="flexContainer withAfter">
+    <div style="order: -1">I</div>
+  </div>
+
+  <!-- As above, the ::after 'a' should be at beginning, and the ::before 'b'
+       should be at end, due to their 'order' values -->
+  <div class="flexContainer withBefore withAfter">
+    <div>I</div>
+  </div>
+
+  <!-- ...but now the normal item "I" has its order increased, so it'll go
+       at the end. -->
+  <div class="flexContainer withBefore withAfter">
+    <div style="order: 1">I</div>
+  </div>
+
+  <!-- ...and now the normal item "I" has its order reduced, so it'll go
+       at the beginning. -->
+  <div class="flexContainer withBefore withAfter">
+    <div style="order: -1">I</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003-ref.html
new file mode 100644
index 000000000..bdb973023
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003-ref.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter)
+     for the testcase's ::before and ::after generated content.
+
+     fakeBefore div is always the first child; fakeAfter is always the last.
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      height: 50px;
+      width: 300px;
+      margin-bottom: 2px;
+      background: lightgray;
+    }
+    .fakeBefore {
+      content: 'b';
+      background: yellow;
+      align-self: center;
+      order: 1;
+    }
+    .fakeAfter {
+      content: 'a';
+      background: lightblue;
+      align-self: center;
+      order: -1;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="fakeBefore">b</div>
+    x
+    <div>y</div>
+    z
+  </div>
+  <div class="flexContainer">
+    x
+    <div>y</div>
+    z
+    <div class="fakeAfter">a</div>
+  </div>
+  <div class="flexContainer">
+    <div class="fakeBefore">b</div>
+    x
+    <div>y</div>
+    z
+    <div class="fakeAfter">a</div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003.html
new file mode 100644
index 000000000..fe531b126
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-with-pseudo-elements-003.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase to ensure we handle ::before and ::after pseudo-elements on a
+     flex container, specifically when they've got display:table-row or
+     table-cell.
+
+     The table-row / table-cell 'display' values should be blockified, and the
+     pseudo-elements should be treated as flex items. (They should not get
+     wrapped in an anonymous table box.) -->
+<html>
+<head>
+  <title>CSS Test: Testing that generated content nodes with table-part display types are wrapped with an anonymous table, which forms a flex item</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
+  <link rel="match" href="flexbox-with-pseudo-elements-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      height: 50px;
+      width: 300px;
+      margin-bottom: 2px;
+      background: lightgray;
+    }
+    div.withBefore::before {
+      display: table-row;
+      content: 'b';
+      background: yellow;
+      /* If these "align-self" & "order" properties impact the rendering (as
+         they should), that verifies we're being treated as a flex item. */
+      align-self: center;
+      order: 1;
+    }
+    div.withAfter::after {
+      display: table-cell;
+      content: 'a';
+      background: lightblue;
+      /* If these "align-self" & "order" properties impact the rendering (as
+         they should), that verifies we're being treated as a flex item. */
+      align-self: center;
+      order: -1;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer withBefore">
+    x
+    <div>y</div>
+    z
+  </div>
+  <div class="flexContainer withAfter">
+    x
+    <div>y</div>
+    z
+  </div>
+  <div class="flexContainer withBefore withAfter">
+    x
+    <div>y</div>
+    z
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html
new file mode 100644
index 000000000..e2d59662a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-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>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: ltr; */
+      /* Testcase has writing-mode: horizontal-tb; */
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html
new file mode 100644
index 000000000..b2fb6d3f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: horizontal-tb'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction">
+  <link rel="match" href="flexbox-writing-mode-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: ltr;
+      writing-mode: horizontal-tb;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer" style="flex-flow: row wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div class="flexContainer" style="flex-flow: column wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002-ref.html
new file mode 100644
index 000000000..4c3166171
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-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>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: ltr; */
+      /* Testcase has writing-mode: vertical-rl; */
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002.html
new file mode 100644
index 000000000..8e1c724ed
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction">
+  <link rel="match" href="flexbox-writing-mode-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: ltr;
+      writing-mode: vertical-rl;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer" style="flex-flow: row wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div class="flexContainer" style="flex-flow: column wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003-ref.html
new file mode 100644
index 000000000..2d89eea66
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-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>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: ltr; */
+      /* Testcase has writing-mode: vertical-lr; */
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003.html
new file mode 100644
index 000000000..9b4450487
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction">
+  <link rel="match" href="flexbox-writing-mode-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: ltr;
+      writing-mode: vertical-lr;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer" style="flex-flow: row wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div class="flexContainer" style="flex-flow: column wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004-ref.html
new file mode 100644
index 000000000..1176830b5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-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>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: rtl; */
+      /* Testcase has writing-mode: horizontal-tb; */
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004.html
new file mode 100644
index 000000000..38f415868
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction">
+  <link rel="match" href="flexbox-writing-mode-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: rtl;
+      writing-mode: horizontal-tb;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer" style="flex-flow: row wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div class="flexContainer" style="flex-flow: column wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005-ref.html
new file mode 100644
index 000000000..a0894911b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-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>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: rtl; */
+      /* Testcase has writing-mode: vertical-rl; */
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005.html
new file mode 100644
index 000000000..65826fc2e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction">
+  <link rel="match" href="flexbox-writing-mode-005-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: rtl;
+      writing-mode: vertical-rl;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer" style="flex-flow: row wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div class="flexContainer" style="flex-flow: column wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006-ref.html
new file mode 100644
index 000000000..8c045354b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-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>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      /* Testcase has direction: rtl; */
+      /* Testcase has writing-mode: vertical-lr; */
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer"><!-- row wrap -->
+    <div class="item2"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item3"></div>
+  </div>
+  <div class="flexContainer"><!-- row wrap-reverse -->
+    <div class="item4"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap -->
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- row-reverse wrap-reverse -->
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+
+  <div class="flexContainer"><!-- column wrap -->
+    <div class="item3"></div><div class="item4"></div>
+    <div class="item1"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer"><!-- column wrap-reverse -->
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap -->
+    <div class="item4"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item1"></div>
+  </div>
+  <div class="flexContainer"><!-- column-reverse wrap-reverse -->
+    <div class="item2"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item3"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006.html
new file mode 100644
index 000000000..3e8352a45
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction">
+  <link rel="match" href="flexbox-writing-mode-006-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      direction: rtl;
+      writing-mode: vertical-lr;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer" style="flex-flow: row wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+  <div class="flexContainer" style="flex-flow: column wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007-ref.html
new file mode 100644
index 000000000..0d2e9207b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007.html
new file mode 100644
index 000000000..521af54af
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-007.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
+  <link rel="match" href="flexbox-writing-mode-007-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      writing-mode: horizontal-tb;
+      flex-flow: row wrap;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+
+    /* Classes applied to flex container, to customize its children
+     * (which should not affect their sizing):
+     */
+    .kids_horizontal_tb > * {
+      writing-mode: horizontal-tb;
+    }
+    .kids_vertical_lr > * {
+      writing-mode: vertical-lr;
+    }
+    .kids_vertical_rl > * {
+      writing-mode: vertical-rl;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_horizontal_tb">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_lr">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_rl">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008-ref.html
new file mode 100644
index 000000000..8a21dd65f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item3"></div>
+    <div class="item2"></div><div class="item4"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008.html
new file mode 100644
index 000000000..98fd83fbc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-008.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
+  <link rel="match" href="flexbox-writing-mode-008-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      writing-mode: vertical-lr;
+      flex-flow: row wrap;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+
+    /* Classes applied to flex container, to customize its children
+     * (which should not affect their sizing):
+     */
+    .kids_horizontal_tb > * {
+      writing-mode: horizontal-tb;
+    }
+    .kids_vertical_lr > * {
+      writing-mode: vertical-lr;
+    }
+    .kids_vertical_rl > * {
+      writing-mode: vertical-rl;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_horizontal_tb">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_lr">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_rl">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009-ref.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009-ref.html
new file mode 100644
index 000000000..5a96eb999
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+      float: left;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+  <div class="flexContainer">
+    <div class="item3"></div><div class="item1"></div>
+    <div class="item4"></div><div class="item2"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009.html b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009.html
new file mode 100644
index 000000000..edd63a982
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-009.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Verify that explicit sizes are honored on flex items whose writing-mode may differ from the flex container's writing-mode</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
+  <link rel="match" href="flexbox-writing-mode-009-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .flexContainer {
+      display: flex;
+      width: 40px;
+      height: 30px;
+      border: 1px solid gray;
+      margin-bottom: 5px;
+      writing-mode: vertical-rl;
+      flex-flow: row wrap;
+    }
+    .flexContainer > * {
+      width: 20px;
+      height: 15px;
+    }
+    .item1 {
+      /* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
+      background: cyan;
+    }
+    .item2 {
+      background: magenta;
+    }
+    .item3 {
+      background: yellow;
+    }
+    .item4 {
+      background: black;
+    }
+
+    /* Classes applied to flex container, to customize its children
+     * (which should not affect their sizing):
+     */
+    .kids_horizontal_tb > * {
+      writing-mode: horizontal-tb;
+    }
+    .kids_vertical_lr > * {
+      writing-mode: vertical-lr;
+    }
+    .kids_vertical_rl > * {
+      writing-mode: vertical-rl;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="flexContainer">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_horizontal_tb">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_lr">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+  <div class="flexContainer kids_vertical_rl">
+    <div class="item1"></div><div class="item2"></div>
+    <div class="item3"></div><div class="item4"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/reftest-stylo.list b/layout/reftests/w3c-css/submitted/flexbox/reftest-stylo.list
new file mode 100644
index 000000000..41635050d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest-stylo.list
@@ -0,0 +1,206 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests for absolutely-positioned children of a flex container
+== flexbox-abspos-child-001a.html flexbox-abspos-child-001a.html
+== flexbox-abspos-child-001b.html flexbox-abspos-child-001b.html
+
+# Tests for handling anonymous flex items
+== flexbox-anonymous-items-001.html flexbox-anonymous-items-001.html
+
+# Tests for alignment of flex lines (align-content property)
+== flexbox-align-content-horiz-001a.xhtml flexbox-align-content-horiz-001a.xhtml
+== flexbox-align-content-horiz-001b.xhtml flexbox-align-content-horiz-001b.xhtml
+== flexbox-align-content-vert-001a.xhtml flexbox-align-content-vert-001a.xhtml
+== flexbox-align-content-vert-001b.xhtml flexbox-align-content-vert-001b.xhtml
+
+# Tests for cross-axis alignment (align-self / align-items properties)
+== flexbox-align-self-baseline-horiz-001a.xhtml flexbox-align-self-baseline-horiz-001a.xhtml
+== flexbox-align-self-baseline-horiz-001b.xhtml flexbox-align-self-baseline-horiz-001b.xhtml
+== flexbox-align-self-baseline-horiz-002.xhtml flexbox-align-self-baseline-horiz-002.xhtml
+== flexbox-align-self-baseline-horiz-003.xhtml flexbox-align-self-baseline-horiz-003.xhtml
+== flexbox-align-self-baseline-horiz-004.xhtml flexbox-align-self-baseline-horiz-004.xhtml
+== flexbox-align-self-baseline-horiz-005.xhtml flexbox-align-self-baseline-horiz-005.xhtml
+
+== flexbox-align-self-stretch-vert-001.html flexbox-align-self-stretch-vert-001.html
+== flexbox-align-self-stretch-vert-002.html flexbox-align-self-stretch-vert-002.html
+
+== flexbox-align-self-horiz-001-block.xhtml flexbox-align-self-horiz-001-block.xhtml
+== flexbox-align-self-horiz-001-table.xhtml flexbox-align-self-horiz-001-table.xhtml
+random == flexbox-align-self-horiz-002.xhtml flexbox-align-self-horiz-002.xhtml
+== flexbox-align-self-horiz-003.xhtml flexbox-align-self-horiz-003.xhtml
+== flexbox-align-self-horiz-004.xhtml flexbox-align-self-horiz-004.xhtml
+== flexbox-align-self-horiz-005.xhtml flexbox-align-self-horiz-005.xhtml
+== flexbox-align-self-vert-001.xhtml flexbox-align-self-vert-001.xhtml
+== flexbox-align-self-vert-002.xhtml flexbox-align-self-vert-002.xhtml
+== flexbox-align-self-vert-003.xhtml flexbox-align-self-vert-003.xhtml
+== flexbox-align-self-vert-004.xhtml flexbox-align-self-vert-004.xhtml
+fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-001.xhtml flexbox-align-self-vert-rtl-001.xhtml
+== flexbox-align-self-vert-rtl-002.xhtml flexbox-align-self-vert-rtl-002.xhtml
+== flexbox-align-self-vert-rtl-003.xhtml flexbox-align-self-vert-rtl-003.xhtml
+== flexbox-align-self-vert-rtl-004.xhtml flexbox-align-self-vert-rtl-004.xhtml
+
+# Tests for computing the baseline of a flex container
+== flexbox-baseline-align-self-baseline-horiz-001.html flexbox-baseline-align-self-baseline-horiz-001.html
+== flexbox-baseline-align-self-baseline-vert-001.html flexbox-baseline-align-self-baseline-vert-001.html
+== flexbox-baseline-empty-001a.html flexbox-baseline-empty-001a.html
+== flexbox-baseline-empty-001b.html flexbox-baseline-empty-001b.html
+== flexbox-baseline-multi-item-horiz-001.html flexbox-baseline-multi-item-horiz-001.html
+== flexbox-baseline-multi-item-vert-001.html flexbox-baseline-multi-item-vert-001.html
+== flexbox-baseline-multi-line-horiz-001.html flexbox-baseline-multi-line-horiz-001.html
+== flexbox-baseline-multi-line-horiz-002.html flexbox-baseline-multi-line-horiz-002.html
+== flexbox-baseline-multi-line-horiz-003.html flexbox-baseline-multi-line-horiz-003.html
+== flexbox-baseline-multi-line-horiz-004.html flexbox-baseline-multi-line-horiz-004.html
+== flexbox-baseline-multi-line-vert-001.html flexbox-baseline-multi-line-vert-001.html
+== flexbox-baseline-multi-line-vert-002.html flexbox-baseline-multi-line-vert-002.html
+== flexbox-baseline-single-item-001a.html flexbox-baseline-single-item-001a.html
+== flexbox-baseline-single-item-001b.html flexbox-baseline-single-item-001b.html
+
+# Basic tests with with blocks as flex items
+== flexbox-basic-block-horiz-001.xhtml flexbox-basic-block-horiz-001.xhtml
+== flexbox-basic-block-vert-001.xhtml flexbox-basic-block-vert-001.xhtml
+
+# Tests for basic handling of <canvas>/<img>/etc as a flex item
+== flexbox-basic-canvas-horiz-001.xhtml flexbox-basic-canvas-horiz-001.xhtml
+== flexbox-basic-canvas-vert-001.xhtml flexbox-basic-canvas-vert-001.xhtml
+== flexbox-basic-fieldset-horiz-001.xhtml flexbox-basic-fieldset-horiz-001.xhtml
+== flexbox-basic-fieldset-vert-001.xhtml flexbox-basic-fieldset-vert-001.xhtml
+== flexbox-basic-iframe-horiz-001.xhtml flexbox-basic-iframe-horiz-001.xhtml
+== flexbox-basic-iframe-vert-001.xhtml flexbox-basic-iframe-vert-001.xhtml
+== flexbox-basic-img-horiz-001.xhtml flexbox-basic-img-horiz-001.xhtml
+== flexbox-basic-img-vert-001.xhtml flexbox-basic-img-vert-001.xhtml
+== flexbox-basic-textarea-horiz-001.xhtml flexbox-basic-textarea-horiz-001.xhtml
+== flexbox-basic-textarea-vert-001.xhtml flexbox-basic-textarea-vert-001.xhtml
+== flexbox-basic-video-horiz-001.xhtml flexbox-basic-video-horiz-001.xhtml
+== flexbox-basic-video-vert-001.xhtml flexbox-basic-video-vert-001.xhtml
+
+# Tests for "page-break-before" / "page-break-after" on a flex item
+== flexbox-break-request-horiz-001a.html flexbox-break-request-horiz-001a.html
+== flexbox-break-request-horiz-001b.html flexbox-break-request-horiz-001b.html
+== flexbox-break-request-horiz-002a.html flexbox-break-request-horiz-002a.html
+== flexbox-break-request-horiz-002b.html flexbox-break-request-horiz-002b.html
+== flexbox-break-request-vert-001a.html flexbox-break-request-vert-001a.html
+== flexbox-break-request-vert-001b.html flexbox-break-request-vert-001b.html
+== flexbox-break-request-vert-002a.html flexbox-break-request-vert-002a.html
+== flexbox-break-request-vert-002b.html flexbox-break-request-vert-002b.html
+
+# Tests for flex items with "visibility:collapse"
+== flexbox-collapsed-item-baseline-001.html flexbox-collapsed-item-baseline-001.html
+== flexbox-collapsed-item-horiz-001.html flexbox-collapsed-item-horiz-001.html
+== flexbox-collapsed-item-horiz-002.html flexbox-collapsed-item-horiz-002.html
+== flexbox-collapsed-item-horiz-003.html flexbox-collapsed-item-horiz-003.html
+
+# Tests for flex-flow shorthand property
+== flexbox-flex-flow-001.html flexbox-flex-flow-001.html
+== flexbox-flex-flow-002.html flexbox-flex-flow-002.html
+
+# Tests for flex-wrap property
+== flexbox-flex-wrap-horiz-001.html flexbox-flex-wrap-horiz-001.html
+== flexbox-flex-wrap-horiz-002.html flexbox-flex-wrap-horiz-002.html
+== flexbox-flex-wrap-vert-001.html flexbox-flex-wrap-vert-001.html
+== flexbox-flex-wrap-vert-002.html flexbox-flex-wrap-vert-002.html
+
+# Tests for intrinsic ratio interactions on flex items.
+# (Note that tests 001 and 002 share a reference case; they render the same,
+# because they don't do any direction-specific stretching/flexing.)
+== flexbox-intrinsic-ratio-001.html flexbox-intrinsic-ratio-001.html
+== flexbox-intrinsic-ratio-002.html flexbox-intrinsic-ratio-002.html
+== flexbox-intrinsic-ratio-003.html flexbox-intrinsic-ratio-003.html
+== flexbox-intrinsic-ratio-004.html flexbox-intrinsic-ratio-004.html
+== flexbox-intrinsic-ratio-005.html flexbox-intrinsic-ratio-005.html
+== flexbox-intrinsic-ratio-006.html flexbox-intrinsic-ratio-006.html
+
+# Tests for flex items as (pseudo) stacking contexts
+== flexbox-items-as-stacking-contexts-001.xhtml flexbox-items-as-stacking-contexts-001.xhtml
+== flexbox-items-as-stacking-contexts-002.html flexbox-items-as-stacking-contexts-002.html
+== flexbox-items-as-stacking-contexts-003.html flexbox-items-as-stacking-contexts-003.html
+
+# Tests for main-axis alignment (jusify-content property)
+== flexbox-justify-content-horiz-001a.xhtml flexbox-justify-content-horiz-001a.xhtml
+== flexbox-justify-content-horiz-001b.xhtml flexbox-justify-content-horiz-001b.xhtml
+== flexbox-justify-content-horiz-002.xhtml flexbox-justify-content-horiz-002.xhtml
+== flexbox-justify-content-horiz-003.xhtml flexbox-justify-content-horiz-003.xhtml
+== flexbox-justify-content-horiz-004.xhtml flexbox-justify-content-horiz-004.xhtml
+== flexbox-justify-content-horiz-005.xhtml flexbox-justify-content-horiz-005.xhtml
+== flexbox-justify-content-vert-001a.xhtml flexbox-justify-content-vert-001a.xhtml
+== flexbox-justify-content-vert-001b.xhtml flexbox-justify-content-vert-001b.xhtml
+== flexbox-justify-content-vert-002.xhtml flexbox-justify-content-vert-002.xhtml
+== flexbox-justify-content-vert-003.xhtml flexbox-justify-content-vert-003.xhtml
+== flexbox-justify-content-vert-004.xhtml flexbox-justify-content-vert-004.xhtml
+== flexbox-justify-content-vert-005.xhtml flexbox-justify-content-vert-005.xhtml
+
+# Tests for flexbox with margin, border, and/or padding on flex items
+== flexbox-margin-auto-horiz-001.xhtml flexbox-margin-auto-horiz-001.xhtml
+== flexbox-margin-auto-horiz-002.xhtml flexbox-margin-auto-horiz-002.xhtml
+== flexbox-mbp-horiz-001.xhtml flexbox-mbp-horiz-001.xhtml
+== flexbox-mbp-horiz-001-reverse.xhtml flexbox-mbp-horiz-001-reverse.xhtml
+== flexbox-mbp-horiz-001-rtl.xhtml flexbox-mbp-horiz-001-rtl.xhtml
+== flexbox-mbp-horiz-001-rtl-reverse.xhtml flexbox-mbp-horiz-001-rtl-reverse.xhtml
+random == flexbox-mbp-horiz-002a.xhtml flexbox-mbp-horiz-002a.xhtml
+random == flexbox-mbp-horiz-002b.xhtml flexbox-mbp-horiz-002b.xhtml
+== flexbox-mbp-horiz-003.xhtml flexbox-mbp-horiz-003.xhtml
+== flexbox-mbp-horiz-003-reverse.xhtml flexbox-mbp-horiz-003-reverse.xhtml
+== flexbox-mbp-horiz-004.xhtml flexbox-mbp-horiz-004.xhtml
+
+# Tests for min-height:auto / min-width:auto on flex items
+== flexbox-min-height-auto-001.html flexbox-min-height-auto-001.html
+== flexbox-min-height-auto-002a.html flexbox-min-height-auto-002a.html
+== flexbox-min-height-auto-002b.html flexbox-min-height-auto-002b.html
+# bug 1055354
+== flexbox-min-height-auto-002c.html flexbox-min-height-auto-002c.html
+== flexbox-min-height-auto-003.html flexbox-min-height-auto-003.html
+== flexbox-min-height-auto-004.html flexbox-min-height-auto-004.html
+== flexbox-min-width-auto-001.html flexbox-min-width-auto-001.html
+== flexbox-min-width-auto-002a.html flexbox-min-width-auto-002a.html
+== flexbox-min-width-auto-002b.html flexbox-min-width-auto-002b.html
+== flexbox-min-width-auto-002c.html flexbox-min-width-auto-002c.html
+== flexbox-min-width-auto-003.html flexbox-min-width-auto-003.html
+== flexbox-min-width-auto-004.html flexbox-min-width-auto-004.html
+
+# Tests for flex containers with the "overflow" property set
+== flexbox-overflow-horiz-001.html flexbox-overflow-horiz-001.html
+== flexbox-overflow-horiz-002.html flexbox-overflow-horiz-002.html
+== flexbox-overflow-horiz-003.html flexbox-overflow-horiz-003.html
+== flexbox-overflow-horiz-004.html flexbox-overflow-horiz-004.html
+== flexbox-overflow-horiz-005.html flexbox-overflow-horiz-005.html
+== flexbox-overflow-vert-001.html flexbox-overflow-vert-001.html
+== flexbox-overflow-vert-002.html flexbox-overflow-vert-002.html
+== flexbox-overflow-vert-003.html flexbox-overflow-vert-003.html
+== flexbox-overflow-vert-004.html flexbox-overflow-vert-004.html
+== flexbox-overflow-vert-005.html flexbox-overflow-vert-005.html
+
+# Tests for the order in which we paint flex items
+== flexbox-paint-ordering-001.xhtml flexbox-paint-ordering-001.xhtml
+== flexbox-paint-ordering-002.xhtml flexbox-paint-ordering-002.xhtml
+
+# Tests for "display:flex" on root node
+== flexbox-root-node-001a.html flexbox-root-node-001a.html
+== flexbox-root-node-001b.html flexbox-root-node-001b.html
+
+# Tests for sizing of flex containers, e.g. under min/max size constraints
+== flexbox-sizing-horiz-001.xhtml flexbox-sizing-horiz-001.xhtml
+== flexbox-sizing-horiz-002.xhtml flexbox-sizing-horiz-002.xhtml
+== flexbox-sizing-vert-001.xhtml flexbox-sizing-vert-001.xhtml
+== flexbox-sizing-vert-002.xhtml flexbox-sizing-vert-002.xhtml
+
+# Tests for table-fixup *not happening* on direct children of a flex container
+== flexbox-table-fixup-001.xhtml flexbox-table-fixup-001.xhtml
+
+# Tests for handling of whitespace within anonymous flex items.
+== flexbox-whitespace-handling-001a.xhtml flexbox-whitespace-handling-001a.xhtml
+== flexbox-whitespace-handling-001b.xhtml flexbox-whitespace-handling-001b.xhtml
+== flexbox-whitespace-handling-002.xhtml flexbox-whitespace-handling-002.xhtml
+
+# Tests for flex containers with pseudo-elements
+== flexbox-with-pseudo-elements-001.html flexbox-with-pseudo-elements-001.html
+== flexbox-with-pseudo-elements-002.html flexbox-with-pseudo-elements-002.html
+== flexbox-with-pseudo-elements-003.html flexbox-with-pseudo-elements-003.html
+
+# Tests for combined influence of 'writing-mode' & 'direction' on flex axes
+== flexbox-writing-mode-001.html flexbox-writing-mode-001.html
+== flexbox-writing-mode-002.html flexbox-writing-mode-002.html
+== flexbox-writing-mode-003.html flexbox-writing-mode-003.html
+== flexbox-writing-mode-004.html flexbox-writing-mode-004.html
+== flexbox-writing-mode-005.html flexbox-writing-mode-005.html
+== flexbox-writing-mode-006.html flexbox-writing-mode-006.html
+== flexbox-writing-mode-007.html flexbox-writing-mode-007.html
+== flexbox-writing-mode-008.html flexbox-writing-mode-008.html
+== flexbox-writing-mode-009.html flexbox-writing-mode-009.html
diff --git a/layout/reftests/w3c-css/submitted/flexbox/reftest.list b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
new file mode 100644
index 000000000..a623a0b59
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -0,0 +1,211 @@
+# Tests for absolutely-positioned children of a flex container
+== flexbox-abspos-child-001a.html flexbox-abspos-child-001-ref.html
+== flexbox-abspos-child-001b.html flexbox-abspos-child-001-ref.html
+
+# Tests for handling anonymous flex items
+== flexbox-anonymous-items-001.html flexbox-anonymous-items-001-ref.html
+
+# Tests for alignment of flex lines (align-content property)
+== flexbox-align-content-horiz-001a.xhtml flexbox-align-content-horiz-001-ref.xhtml
+== flexbox-align-content-horiz-001b.xhtml flexbox-align-content-horiz-001-ref.xhtml
+== flexbox-align-content-vert-001a.xhtml  flexbox-align-content-vert-001-ref.xhtml
+== flexbox-align-content-vert-001b.xhtml  flexbox-align-content-vert-001-ref.xhtml
+
+# Tests for cross-axis alignment (align-self / align-items properties)
+== flexbox-align-self-baseline-horiz-001a.xhtml flexbox-align-self-baseline-horiz-001-ref.xhtml
+== flexbox-align-self-baseline-horiz-001b.xhtml flexbox-align-self-baseline-horiz-001-ref.xhtml
+== flexbox-align-self-baseline-horiz-002.xhtml flexbox-align-self-baseline-horiz-002-ref.xhtml
+== flexbox-align-self-baseline-horiz-003.xhtml flexbox-align-self-baseline-horiz-003-ref.xhtml
+== flexbox-align-self-baseline-horiz-004.xhtml flexbox-align-self-baseline-horiz-004-ref.xhtml
+== flexbox-align-self-baseline-horiz-005.xhtml flexbox-align-self-baseline-horiz-005-ref.xhtml
+== flexbox-align-self-baseline-horiz-006.xhtml flexbox-align-self-baseline-horiz-006-ref.xhtml
+== flexbox-align-self-baseline-horiz-007.xhtml flexbox-align-self-baseline-horiz-007-ref.xhtml
+
+== flexbox-align-self-stretch-vert-001.html flexbox-align-self-stretch-vert-001-ref.html
+== flexbox-align-self-stretch-vert-002.html flexbox-align-self-stretch-vert-002-ref.html
+
+== flexbox-align-self-horiz-001-block.xhtml  flexbox-align-self-horiz-001-ref.xhtml
+== flexbox-align-self-horiz-001-table.xhtml  flexbox-align-self-horiz-001-ref.xhtml
+== flexbox-align-self-horiz-002.xhtml  flexbox-align-self-horiz-002-ref.xhtml
+== flexbox-align-self-horiz-003.xhtml  flexbox-align-self-horiz-003-ref.xhtml
+== flexbox-align-self-horiz-004.xhtml  flexbox-align-self-horiz-004-ref.xhtml
+== flexbox-align-self-horiz-005.xhtml  flexbox-align-self-horiz-005-ref.xhtml
+== flexbox-align-self-vert-001.xhtml  flexbox-align-self-vert-001-ref.xhtml
+== flexbox-align-self-vert-002.xhtml  flexbox-align-self-vert-002-ref.xhtml
+== flexbox-align-self-vert-003.xhtml  flexbox-align-self-vert-003-ref.xhtml
+== flexbox-align-self-vert-004.xhtml  flexbox-align-self-vert-004-ref.xhtml
+fuzzy-if(Android,158,32) == flexbox-align-self-vert-rtl-001.xhtml  flexbox-align-self-vert-rtl-001-ref.xhtml
+== flexbox-align-self-vert-rtl-002.xhtml  flexbox-align-self-vert-rtl-002-ref.xhtml
+== flexbox-align-self-vert-rtl-003.xhtml  flexbox-align-self-vert-rtl-003-ref.xhtml
+== flexbox-align-self-vert-rtl-004.xhtml  flexbox-align-self-vert-rtl-004-ref.xhtml
+
+# Tests for computing the baseline of a flex container
+== flexbox-baseline-align-self-baseline-horiz-001.html flexbox-baseline-align-self-baseline-horiz-001-ref.html
+== flexbox-baseline-align-self-baseline-vert-001.html flexbox-baseline-align-self-baseline-vert-001-ref.html
+== flexbox-baseline-empty-001a.html flexbox-baseline-empty-001-ref.html
+== flexbox-baseline-empty-001b.html flexbox-baseline-empty-001-ref.html
+== flexbox-baseline-multi-item-horiz-001.html flexbox-baseline-multi-item-horiz-001-ref.html
+== flexbox-baseline-multi-item-vert-001.html flexbox-baseline-multi-item-vert-001-ref.html
+== flexbox-baseline-multi-line-horiz-001.html flexbox-baseline-multi-line-horiz-001-ref.html
+== flexbox-baseline-multi-line-horiz-002.html flexbox-baseline-multi-line-horiz-002-ref.html
+== flexbox-baseline-multi-line-horiz-003.html flexbox-baseline-multi-line-horiz-003-ref.html
+== flexbox-baseline-multi-line-horiz-004.html flexbox-baseline-multi-line-horiz-004-ref.html
+== flexbox-baseline-multi-line-vert-001.html flexbox-baseline-multi-line-vert-001-ref.html
+== flexbox-baseline-multi-line-vert-002.html flexbox-baseline-multi-line-vert-002-ref.html
+== flexbox-baseline-single-item-001a.html flexbox-baseline-single-item-001-ref.html
+== flexbox-baseline-single-item-001b.html flexbox-baseline-single-item-001-ref.html
+
+# Basic tests with with blocks as flex items
+== flexbox-basic-block-horiz-001.xhtml flexbox-basic-block-horiz-001-ref.xhtml
+== flexbox-basic-block-vert-001.xhtml flexbox-basic-block-vert-001-ref.xhtml
+
+# Tests for basic handling of <canvas>/<img>/etc as a flex item
+== flexbox-basic-canvas-horiz-001.xhtml   flexbox-basic-canvas-horiz-001-ref.xhtml
+== flexbox-basic-canvas-vert-001.xhtml    flexbox-basic-canvas-vert-001-ref.xhtml
+== flexbox-basic-fieldset-horiz-001.xhtml flexbox-basic-fieldset-horiz-001-ref.xhtml
+== flexbox-basic-fieldset-vert-001.xhtml  flexbox-basic-fieldset-vert-001-ref.xhtml
+== flexbox-basic-iframe-horiz-001.xhtml   flexbox-basic-iframe-horiz-001-ref.xhtml
+== flexbox-basic-iframe-vert-001.xhtml    flexbox-basic-iframe-vert-001-ref.xhtml
+== flexbox-basic-img-horiz-001.xhtml      flexbox-basic-img-horiz-001-ref.xhtml
+== flexbox-basic-img-vert-001.xhtml       flexbox-basic-img-vert-001-ref.xhtml
+== flexbox-basic-textarea-horiz-001.xhtml flexbox-basic-textarea-horiz-001-ref.xhtml
+== flexbox-basic-textarea-vert-001.xhtml  flexbox-basic-textarea-vert-001-ref.xhtml
+== flexbox-basic-video-horiz-001.xhtml    flexbox-basic-video-horiz-001-ref.xhtml
+== flexbox-basic-video-vert-001.xhtml     flexbox-basic-video-vert-001-ref.xhtml
+
+# Tests for "page-break-before" / "page-break-after" on a flex item
+== flexbox-break-request-horiz-001a.html flexbox-break-request-horiz-001-ref.html
+== flexbox-break-request-horiz-001b.html flexbox-break-request-horiz-001-ref.html
+== flexbox-break-request-horiz-002a.html flexbox-break-request-horiz-002-ref.html
+== flexbox-break-request-horiz-002b.html flexbox-break-request-horiz-002-ref.html
+== flexbox-break-request-vert-001a.html  flexbox-break-request-vert-001-ref.html
+== flexbox-break-request-vert-001b.html  flexbox-break-request-vert-001-ref.html
+== flexbox-break-request-vert-002a.html  flexbox-break-request-vert-002-ref.html
+== flexbox-break-request-vert-002b.html  flexbox-break-request-vert-002-ref.html
+
+# Tests for flex items with "visibility:collapse"
+== flexbox-collapsed-item-baseline-001.html flexbox-collapsed-item-baseline-001-ref.html
+== flexbox-collapsed-item-horiz-001.html flexbox-collapsed-item-horiz-001-ref.html
+== flexbox-collapsed-item-horiz-002.html flexbox-collapsed-item-horiz-002-ref.html
+== flexbox-collapsed-item-horiz-003.html flexbox-collapsed-item-horiz-003-ref.html
+
+# Tests for flex-flow shorthand property
+== flexbox-flex-flow-001.html flexbox-flex-flow-001-ref.html
+== flexbox-flex-flow-002.html flexbox-flex-flow-002-ref.html
+
+# Tests for flex-wrap property
+== flexbox-flex-wrap-horiz-001.html flexbox-flex-wrap-horiz-001-ref.html
+== flexbox-flex-wrap-horiz-002.html flexbox-flex-wrap-horiz-002-ref.html
+== flexbox-flex-wrap-vert-001.html  flexbox-flex-wrap-vert-001-ref.html
+== flexbox-flex-wrap-vert-002.html  flexbox-flex-wrap-vert-002-ref.html
+
+# Tests for intrinsic ratio interactions on flex items.
+# (Note that tests 001 and 002 share a reference case; they render the same,
+# because they don't do any direction-specific stretching/flexing.)
+== flexbox-intrinsic-ratio-001.html flexbox-intrinsic-ratio-001-ref.html
+== flexbox-intrinsic-ratio-002.html flexbox-intrinsic-ratio-001-ref.html
+== flexbox-intrinsic-ratio-003.html flexbox-intrinsic-ratio-003-ref.html
+== flexbox-intrinsic-ratio-004.html flexbox-intrinsic-ratio-004-ref.html
+== flexbox-intrinsic-ratio-005.html flexbox-intrinsic-ratio-005-ref.html
+== flexbox-intrinsic-ratio-006.html flexbox-intrinsic-ratio-006-ref.html
+
+# Tests for flex items as (pseudo) stacking contexts
+== flexbox-items-as-stacking-contexts-001.xhtml flexbox-items-as-stacking-contexts-001-ref.xhtml
+== flexbox-items-as-stacking-contexts-002.html flexbox-items-as-stacking-contexts-002-ref.html
+== flexbox-items-as-stacking-contexts-003.html flexbox-items-as-stacking-contexts-003-ref.html
+
+# Tests for main-axis alignment (jusify-content property)
+== flexbox-justify-content-horiz-001a.xhtml flexbox-justify-content-horiz-001-ref.xhtml
+== flexbox-justify-content-horiz-001b.xhtml flexbox-justify-content-horiz-001-ref.xhtml
+== flexbox-justify-content-horiz-002.xhtml flexbox-justify-content-horiz-002-ref.xhtml
+== flexbox-justify-content-horiz-003.xhtml flexbox-justify-content-horiz-003-ref.xhtml
+== flexbox-justify-content-horiz-004.xhtml flexbox-justify-content-horiz-004-ref.xhtml
+== flexbox-justify-content-horiz-005.xhtml flexbox-justify-content-horiz-005-ref.xhtml
+== flexbox-justify-content-vert-001a.xhtml flexbox-justify-content-vert-001-ref.xhtml
+== flexbox-justify-content-vert-001b.xhtml flexbox-justify-content-vert-001-ref.xhtml
+== flexbox-justify-content-vert-002.xhtml flexbox-justify-content-vert-002-ref.xhtml
+== flexbox-justify-content-vert-003.xhtml flexbox-justify-content-vert-003-ref.xhtml
+== flexbox-justify-content-vert-004.xhtml flexbox-justify-content-vert-004-ref.xhtml
+== flexbox-justify-content-vert-005.xhtml flexbox-justify-content-vert-005-ref.xhtml
+
+# Tests for flexbox with margin, border, and/or padding on flex items
+== flexbox-margin-auto-horiz-001.xhtml     flexbox-margin-auto-horiz-001-ref.xhtml
+== flexbox-margin-auto-horiz-002.xhtml     flexbox-margin-auto-horiz-002-ref.xhtml
+== flexbox-mbp-horiz-001.xhtml             flexbox-mbp-horiz-001-ref.xhtml
+== flexbox-mbp-horiz-001-reverse.xhtml     flexbox-mbp-horiz-001-reverse-ref.xhtml
+== flexbox-mbp-horiz-001-rtl.xhtml         flexbox-mbp-horiz-001-reverse-ref.xhtml
+== flexbox-mbp-horiz-001-rtl-reverse.xhtml flexbox-mbp-horiz-001-ref.xhtml
+== flexbox-mbp-horiz-002a.xhtml            flexbox-mbp-horiz-002-ref.xhtml
+== flexbox-mbp-horiz-002b.xhtml            flexbox-mbp-horiz-002-ref.xhtml
+== flexbox-mbp-horiz-003.xhtml             flexbox-mbp-horiz-003-ref.xhtml
+== flexbox-mbp-horiz-003-reverse.xhtml     flexbox-mbp-horiz-003-reverse-ref.xhtml
+== flexbox-mbp-horiz-004.xhtml             flexbox-mbp-horiz-004-ref.xhtml
+
+# Tests for min-height:auto / min-width:auto on flex items
+== flexbox-min-height-auto-001.html flexbox-min-height-auto-001-ref.html
+== flexbox-min-height-auto-002a.html flexbox-min-height-auto-002-ref.html
+fails == flexbox-min-height-auto-002b.html flexbox-min-height-auto-002-ref.html # bug 1055354
+== flexbox-min-height-auto-002c.html flexbox-min-height-auto-002-ref.html
+== flexbox-min-height-auto-003.html flexbox-min-height-auto-003-ref.html
+== flexbox-min-height-auto-004.html flexbox-min-height-auto-004-ref.html
+== flexbox-min-width-auto-001.html flexbox-min-width-auto-001-ref.html
+== flexbox-min-width-auto-002a.html flexbox-min-width-auto-002-ref.html
+== flexbox-min-width-auto-002b.html flexbox-min-width-auto-002-ref.html
+== flexbox-min-width-auto-002c.html flexbox-min-width-auto-002-ref.html
+== flexbox-min-width-auto-003.html flexbox-min-width-auto-003-ref.html
+== flexbox-min-width-auto-004.html flexbox-min-width-auto-004-ref.html
+
+# Tests for flex containers with the "overflow" property set
+== flexbox-overflow-horiz-001.html flexbox-overflow-horiz-001-ref.html
+== flexbox-overflow-horiz-002.html flexbox-overflow-horiz-002-ref.html
+== flexbox-overflow-horiz-003.html flexbox-overflow-horiz-003-ref.html
+== flexbox-overflow-horiz-004.html flexbox-overflow-horiz-004-ref.html
+== flexbox-overflow-horiz-005.html flexbox-overflow-horiz-005-ref.html
+== flexbox-overflow-vert-001.html flexbox-overflow-vert-001-ref.html
+== flexbox-overflow-vert-002.html flexbox-overflow-vert-002-ref.html
+== flexbox-overflow-vert-003.html flexbox-overflow-vert-003-ref.html
+== flexbox-overflow-vert-004.html flexbox-overflow-vert-004-ref.html
+== flexbox-overflow-vert-005.html flexbox-overflow-vert-005-ref.html
+
+# Tests for the order in which we paint flex items
+== flexbox-paint-ordering-001.xhtml flexbox-paint-ordering-001-ref.xhtml
+== flexbox-paint-ordering-002.xhtml flexbox-paint-ordering-002-ref.xhtml
+
+# Tests for "display:flex" on root node
+== flexbox-root-node-001a.html flexbox-root-node-001-ref.html
+== flexbox-root-node-001b.html flexbox-root-node-001-ref.html
+
+# Tests for sizing of flex containers, e.g. under min/max size constraints
+== flexbox-sizing-horiz-001.xhtml flexbox-sizing-horiz-001-ref.xhtml
+== flexbox-sizing-horiz-002.xhtml flexbox-sizing-horiz-002-ref.xhtml
+== flexbox-sizing-vert-001.xhtml  flexbox-sizing-vert-001-ref.xhtml
+== flexbox-sizing-vert-002.xhtml  flexbox-sizing-vert-002-ref.xhtml
+
+# Tests for table-fixup *not happening* on direct children of a flex container
+== flexbox-table-fixup-001.xhtml flexbox-table-fixup-001-ref.xhtml
+
+# Tests for handling of whitespace within anonymous flex items.
+== flexbox-whitespace-handling-001a.xhtml flexbox-whitespace-handling-001-ref.xhtml
+== flexbox-whitespace-handling-001b.xhtml flexbox-whitespace-handling-001-ref.xhtml
+== flexbox-whitespace-handling-002.xhtml  flexbox-whitespace-handling-002-ref.xhtml
+
+# Tests for flex containers with pseudo-elements
+== flexbox-with-pseudo-elements-001.html flexbox-with-pseudo-elements-001-ref.html
+== flexbox-with-pseudo-elements-002.html flexbox-with-pseudo-elements-002-ref.html
+== flexbox-with-pseudo-elements-003.html flexbox-with-pseudo-elements-003-ref.html
+
+# Tests for combined influence of 'writing-mode' & 'direction' on flex axes
+== flexbox-writing-mode-001.html flexbox-writing-mode-001-ref.html
+== flexbox-writing-mode-002.html flexbox-writing-mode-002-ref.html
+== flexbox-writing-mode-003.html flexbox-writing-mode-003-ref.html
+== flexbox-writing-mode-004.html flexbox-writing-mode-004-ref.html
+== flexbox-writing-mode-005.html flexbox-writing-mode-005-ref.html
+== flexbox-writing-mode-006.html flexbox-writing-mode-006-ref.html
+== flexbox-writing-mode-007.html flexbox-writing-mode-007-ref.html
+== flexbox-writing-mode-008.html flexbox-writing-mode-008-ref.html
+== flexbox-writing-mode-009.html flexbox-writing-mode-009-ref.html
+
+# Single-line size clamping
+== flexbox-single-line-clamp-1.html flexbox-single-line-clamp-1-ref.html
+== flexbox-single-line-clamp-2.html flexbox-single-line-clamp-2-ref.html
+== flexbox-single-line-clamp-3.html flexbox-single-line-clamp-3-ref.html
diff --git a/layout/reftests/w3c-css/submitted/flexbox/support/Ahem.ttf b/layout/reftests/w3c-css/submitted/flexbox/support/Ahem.ttf
new file mode 100644
index 000000000..ac81cb031
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/support/Ahem.ttf
diff --git a/layout/reftests/w3c-css/submitted/flexbox/support/ahem.css b/layout/reftests/w3c-css/submitted/flexbox/support/ahem.css
new file mode 100644
index 000000000..82ee46679
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/support/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Ahem";
+  src: url(./Ahem.ttf);
+}
diff --git a/layout/reftests/w3c-css/submitted/flexbox/support/solidblue.png b/layout/reftests/w3c-css/submitted/flexbox/support/solidblue.png
new file mode 100644
index 000000000..a64b6a425
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/support/solidblue.png
diff --git a/layout/reftests/w3c-css/submitted/fonts3/font-size-adjust-zero-1.html b/layout/reftests/w3c-css/submitted/fonts3/font-size-adjust-zero-1.html
new file mode 100644
index 000000000..ea1e57453
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/fonts3/font-size-adjust-zero-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<title>CSS Test: font-size-adjust: 0</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-size-adjust-prop">
+<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
+<link rel="match" href="font-size-zero-2-ref.html">
+<meta name="flags" content="">
+<style>
+/* spec ambiguous whether font-size-adjust influences line-height: normal */
+body { line-height: 1.2 }
+
+p { margin: 1em 0 }
+p.zero { font-size-adjust: 0 }
+</style>
+
+<p>before</p>
+<p class="zero">zero</p>
+<p>after</p>
diff --git a/layout/reftests/w3c-css/submitted/fonts3/font-size-adjust-zero-2.html b/layout/reftests/w3c-css/submitted/fonts3/font-size-adjust-zero-2.html
new file mode 100644
index 000000000..0fadcd458
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/fonts3/font-size-adjust-zero-2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<title>CSS Test: font-size-adjust: 0</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-size-adjust-prop">
+<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
+<link rel="match" href="font-size-zero-2-ref.html">
+<meta name="flags" content="">
+<style>
+/* spec ambiguous whether font-size-adjust influences line-height: normal */
+body { line-height: 1.2 }
+span { line-height: 0 }
+
+p { margin: 1em 0 }
+span.zero { font-size-adjust: 0 }
+</style>
+
+<p>before</p>
+<p><span class="zero">zero</span></p>
+<p>after</p>
diff --git a/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-1-notref.html b/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-1-notref.html
new file mode 100644
index 000000000..9e95ca66e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-1-notref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<title>CSS Test Reference</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<meta name="flags" content="">
+<style>
+/* spec ambiguous whether font-size-adjust influences line-height: normal */
+body { line-height: 1.2 }
+</style>
+
+<p>before</p>
+<p>zero</p>
+<p>after</p>
diff --git a/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-1-ref.html b/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-1-ref.html
new file mode 100644
index 000000000..f3bdd53d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<title>CSS Test Reference</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="mismatch" href="font-size-zero-1-notref.html">
+<meta name="flags" content="">
+<style>
+/* spec ambiguous whether font-size-adjust influences line-height: normal */
+body { line-height: 1.2 }
+
+p { margin: 1em 0 }
+p.first { margin-bottom: 2em }
+</style>
+
+<p class="first">before</p>
+<p>after</p>
diff --git a/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-1.html b/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-1.html
new file mode 100644
index 000000000..9b7b3e6d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<title>CSS Test: font-size: 0</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-size-prop">
+<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
+<link rel="match" href="font-size-zero-1-ref.html">
+<meta name="flags" content="">
+<style>
+/* spec ambiguous whether font-size-adjust influences line-height: normal */
+body { line-height: 1.2 }
+
+p { margin: 1em 0 }
+p.zero { font-size: 0 }
+</style>
+
+<p>before</p>
+<p class="zero">zero</p>
+<p>after</p>
diff --git a/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-2-ref.html b/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-2-ref.html
new file mode 100644
index 000000000..2aea76d74
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-2-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<title>CSS Test Reference</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<meta name="flags" content="">
+<style>
+/* spec ambiguous whether font-size-adjust influences line-height: normal */
+body { line-height: 1.2 }
+</style>
+
+<p>before</p>
+<p>&nbsp;</p>
+<p>after</p>
diff --git a/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-2.html b/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-2.html
new file mode 100644
index 000000000..5b5aaa594
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/fonts3/font-size-zero-2.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<title>CSS Test: font-size: 0</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="http://www.w3.org/TR/css3-fonts/#font-size-prop">
+<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">
+<link rel="match" href="font-size-zero-2-ref.html">
+<meta name="flags" content="">
+<style>
+/* spec ambiguous whether font-size-adjust influences line-height: normal */
+body { line-height: 1.2 }
+
+p { margin: 1em 0 }
+span.zero { font-size: 0 }
+</style>
+
+<p>before</p>
+<p><span class="zero">zero</span></p>
+<p>after</p>
diff --git a/layout/reftests/w3c-css/submitted/fonts3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/fonts3/reftest-stylo.list
new file mode 100644
index 000000000..c8224dcab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/fonts3/reftest-stylo.list
@@ -0,0 +1,6 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== font-size-zero-1.html font-size-zero-1.html
+== font-size-zero-1-ref.html font-size-zero-1-ref.html
+== font-size-zero-2.html font-size-zero-2.html
+== font-size-adjust-zero-1.html font-size-adjust-zero-1.html
+== font-size-adjust-zero-2.html font-size-adjust-zero-2.html
diff --git a/layout/reftests/w3c-css/submitted/fonts3/reftest.list b/layout/reftests/w3c-css/submitted/fonts3/reftest.list
new file mode 100644
index 000000000..b8900e86a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/fonts3/reftest.list
@@ -0,0 +1,5 @@
+== font-size-zero-1.html font-size-zero-1-ref.html
+!= font-size-zero-1-ref.html font-size-zero-1-notref.html
+== font-size-zero-2.html font-size-zero-2-ref.html
+== font-size-adjust-zero-1.html font-size-zero-2-ref.html
+== font-size-adjust-zero-2.html font-size-zero-2-ref.html
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html
new file mode 100644
index 000000000..8b5cce62b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html
new file mode 100644
index 000000000..a6dfd9581
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html
new file mode 100644
index 000000000..572d30eee
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.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 Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html
new file mode 100644
index 000000000..39bbf249d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.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 Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html
new file mode 100644
index 000000000..b126b4816
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.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 Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html
new file mode 100644
index 000000000..66c165e99
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.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 Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html
new file mode 100644
index 000000000..337775d96
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html
new file mode 100644
index 000000000..4e49d0fbf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html
new file mode 100644
index 000000000..e42f05f03
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.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 Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html
new file mode 100644
index 000000000..b03bafe86
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.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 Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html
new file mode 100644
index 000000000..f4aa820e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.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 Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html
new file mode 100644
index 000000000..f18e4818a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.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 Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001-ref.html
new file mode 100644
index 000000000..84fa4d5ac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.html
new file mode 100644
index 000000000..f067b335c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html
new file mode 100644
index 000000000..48098656f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html
new file mode 100644
index 000000000..4debef17e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html
new file mode 100644
index 000000000..ff6cb4b06
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002-ref.html
new file mode 100644
index 000000000..3a8a5b542
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.html
new file mode 100644
index 000000000..5c82003b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html
new file mode 100644
index 000000000..bc8703c97
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html
new file mode 100644
index 000000000..76f85f8ca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html
new file mode 100644
index 000000000..b8551be1a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003-ref.html
new file mode 100644
index 000000000..fde7f9fc9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.html
new file mode 100644
index 000000000..34b223601
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html
new file mode 100644
index 000000000..2c9ce62f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html
new file mode 100644
index 000000000..9bf111b12
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html
new file mode 100644
index 000000000..87e37f3a4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004-ref.html
new file mode 100644
index 000000000..25e768080
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.html
new file mode 100644
index 000000000..4e4831da0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html
new file mode 100644
index 000000000..27769a8ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html
new file mode 100644
index 000000000..8db408680
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html
new file mode 100644
index 000000000..0a4502b52
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005-ref.html
new file mode 100644
index 000000000..c9089343c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.html
new file mode 100644
index 000000000..f4a8ad0fa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html
new file mode 100644
index 000000000..9c9b35b0e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html
new file mode 100644
index 000000000..5bff95aa5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html
new file mode 100644
index 000000000..fd2f2fe69
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006-ref.html
new file mode 100644
index 000000000..21f9f2f29
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-contain-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.html
new file mode 100644
index 000000000..5914ee567
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.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 Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html
new file mode 100644
index 000000000..1426a30bd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.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 Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html
new file mode 100644
index 000000000..c0de015b3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.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 Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html
new file mode 100644
index 000000000..1fcc56ae1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.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 Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-contain-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: contain;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html
new file mode 100644
index 000000000..9245b71a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html
new file mode 100644
index 000000000..f2a26a67c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html
new file mode 100644
index 000000000..e39b710bc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.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 Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html
new file mode 100644
index 000000000..7d88c1a6d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.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 Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html
new file mode 100644
index 000000000..e0e657099
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.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 Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html
new file mode 100644
index 000000000..49eb6dc32
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.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 Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html
new file mode 100644
index 000000000..ce31bc73d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html
new file mode 100644
index 000000000..ac0f1da74
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html
new file mode 100644
index 000000000..dff433a9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.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 Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html
new file mode 100644
index 000000000..0c595c3e4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.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 Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html
new file mode 100644
index 000000000..1148a6ee2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.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 Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html
new file mode 100644
index 000000000..937be0c17
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.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 Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001-ref.html
new file mode 100644
index 000000000..b1539f927
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.html
new file mode 100644
index 000000000..5ab74f185
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html
new file mode 100644
index 000000000..b0d82e47e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html
new file mode 100644
index 000000000..78c6b87cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html
new file mode 100644
index 000000000..3a5f3bf6d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002-ref.html
new file mode 100644
index 000000000..86706084f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.html
new file mode 100644
index 000000000..48f3fc53a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html
new file mode 100644
index 000000000..a7a78b883
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html
new file mode 100644
index 000000000..fd0050ff2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html
new file mode 100644
index 000000000..272b3c714
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003-ref.html
new file mode 100644
index 000000000..18aa36243
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.html
new file mode 100644
index 000000000..75b4ba6e9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html
new file mode 100644
index 000000000..b764d3db7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html
new file mode 100644
index 000000000..aca67ff23
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html
new file mode 100644
index 000000000..76f54d6fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004-ref.html
new file mode 100644
index 000000000..cf0f747f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.html
new file mode 100644
index 000000000..17a20a97f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html
new file mode 100644
index 000000000..7094a04b2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html
new file mode 100644
index 000000000..954bbb459
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html
new file mode 100644
index 000000000..d8fc343f3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005-ref.html
new file mode 100644
index 000000000..374b0ac7e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.html
new file mode 100644
index 000000000..d4d7e9199
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html
new file mode 100644
index 000000000..6b9ea338c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html
new file mode 100644
index 000000000..8ec4dcbf2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html
new file mode 100644
index 000000000..2aaaf66a3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006-ref.html
new file mode 100644
index 000000000..2e0ecc7d0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-cover-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.html
new file mode 100644
index 000000000..278d195a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.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 Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html
new file mode 100644
index 000000000..325b4c833
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.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 Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html
new file mode 100644
index 000000000..8ff547f8f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.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 Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html
new file mode 100644
index 000000000..8245fca4e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.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 Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-cover-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: cover;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html
new file mode 100644
index 000000000..a7ed886b0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html
new file mode 100644
index 000000000..bdf547e19
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html
new file mode 100644
index 000000000..b36e1491f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.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 Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html
new file mode 100644
index 000000000..1bf280d41
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.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 Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html
new file mode 100644
index 000000000..55f75245a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.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 Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html
new file mode 100644
index 000000000..0299aefc1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.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 Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html
new file mode 100644
index 000000000..a6e9f59d6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html
new file mode 100644
index 000000000..1a851bd6d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html
new file mode 100644
index 000000000..3f5dc254d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.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 Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html
new file mode 100644
index 000000000..708a77207
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.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 Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html
new file mode 100644
index 000000000..9b8433ff4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.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 Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html
new file mode 100644
index 000000000..fd51e9274
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.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 Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001-ref.html
new file mode 100644
index 000000000..afb32785a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.html
new file mode 100644
index 000000000..a907f3841
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html
new file mode 100644
index 000000000..487cf7c9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html
new file mode 100644
index 000000000..7498dc1a8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html
new file mode 100644
index 000000000..40c80f8f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002-ref.html
new file mode 100644
index 000000000..13c4d8403
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.html
new file mode 100644
index 000000000..2b1cb19fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html
new file mode 100644
index 000000000..7ecac72ae
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html
new file mode 100644
index 000000000..2b8335002
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html
new file mode 100644
index 000000000..d2527daff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003-ref.html
new file mode 100644
index 000000000..ab27b3d71
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.html
new file mode 100644
index 000000000..bc52a6e60
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html
new file mode 100644
index 000000000..26e251e66
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html
new file mode 100644
index 000000000..dabf5685f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html
new file mode 100644
index 000000000..a8fd8c21a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004-ref.html
new file mode 100644
index 000000000..70c948796
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.html
new file mode 100644
index 000000000..412721508
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html
new file mode 100644
index 000000000..483849c1e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html
new file mode 100644
index 000000000..4236112d5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html
new file mode 100644
index 000000000..6032b19e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005-ref.html
new file mode 100644
index 000000000..c8e4ce1e7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.html
new file mode 100644
index 000000000..8dc338e2f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html
new file mode 100644
index 000000000..67d086d35
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html
new file mode 100644
index 000000000..ca9ba1c6b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html
new file mode 100644
index 000000000..54402d8c0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006-ref.html
new file mode 100644
index 000000000..85883fe9d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-fill-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.html
new file mode 100644
index 000000000..a5cb34316
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.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 Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html
new file mode 100644
index 000000000..eceb363da
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.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 Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html
new file mode 100644
index 000000000..05a333915
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.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 Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html
new file mode 100644
index 000000000..c8e9ff2c1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.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 Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-fill-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: fill;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html
new file mode 100644
index 000000000..3b151feba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html
new file mode 100644
index 000000000..c984fefb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html
new file mode 100644
index 000000000..22417890c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.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 Test: 'object-fit: none' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html
new file mode 100644
index 000000000..200ac3daf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.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 Test: 'object-fit: none' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html
new file mode 100644
index 000000000..4b2659a2d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.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 Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html
new file mode 100644
index 000000000..3e18c7960
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.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 Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html
new file mode 100644
index 000000000..f3a914f77
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html
new file mode 100644
index 000000000..df58f407d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: none' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html
new file mode 100644
index 000000000..9d9146523
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.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 Test: 'object-fit: none' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html
new file mode 100644
index 000000000..57c66a35d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.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 Test: 'object-fit: none' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html
new file mode 100644
index 000000000..a34f947cd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.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 Test: 'object-fit: none' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html
new file mode 100644
index 000000000..7b1ee9a7d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.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 Test: 'object-fit: none' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001-ref.html
new file mode 100644
index 000000000..3332452df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.html
new file mode 100644
index 000000000..eb40852da
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html
new file mode 100644
index 000000000..128f6e4b5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html
new file mode 100644
index 000000000..8df5bfb5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html
new file mode 100644
index 000000000..9e82eb5e4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002-ref.html
new file mode 100644
index 000000000..0e48003ec
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.html
new file mode 100644
index 000000000..e7055bb3f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html
new file mode 100644
index 000000000..dbcba47ca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html
new file mode 100644
index 000000000..c6d017bb8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html
new file mode 100644
index 000000000..69fa42493
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003-ref.html
new file mode 100644
index 000000000..33a01176f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.html
new file mode 100644
index 000000000..f90d1f8c7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html
new file mode 100644
index 000000000..769c10b46
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html
new file mode 100644
index 000000000..04ff94b78
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html
new file mode 100644
index 000000000..c1963da6e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004-ref.html
new file mode 100644
index 000000000..757708cac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.html
new file mode 100644
index 000000000..e9591d3bd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html
new file mode 100644
index 000000000..d9d0844ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html
new file mode 100644
index 000000000..91c7610cf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html
new file mode 100644
index 000000000..2c9f0c687
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005-ref.html
new file mode 100644
index 000000000..c8d70e4e0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.html
new file mode 100644
index 000000000..f47196164
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html
new file mode 100644
index 000000000..8407e78a7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html
new file mode 100644
index 000000000..df31fa268
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html
new file mode 100644
index 000000000..aeafcb200
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006-ref.html
new file mode 100644
index 000000000..016ef6961
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-none-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.html
new file mode 100644
index 000000000..f7c0dcdd4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.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 Test: 'object-fit: none' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html
new file mode 100644
index 000000000..ea9ea1f79
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.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 Test: 'object-fit: none' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html
new file mode 100644
index 000000000..2fe345923
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.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 Test: 'object-fit: none' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.html
new file mode 100644
index 000000000..47776f29e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.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 Test: 'object-fit: none' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-none-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: none;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html
new file mode 100644
index 000000000..a0df58555
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html
new file mode 100644
index 000000000..d3f7e4289
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <!-- big/wide: -->
+    <canvas width="16" height="8" class="bigWide tr"></canvas>
+    <canvas width="16" height="8" class="bigWide bl"></canvas>
+    <canvas width="16" height="8" class="bigWide tl"></canvas>
+    <canvas width="16" height="8" class="bigWide br"></canvas>
+    <canvas width="16" height="8" class="bigWide tc"></canvas>
+    <canvas width="16" height="8" class="bigWide cr"></canvas>
+    <canvas width="16" height="8" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="16" height="8" class="bigTall tr"></canvas>
+    <canvas width="16" height="8" class="bigTall bl"></canvas>
+    <canvas width="16" height="8" class="bigTall tl"></canvas>
+    <canvas width="16" height="8" class="bigTall br"></canvas>
+    <canvas width="16" height="8" class="bigTall tc"></canvas>
+    <canvas width="16" height="8" class="bigTall cr"></canvas>
+    <canvas width="16" height="8" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="16" height="8" class="small tr"></canvas>
+    <canvas width="16" height="8" class="small bl"></canvas>
+    <canvas width="16" height="8" class="small tl"></canvas>
+    <canvas width="16" height="8" class="small br"></canvas>
+    <canvas width="16" height="8" class="small tc"></canvas>
+    <canvas width="16" height="8" class="small cr"></canvas>
+    <canvas width="16" height="8" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html
new file mode 100644
index 000000000..9950736c0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.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 Test: 'object-fit: scale-down' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.png" class="bigWide tr">
+    <embed src="support/colors-16x8.png" class="bigWide bl">
+    <embed src="support/colors-16x8.png" class="bigWide tl">
+    <embed src="support/colors-16x8.png" class="bigWide br">
+    <embed src="support/colors-16x8.png" class="bigWide tc">
+    <embed src="support/colors-16x8.png" class="bigWide cr">
+    <embed src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.png" class="bigTall tr">
+    <embed src="support/colors-16x8.png" class="bigTall bl">
+    <embed src="support/colors-16x8.png" class="bigTall tl">
+    <embed src="support/colors-16x8.png" class="bigTall br">
+    <embed src="support/colors-16x8.png" class="bigTall tc">
+    <embed src="support/colors-16x8.png" class="bigTall cr">
+    <embed src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.png" class="small tr">
+    <embed src="support/colors-16x8.png" class="small bl">
+    <embed src="support/colors-16x8.png" class="small tl">
+    <embed src="support/colors-16x8.png" class="small br">
+    <embed src="support/colors-16x8.png" class="small tc">
+    <embed src="support/colors-16x8.png" class="small cr">
+    <embed src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html
new file mode 100644
index 000000000..f7bad0219
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.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 Test: 'object-fit: scale-down' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.png" class="bigWide tr">
+    <img src="support/colors-16x8.png" class="bigWide bl">
+    <img src="support/colors-16x8.png" class="bigWide tl">
+    <img src="support/colors-16x8.png" class="bigWide br">
+    <img src="support/colors-16x8.png" class="bigWide tc">
+    <img src="support/colors-16x8.png" class="bigWide cr">
+    <img src="support/colors-16x8.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.png" class="bigTall tr">
+    <img src="support/colors-16x8.png" class="bigTall bl">
+    <img src="support/colors-16x8.png" class="bigTall tl">
+    <img src="support/colors-16x8.png" class="bigTall br">
+    <img src="support/colors-16x8.png" class="bigTall tc">
+    <img src="support/colors-16x8.png" class="bigTall cr">
+    <img src="support/colors-16x8.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.png" class="small tr">
+    <img src="support/colors-16x8.png" class="small bl">
+    <img src="support/colors-16x8.png" class="small tl">
+    <img src="support/colors-16x8.png" class="small br">
+    <img src="support/colors-16x8.png" class="small tc">
+    <img src="support/colors-16x8.png" class="small cr">
+    <img src="support/colors-16x8.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html
new file mode 100644
index 000000000..88fe859d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.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 Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.png" class="bigWide tr"></object>
+    <object data="support/colors-16x8.png" class="bigWide bl"></object>
+    <object data="support/colors-16x8.png" class="bigWide tl"></object>
+    <object data="support/colors-16x8.png" class="bigWide br"></object>
+    <object data="support/colors-16x8.png" class="bigWide tc"></object>
+    <object data="support/colors-16x8.png" class="bigWide cr"></object>
+    <object data="support/colors-16x8.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.png" class="bigTall tr"></object>
+    <object data="support/colors-16x8.png" class="bigTall bl"></object>
+    <object data="support/colors-16x8.png" class="bigTall tl"></object>
+    <object data="support/colors-16x8.png" class="bigTall br"></object>
+    <object data="support/colors-16x8.png" class="bigTall tc"></object>
+    <object data="support/colors-16x8.png" class="bigTall cr"></object>
+    <object data="support/colors-16x8.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.png" class="small tr"></object>
+    <object data="support/colors-16x8.png" class="small bl"></object>
+    <object data="support/colors-16x8.png" class="small tl"></object>
+    <object data="support/colors-16x8.png" class="small br"></object>
+    <object data="support/colors-16x8.png" class="small tc"></object>
+    <object data="support/colors-16x8.png" class="small cr"></object>
+    <object data="support/colors-16x8.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html
new file mode 100644
index 000000000..55b24df75
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.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 Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.png" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.png" class="bigWide br"></video>
+    <video poster="support/colors-16x8.png" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.png" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.png" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.png" class="bigTall br"></video>
+    <video poster="support/colors-16x8.png" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.png" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.png" class="small tr"></video>
+    <video poster="support/colors-16x8.png" class="small bl"></video>
+    <video poster="support/colors-16x8.png" class="small tl"></video>
+    <video poster="support/colors-16x8.png" class="small br"></video>
+    <video poster="support/colors-16x8.png" class="small tc"></video>
+    <video poster="support/colors-16x8.png" class="small cr"></video>
+    <video poster="support/colors-16x8.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html
new file mode 100644
index 000000000..5162493d2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html
new file mode 100644
index 000000000..ece408d09
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: 'object-fit: scale-down' on canvas element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <!-- big/wide: -->
+    <canvas width="8" height="16" class="bigWide tr"></canvas>
+    <canvas width="8" height="16" class="bigWide bl"></canvas>
+    <canvas width="8" height="16" class="bigWide tl"></canvas>
+    <canvas width="8" height="16" class="bigWide br"></canvas>
+    <canvas width="8" height="16" class="bigWide tc"></canvas>
+    <canvas width="8" height="16" class="bigWide cr"></canvas>
+    <canvas width="8" height="16" class="bigWide"></canvas>
+    <br>
+    <!-- big/tall: -->
+    <canvas width="8" height="16" class="bigTall tr"></canvas>
+    <canvas width="8" height="16" class="bigTall bl"></canvas>
+    <canvas width="8" height="16" class="bigTall tl"></canvas>
+    <canvas width="8" height="16" class="bigTall br"></canvas>
+    <canvas width="8" height="16" class="bigTall tc"></canvas>
+    <canvas width="8" height="16" class="bigTall cr"></canvas>
+    <canvas width="8" height="16" class="bigTall"></canvas>
+    <br>
+    <!-- small: -->
+    <canvas width="8" height="16" class="small tr"></canvas>
+    <canvas width="8" height="16" class="small bl"></canvas>
+    <canvas width="8" height="16" class="small tl"></canvas>
+    <canvas width="8" height="16" class="small br"></canvas>
+    <canvas width="8" height="16" class="small tc"></canvas>
+    <canvas width="8" height="16" class="small cr"></canvas>
+    <canvas width="8" height="16" class="small"></canvas>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html
new file mode 100644
index 000000000..4cd28c91a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.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 Test: 'object-fit: scale-down' on embed element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.png" class="bigWide tr">
+    <embed src="support/colors-8x16.png" class="bigWide bl">
+    <embed src="support/colors-8x16.png" class="bigWide tl">
+    <embed src="support/colors-8x16.png" class="bigWide br">
+    <embed src="support/colors-8x16.png" class="bigWide tc">
+    <embed src="support/colors-8x16.png" class="bigWide cr">
+    <embed src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.png" class="bigTall tr">
+    <embed src="support/colors-8x16.png" class="bigTall bl">
+    <embed src="support/colors-8x16.png" class="bigTall tl">
+    <embed src="support/colors-8x16.png" class="bigTall br">
+    <embed src="support/colors-8x16.png" class="bigTall tc">
+    <embed src="support/colors-8x16.png" class="bigTall cr">
+    <embed src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.png" class="small tr">
+    <embed src="support/colors-8x16.png" class="small bl">
+    <embed src="support/colors-8x16.png" class="small tl">
+    <embed src="support/colors-8x16.png" class="small br">
+    <embed src="support/colors-8x16.png" class="small tc">
+    <embed src="support/colors-8x16.png" class="small cr">
+    <embed src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html
new file mode 100644
index 000000000..db5f38522
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.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 Test: 'object-fit: scale-down' on img element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.png" class="bigWide tr">
+    <img src="support/colors-8x16.png" class="bigWide bl">
+    <img src="support/colors-8x16.png" class="bigWide tl">
+    <img src="support/colors-8x16.png" class="bigWide br">
+    <img src="support/colors-8x16.png" class="bigWide tc">
+    <img src="support/colors-8x16.png" class="bigWide cr">
+    <img src="support/colors-8x16.png" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.png" class="bigTall tr">
+    <img src="support/colors-8x16.png" class="bigTall bl">
+    <img src="support/colors-8x16.png" class="bigTall tl">
+    <img src="support/colors-8x16.png" class="bigTall br">
+    <img src="support/colors-8x16.png" class="bigTall tc">
+    <img src="support/colors-8x16.png" class="bigTall cr">
+    <img src="support/colors-8x16.png" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.png" class="small tr">
+    <img src="support/colors-8x16.png" class="small bl">
+    <img src="support/colors-8x16.png" class="small tl">
+    <img src="support/colors-8x16.png" class="small br">
+    <img src="support/colors-8x16.png" class="small tc">
+    <img src="support/colors-8x16.png" class="small cr">
+    <img src="support/colors-8x16.png" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html
new file mode 100644
index 000000000..43700fd7a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.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 Test: 'object-fit: scale-down' on object element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.png" class="bigWide tr"></object>
+    <object data="support/colors-8x16.png" class="bigWide bl"></object>
+    <object data="support/colors-8x16.png" class="bigWide tl"></object>
+    <object data="support/colors-8x16.png" class="bigWide br"></object>
+    <object data="support/colors-8x16.png" class="bigWide tc"></object>
+    <object data="support/colors-8x16.png" class="bigWide cr"></object>
+    <object data="support/colors-8x16.png" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.png" class="bigTall tr"></object>
+    <object data="support/colors-8x16.png" class="bigTall bl"></object>
+    <object data="support/colors-8x16.png" class="bigTall tl"></object>
+    <object data="support/colors-8x16.png" class="bigTall br"></object>
+    <object data="support/colors-8x16.png" class="bigTall tc"></object>
+    <object data="support/colors-8x16.png" class="bigTall cr"></object>
+    <object data="support/colors-8x16.png" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.png" class="small tr"></object>
+    <object data="support/colors-8x16.png" class="small bl"></object>
+    <object data="support/colors-8x16.png" class="small tl"></object>
+    <object data="support/colors-8x16.png" class="small br"></object>
+    <object data="support/colors-8x16.png" class="small tc"></object>
+    <object data="support/colors-8x16.png" class="small cr"></object>
+    <object data="support/colors-8x16.png" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html
new file mode 100644
index 000000000..7089444b3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.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 Test: 'object-fit: scale-down' on video element, with a PNG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-png-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.png" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.png" class="bigWide br"></video>
+    <video poster="support/colors-8x16.png" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.png" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.png" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.png" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.png" class="bigTall br"></video>
+    <video poster="support/colors-8x16.png" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.png" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.png" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.png" class="small tr"></video>
+    <video poster="support/colors-8x16.png" class="small bl"></video>
+    <video poster="support/colors-8x16.png" class="small tl"></video>
+    <video poster="support/colors-8x16.png" class="small br"></video>
+    <video poster="support/colors-8x16.png" class="small tc"></video>
+    <video poster="support/colors-8x16.png" class="small cr"></video>
+    <video poster="support/colors-8x16.png" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001-ref.html
new file mode 100644
index 000000000..1fad02c91
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html
new file mode 100644
index 000000000..0640de4f3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8.svg" class="bigWide tr">
+    <embed src="support/colors-16x8.svg" class="bigWide bl">
+    <embed src="support/colors-16x8.svg" class="bigWide tl">
+    <embed src="support/colors-16x8.svg" class="bigWide br">
+    <embed src="support/colors-16x8.svg" class="bigWide tc">
+    <embed src="support/colors-16x8.svg" class="bigWide cr">
+    <embed src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8.svg" class="bigTall tr">
+    <embed src="support/colors-16x8.svg" class="bigTall bl">
+    <embed src="support/colors-16x8.svg" class="bigTall tl">
+    <embed src="support/colors-16x8.svg" class="bigTall br">
+    <embed src="support/colors-16x8.svg" class="bigTall tc">
+    <embed src="support/colors-16x8.svg" class="bigTall cr">
+    <embed src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8.svg" class="small tr">
+    <embed src="support/colors-16x8.svg" class="small bl">
+    <embed src="support/colors-16x8.svg" class="small tl">
+    <embed src="support/colors-16x8.svg" class="small br">
+    <embed src="support/colors-16x8.svg" class="small tc">
+    <embed src="support/colors-16x8.svg" class="small cr">
+    <embed src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html
new file mode 100644
index 000000000..0e5954b8d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8.svg" class="bigWide tr">
+    <img src="support/colors-16x8.svg" class="bigWide bl">
+    <img src="support/colors-16x8.svg" class="bigWide tl">
+    <img src="support/colors-16x8.svg" class="bigWide br">
+    <img src="support/colors-16x8.svg" class="bigWide tc">
+    <img src="support/colors-16x8.svg" class="bigWide cr">
+    <img src="support/colors-16x8.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8.svg" class="bigTall tr">
+    <img src="support/colors-16x8.svg" class="bigTall bl">
+    <img src="support/colors-16x8.svg" class="bigTall tl">
+    <img src="support/colors-16x8.svg" class="bigTall br">
+    <img src="support/colors-16x8.svg" class="bigTall tc">
+    <img src="support/colors-16x8.svg" class="bigTall cr">
+    <img src="support/colors-16x8.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8.svg" class="small tr">
+    <img src="support/colors-16x8.svg" class="small bl">
+    <img src="support/colors-16x8.svg" class="small tl">
+    <img src="support/colors-16x8.svg" class="small br">
+    <img src="support/colors-16x8.svg" class="small tc">
+    <img src="support/colors-16x8.svg" class="small cr">
+    <img src="support/colors-16x8.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html
new file mode 100644
index 000000000..15f19bb18
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8.svg" class="small tr"></object>
+    <object data="support/colors-16x8.svg" class="small bl"></object>
+    <object data="support/colors-16x8.svg" class="small tl"></object>
+    <object data="support/colors-16x8.svg" class="small br"></object>
+    <object data="support/colors-16x8.svg" class="small tc"></object>
+    <object data="support/colors-16x8.svg" class="small cr"></object>
+    <object data="support/colors-16x8.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html
new file mode 100644
index 000000000..b54243369
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8.svg" class="small tr"></video>
+    <video poster="support/colors-16x8.svg" class="small bl"></video>
+    <video poster="support/colors-16x8.svg" class="small tl"></video>
+    <video poster="support/colors-16x8.svg" class="small br"></video>
+    <video poster="support/colors-16x8.svg" class="small tc"></video>
+    <video poster="support/colors-16x8.svg" class="small cr"></video>
+    <video poster="support/colors-16x8.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002-ref.html
new file mode 100644
index 000000000..03d4f4c93
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html
new file mode 100644
index 000000000..813ab7ad4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16.svg" class="bigWide tr">
+    <embed src="support/colors-8x16.svg" class="bigWide bl">
+    <embed src="support/colors-8x16.svg" class="bigWide tl">
+    <embed src="support/colors-8x16.svg" class="bigWide br">
+    <embed src="support/colors-8x16.svg" class="bigWide tc">
+    <embed src="support/colors-8x16.svg" class="bigWide cr">
+    <embed src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16.svg" class="bigTall tr">
+    <embed src="support/colors-8x16.svg" class="bigTall bl">
+    <embed src="support/colors-8x16.svg" class="bigTall tl">
+    <embed src="support/colors-8x16.svg" class="bigTall br">
+    <embed src="support/colors-8x16.svg" class="bigTall tc">
+    <embed src="support/colors-8x16.svg" class="bigTall cr">
+    <embed src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16.svg" class="small tr">
+    <embed src="support/colors-8x16.svg" class="small bl">
+    <embed src="support/colors-8x16.svg" class="small tl">
+    <embed src="support/colors-8x16.svg" class="small br">
+    <embed src="support/colors-8x16.svg" class="small tc">
+    <embed src="support/colors-8x16.svg" class="small cr">
+    <embed src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html
new file mode 100644
index 000000000..107ad0192
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16.svg" class="bigWide tr">
+    <img src="support/colors-8x16.svg" class="bigWide bl">
+    <img src="support/colors-8x16.svg" class="bigWide tl">
+    <img src="support/colors-8x16.svg" class="bigWide br">
+    <img src="support/colors-8x16.svg" class="bigWide tc">
+    <img src="support/colors-8x16.svg" class="bigWide cr">
+    <img src="support/colors-8x16.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16.svg" class="bigTall tr">
+    <img src="support/colors-8x16.svg" class="bigTall bl">
+    <img src="support/colors-8x16.svg" class="bigTall tl">
+    <img src="support/colors-8x16.svg" class="bigTall br">
+    <img src="support/colors-8x16.svg" class="bigTall tc">
+    <img src="support/colors-8x16.svg" class="bigTall cr">
+    <img src="support/colors-8x16.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16.svg" class="small tr">
+    <img src="support/colors-8x16.svg" class="small bl">
+    <img src="support/colors-8x16.svg" class="small tl">
+    <img src="support/colors-8x16.svg" class="small br">
+    <img src="support/colors-8x16.svg" class="small tc">
+    <img src="support/colors-8x16.svg" class="small cr">
+    <img src="support/colors-8x16.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html
new file mode 100644
index 000000000..7c9c9be8c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16.svg" class="small tr"></object>
+    <object data="support/colors-8x16.svg" class="small bl"></object>
+    <object data="support/colors-8x16.svg" class="small tl"></object>
+    <object data="support/colors-8x16.svg" class="small br"></object>
+    <object data="support/colors-8x16.svg" class="small tc"></object>
+    <object data="support/colors-8x16.svg" class="small cr"></object>
+    <object data="support/colors-8x16.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html
new file mode 100644
index 000000000..78bce1974
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16.svg" class="small tr"></video>
+    <video poster="support/colors-8x16.svg" class="small bl"></video>
+    <video poster="support/colors-8x16.svg" class="small tl"></video>
+    <video poster="support/colors-8x16.svg" class="small br"></video>
+    <video poster="support/colors-8x16.svg" class="small tc"></video>
+    <video poster="support/colors-8x16.svg" class="small cr"></video>
+    <video poster="support/colors-8x16.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003-ref.html
new file mode 100644
index 000000000..18883dc9a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html
new file mode 100644
index 000000000..65121fcf5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-noSize.svg" class="small tr">
+    <embed src="support/colors-16x8-noSize.svg" class="small bl">
+    <embed src="support/colors-16x8-noSize.svg" class="small tl">
+    <embed src="support/colors-16x8-noSize.svg" class="small br">
+    <embed src="support/colors-16x8-noSize.svg" class="small tc">
+    <embed src="support/colors-16x8-noSize.svg" class="small cr">
+    <embed src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html
new file mode 100644
index 000000000..1e683fcb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide br">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall bl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tl">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall br">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall tc">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall cr">
+    <img src="support/colors-16x8-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-noSize.svg" class="small tr">
+    <img src="support/colors-16x8-noSize.svg" class="small bl">
+    <img src="support/colors-16x8-noSize.svg" class="small tl">
+    <img src="support/colors-16x8-noSize.svg" class="small br">
+    <img src="support/colors-16x8-noSize.svg" class="small tc">
+    <img src="support/colors-16x8-noSize.svg" class="small cr">
+    <img src="support/colors-16x8-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html
new file mode 100644
index 000000000..78023f789
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-noSize.svg" class="small tr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small bl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tl"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small br"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small tc"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small cr"></object>
+    <object data="support/colors-16x8-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html
new file mode 100644
index 000000000..7070e08a3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-003-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small br"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004-ref.html
new file mode 100644
index 000000000..126b62ed3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html
new file mode 100644
index 000000000..cdf7ef12b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-noSize.svg" class="small tr">
+    <embed src="support/colors-8x16-noSize.svg" class="small bl">
+    <embed src="support/colors-8x16-noSize.svg" class="small tl">
+    <embed src="support/colors-8x16-noSize.svg" class="small br">
+    <embed src="support/colors-8x16-noSize.svg" class="small tc">
+    <embed src="support/colors-8x16-noSize.svg" class="small cr">
+    <embed src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html
new file mode 100644
index 000000000..57d2183ff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide br">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall bl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tl">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall br">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall tc">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall cr">
+    <img src="support/colors-8x16-noSize.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-noSize.svg" class="small tr">
+    <img src="support/colors-8x16-noSize.svg" class="small bl">
+    <img src="support/colors-8x16-noSize.svg" class="small tl">
+    <img src="support/colors-8x16-noSize.svg" class="small br">
+    <img src="support/colors-8x16-noSize.svg" class="small tc">
+    <img src="support/colors-8x16-noSize.svg" class="small cr">
+    <img src="support/colors-8x16-noSize.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html
new file mode 100644
index 000000000..ee0ebfd2f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-noSize.svg" class="small tr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small bl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tl"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small br"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small tc"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small cr"></object>
+    <object data="support/colors-8x16-noSize.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html
new file mode 100644
index 000000000..f7388b6a9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-004-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small br"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-noSize.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005-ref.html
new file mode 100644
index 000000000..a107fb464
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html
new file mode 100644
index 000000000..1e09aee16
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-16x8-parDefault.svg" class="small tr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small bl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tl">
+    <embed src="support/colors-16x8-parDefault.svg" class="small br">
+    <embed src="support/colors-16x8-parDefault.svg" class="small tc">
+    <embed src="support/colors-16x8-parDefault.svg" class="small cr">
+    <embed src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html
new file mode 100644
index 000000000..dd5c82b9e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall br">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-16x8-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-16x8-parDefault.svg" class="small tr">
+    <img src="support/colors-16x8-parDefault.svg" class="small bl">
+    <img src="support/colors-16x8-parDefault.svg" class="small tl">
+    <img src="support/colors-16x8-parDefault.svg" class="small br">
+    <img src="support/colors-16x8-parDefault.svg" class="small tc">
+    <img src="support/colors-16x8-parDefault.svg" class="small cr">
+    <img src="support/colors-16x8-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html
new file mode 100644
index 000000000..108d97f28
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small br"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-16x8-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html
new file mode 100644
index 000000000..56cbaba98
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-005-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-16x8-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006-ref.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006-ref.html
new file mode 100644
index 000000000..4a06d37b5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/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("support/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/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html
new file mode 100644
index 000000000..9e6b0dc2c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.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 Test: 'object-fit: scale-down' on embed element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      embed {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <embed src="support/colors-8x16-parDefault.svg" class="small tr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small bl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tl">
+    <embed src="support/colors-8x16-parDefault.svg" class="small br">
+    <embed src="support/colors-8x16-parDefault.svg" class="small tc">
+    <embed src="support/colors-8x16-parDefault.svg" class="small cr">
+    <embed src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html
new file mode 100644
index 000000000..29c2f227a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.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 Test: 'object-fit: scale-down' on img element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      img {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigWide">
+    <br>
+    <!-- big/tall: -->
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall br">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
+    <img src="support/colors-8x16-parDefault.svg" class="bigTall">
+    <br>
+    <!-- small: -->
+    <img src="support/colors-8x16-parDefault.svg" class="small tr">
+    <img src="support/colors-8x16-parDefault.svg" class="small bl">
+    <img src="support/colors-8x16-parDefault.svg" class="small tl">
+    <img src="support/colors-8x16-parDefault.svg" class="small br">
+    <img src="support/colors-8x16-parDefault.svg" class="small tc">
+    <img src="support/colors-8x16-parDefault.svg" class="small cr">
+    <img src="support/colors-8x16-parDefault.svg" class="small">
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html
new file mode 100644
index 000000000..43358a9b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.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 Test: 'object-fit: scale-down' on object element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      object {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
+    <br>
+    <!-- big/tall: -->
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
+    <br>
+    <!-- small: -->
+    <object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small br"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
+    <object data="support/colors-8x16-parDefault.svg" class="small"></object>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html
new file mode 100644
index 000000000..fe35065b2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.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 Test: 'object-fit: scale-down' on video element, with a SVG image and with various 'object-position' values</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-fit-scale-down-svg-006-ref.html">
+    <style type="text/css">
+      video {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: scale-down;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
+    <br>
+    <!-- big/tall: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
+    <br>
+    <!-- small: -->
+    <video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
+    <video poster="support/colors-8x16-parDefault.svg" class="small"></video>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html
new file mode 100644
index 000000000..1027cfc35
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("support/colors-16x8.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { background-position: 50%  -7% }
+      .op_y13  { background-position: 50%  13% }
+      .op_y23  { background-position: 50%  23% }
+      .op_y50  { background-position: 50%  50% }
+      .op_y75  { background-position: 50%  75% }
+      .op_y88  { background-position: 50%  88% }
+      .op_y111 { background-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_y-7"></div>
+    <div class="op_y13"></div>
+    <div class="op_y23"></div>
+    <div class="op_y50"></div>
+    <div class="op_y75"></div>
+    <div class="op_y88"></div>
+    <div class="op_y111"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html
new file mode 100644
index 000000000..20ff1cb93
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size canvas element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      canvas {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-16x8.png')">
+    <canvas width="16" height="8" class="op_y-7"></canvas>
+    <canvas width="16" height="8" class="op_y13"></canvas>
+    <canvas width="16" height="8" class="op_y23"></canvas>
+    <canvas width="16" height="8" class="op_y50"></canvas>
+    <canvas width="16" height="8" class="op_y75"></canvas>
+    <canvas width="16" height="8" class="op_y88"></canvas>
+    <canvas width="16" height="8" class="op_y111"></canvas>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html
new file mode 100644
index 000000000..cdf35a1fc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      embed {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <embed src="support/colors-16x8.png" class="op_y-7">
+    <embed src="support/colors-16x8.png" class="op_y13">
+    <embed src="support/colors-16x8.png" class="op_y23">
+    <embed src="support/colors-16x8.png" class="op_y50">
+    <embed src="support/colors-16x8.png" class="op_y75">
+    <embed src="support/colors-16x8.png" class="op_y88">
+    <embed src="support/colors-16x8.png" class="op_y111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html
new file mode 100644
index 000000000..d3e2622b4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      img {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <img src="support/colors-16x8.png" class="op_y-7">
+    <img src="support/colors-16x8.png" class="op_y13">
+    <img src="support/colors-16x8.png" class="op_y23">
+    <img src="support/colors-16x8.png" class="op_y50">
+    <img src="support/colors-16x8.png" class="op_y75">
+    <img src="support/colors-16x8.png" class="op_y88">
+    <img src="support/colors-16x8.png" class="op_y111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html
new file mode 100644
index 000000000..cdf0e0b53
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      object {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <object data="support/colors-16x8.png" class="op_y-7"></object>
+    <object data="support/colors-16x8.png" class="op_y13"></object>
+    <object data="support/colors-16x8.png" class="op_y23"></object>
+    <object data="support/colors-16x8.png" class="op_y50"></object>
+    <object data="support/colors-16x8.png" class="op_y75"></object>
+    <object data="support/colors-16x8.png" class="op_y88"></object>
+    <object data="support/colors-16x8.png" class="op_y111"></object>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html
new file mode 100644
index 000000000..8b80b9c5b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size video element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-001-ref.html">
+    <style type="text/css">
+      video {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <video poster="support/colors-16x8.png" class="op_y-7"></video>
+    <video poster="support/colors-16x8.png" class="op_y13"></video>
+    <video poster="support/colors-16x8.png" class="op_y23"></video>
+    <video poster="support/colors-16x8.png" class="op_y50"></video>
+    <video poster="support/colors-16x8.png" class="op_y75"></video>
+    <video poster="support/colors-16x8.png" class="op_y88"></video>
+    <video poster="support/colors-16x8.png" class="op_y111"></video>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html
new file mode 100644
index 000000000..bd14f9cfc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("support/colors-8x16.png");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { background-position:  -7% 50% }
+      .op_x13  { background-position:  13% 50% }
+      .op_x23  { background-position:  23% 50% }
+      .op_x50  { background-position:  50% 50% }
+      .op_x75  { background-position:  75% 50% }
+      .op_x88  { background-position:  88% 50% }
+      .op_x111 { background-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_x-7"></div>
+    <div class="op_x13"></div>
+    <div class="op_x23"></div>
+    <div class="op_x50"></div>
+    <div class="op_x75"></div>
+    <div class="op_x88"></div>
+    <div class="op_x111"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html
new file mode 100644
index 000000000..5ad030ffb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size canvas element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      canvas {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+    <script>
+      function drawImageToCanvases(imageURI) {
+        var image = new Image();
+        image.onload = function() {
+          var canvasElems = document.getElementsByTagName("canvas");
+          for (var i = 0; i < canvasElems.length; i++) {
+            var ctx = canvasElems[i].getContext("2d");
+            ctx.drawImage(image, 0, 0);
+          }
+          document.documentElement.removeAttribute("class");
+        }
+        image.src = imageURI;
+      }
+    </script>
+  </head>
+  <body onload="drawImageToCanvases('support/colors-8x16.png')">
+    <canvas width="8" height="16" class="op_x-7"></canvas>
+    <canvas width="8" height="16" class="op_x13"></canvas>
+    <canvas width="8" height="16" class="op_x23"></canvas>
+    <canvas width="8" height="16" class="op_x50"></canvas>
+    <canvas width="8" height="16" class="op_x75"></canvas>
+    <canvas width="8" height="16" class="op_x88"></canvas>
+    <canvas width="8" height="16" class="op_x111"></canvas>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html
new file mode 100644
index 000000000..749948ae4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      embed {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <embed src="support/colors-8x16.png" class="op_x-7">
+    <embed src="support/colors-8x16.png" class="op_x13">
+    <embed src="support/colors-8x16.png" class="op_x23">
+    <embed src="support/colors-8x16.png" class="op_x50">
+    <embed src="support/colors-8x16.png" class="op_x75">
+    <embed src="support/colors-8x16.png" class="op_x88">
+    <embed src="support/colors-8x16.png" class="op_x111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html
new file mode 100644
index 000000000..88b4a1500
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      img {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <img src="support/colors-8x16.png" class="op_x-7">
+    <img src="support/colors-8x16.png" class="op_x13">
+    <img src="support/colors-8x16.png" class="op_x23">
+    <img src="support/colors-8x16.png" class="op_x50">
+    <img src="support/colors-8x16.png" class="op_x75">
+    <img src="support/colors-8x16.png" class="op_x88">
+    <img src="support/colors-8x16.png" class="op_x111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html
new file mode 100644
index 000000000..0d507900f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      object {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <object data="support/colors-8x16.png" class="op_x-7"></object>
+    <object data="support/colors-8x16.png" class="op_x13"></object>
+    <object data="support/colors-8x16.png" class="op_x23"></object>
+    <object data="support/colors-8x16.png" class="op_x50"></object>
+    <object data="support/colors-8x16.png" class="op_x75"></object>
+    <object data="support/colors-8x16.png" class="op_x88"></object>
+    <object data="support/colors-8x16.png" class="op_x111"></object>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html b/layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html
new file mode 100644
index 000000000..00ace782b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size video element, with a PNG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-png-002-ref.html">
+    <style type="text/css">
+      video {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <video poster="support/colors-8x16.png" class="op_x-7"></video>
+    <video poster="support/colors-8x16.png" class="op_x13"></video>
+    <video poster="support/colors-8x16.png" class="op_x23"></video>
+    <video poster="support/colors-8x16.png" class="op_x50"></video>
+    <video poster="support/colors-8x16.png" class="op_x75"></video>
+    <video poster="support/colors-8x16.png" class="op_x88"></video>
+    <video poster="support/colors-8x16.png" class="op_x111"></video>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001-ref.html
new file mode 100644
index 000000000..61c386d88
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("support/colors-16x8.svg");
+        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/w3c-css/submitted/images3/object-position-svg-001e.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001e.html
new file mode 100644
index 000000000..05f226cd8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001e.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      embed {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <embed src="support/colors-16x8.svg" class="op_y-7">
+    <embed src="support/colors-16x8.svg" class="op_y13">
+    <embed src="support/colors-16x8.svg" class="op_y23">
+    <embed src="support/colors-16x8.svg" class="op_y50">
+    <embed src="support/colors-16x8.svg" class="op_y75">
+    <embed src="support/colors-16x8.svg" class="op_y88">
+    <embed src="support/colors-16x8.svg" class="op_y111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001i.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001i.html
new file mode 100644
index 000000000..eecf0f433
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001i.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size img element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      img {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <img src="support/colors-16x8.svg" class="op_y-7">
+    <img src="support/colors-16x8.svg" class="op_y13">
+    <img src="support/colors-16x8.svg" class="op_y23">
+    <img src="support/colors-16x8.svg" class="op_y50">
+    <img src="support/colors-16x8.svg" class="op_y75">
+    <img src="support/colors-16x8.svg" class="op_y88">
+    <img src="support/colors-16x8.svg" class="op_y111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001o.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001o.html
new file mode 100644
index 000000000..589999c91
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001o.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size object element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      object {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <object data="support/colors-16x8.svg" class="op_y-7"></object>
+    <object data="support/colors-16x8.svg" class="op_y13"></object>
+    <object data="support/colors-16x8.svg" class="op_y23"></object>
+    <object data="support/colors-16x8.svg" class="op_y50"></object>
+    <object data="support/colors-16x8.svg" class="op_y75"></object>
+    <object data="support/colors-16x8.svg" class="op_y88"></object>
+    <object data="support/colors-16x8.svg" class="op_y111"></object>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-001p.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001p.html
new file mode 100644
index 000000000..8b0b468b2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-001p.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size video element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-001-ref.html">
+    <style type="text/css">
+      video {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <video poster="support/colors-16x8.svg" class="op_y-7"></video>
+    <video poster="support/colors-16x8.svg" class="op_y13"></video>
+    <video poster="support/colors-16x8.svg" class="op_y23"></video>
+    <video poster="support/colors-16x8.svg" class="op_y50"></video>
+    <video poster="support/colors-16x8.svg" class="op_y75"></video>
+    <video poster="support/colors-16x8.svg" class="op_y88"></video>
+    <video poster="support/colors-16x8.svg" class="op_y111"></video>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002-ref.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002-ref.html
new file mode 100644
index 000000000..d75e5edb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("support/colors-8x16.svg");
+        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/w3c-css/submitted/images3/object-position-svg-002e.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002e.html
new file mode 100644
index 000000000..0bde50d0c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002e.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      embed {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <embed src="support/colors-8x16.svg" class="op_x-7">
+    <embed src="support/colors-8x16.svg" class="op_x13">
+    <embed src="support/colors-8x16.svg" class="op_x23">
+    <embed src="support/colors-8x16.svg" class="op_x50">
+    <embed src="support/colors-8x16.svg" class="op_x75">
+    <embed src="support/colors-8x16.svg" class="op_x88">
+    <embed src="support/colors-8x16.svg" class="op_x111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002i.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002i.html
new file mode 100644
index 000000000..202b171c3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002i.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size img element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      img {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <img src="support/colors-8x16.svg" class="op_x-7">
+    <img src="support/colors-8x16.svg" class="op_x13">
+    <img src="support/colors-8x16.svg" class="op_x23">
+    <img src="support/colors-8x16.svg" class="op_x50">
+    <img src="support/colors-8x16.svg" class="op_x75">
+    <img src="support/colors-8x16.svg" class="op_x88">
+    <img src="support/colors-8x16.svg" class="op_x111">
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002o.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002o.html
new file mode 100644
index 000000000..e05938167
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002o.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size object element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      object {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <object data="support/colors-8x16.svg" class="op_x-7"></object>
+    <object data="support/colors-8x16.svg" class="op_x13"></object>
+    <object data="support/colors-8x16.svg" class="op_x23"></object>
+    <object data="support/colors-8x16.svg" class="op_x50"></object>
+    <object data="support/colors-8x16.svg" class="op_x75"></object>
+    <object data="support/colors-8x16.svg" class="op_x88"></object>
+    <object data="support/colors-8x16.svg" class="op_x111"></object>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/object-position-svg-002p.html b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002p.html
new file mode 100644
index 000000000..3c6b7a3d4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/object-position-svg-002p.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: various 'object-position' values on a fixed-size video element, with a SVG image and 'object-fit:contain'.</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="object-position-svg-002-ref.html">
+    <style type="text/css">
+      video {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+
+    </style>
+  </head>
+  <body>
+    <video poster="support/colors-8x16.svg" class="op_x-7"></video>
+    <video poster="support/colors-8x16.svg" class="op_x13"></video>
+    <video poster="support/colors-8x16.svg" class="op_x23"></video>
+    <video poster="support/colors-8x16.svg" class="op_x50"></video>
+    <video poster="support/colors-8x16.svg" class="op_x75"></video>
+    <video poster="support/colors-8x16.svg" class="op_x88"></video>
+    <video poster="support/colors-8x16.svg" class="op_x111"></video>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/images3/reftest-stylo.list
new file mode 100644
index 000000000..5dd182187
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/reftest-stylo.list
@@ -0,0 +1,209 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+# Tests for 'object-fit' / 'object-position' with a PNG image
+== object-fit-fill-png-001c.html object-fit-fill-png-001c.html
+fails == object-fit-fill-png-001e.html object-fit-fill-png-001e.html
+== object-fit-fill-png-001i.html object-fit-fill-png-001i.html
+fails == object-fit-fill-png-001o.html object-fit-fill-png-001o.html
+== object-fit-fill-png-001p.html object-fit-fill-png-001p.html
+== object-fit-fill-png-002c.html object-fit-fill-png-002c.html
+fails == object-fit-fill-png-002e.html object-fit-fill-png-002e.html
+== object-fit-fill-png-002i.html object-fit-fill-png-002i.html
+fails == object-fit-fill-png-002o.html object-fit-fill-png-002o.html
+== object-fit-fill-png-002p.html object-fit-fill-png-002p.html
+== object-fit-contain-png-001c.html object-fit-contain-png-001c.html
+fails == object-fit-contain-png-001e.html object-fit-contain-png-001e.html
+== object-fit-contain-png-001i.html object-fit-contain-png-001i.html
+fails == object-fit-contain-png-001o.html object-fit-contain-png-001o.html
+== object-fit-contain-png-001p.html object-fit-contain-png-001p.html
+== object-fit-contain-png-002c.html object-fit-contain-png-002c.html
+fails == object-fit-contain-png-002e.html object-fit-contain-png-002e.html
+== object-fit-contain-png-002i.html object-fit-contain-png-002i.html
+fails == object-fit-contain-png-002o.html object-fit-contain-png-002o.html
+== object-fit-contain-png-002p.html object-fit-contain-png-002p.html
+== object-fit-cover-png-001c.html object-fit-cover-png-001c.html
+fails == object-fit-cover-png-001e.html object-fit-cover-png-001e.html
+== object-fit-cover-png-001i.html object-fit-cover-png-001i.html
+== object-fit-cover-png-001o.html object-fit-cover-png-001o.html
+== object-fit-cover-png-001p.html object-fit-cover-png-001p.html
+== object-fit-cover-png-002c.html object-fit-cover-png-002c.html
+fails == object-fit-cover-png-002e.html object-fit-cover-png-002e.html
+== object-fit-cover-png-002i.html object-fit-cover-png-002i.html
+fails == object-fit-cover-png-002o.html object-fit-cover-png-002o.html
+== object-fit-cover-png-002p.html object-fit-cover-png-002p.html
+skip == object-fit-none-png-001c.html object-fit-none-png-001c.html
+== object-fit-none-png-001e.html object-fit-none-png-001e.html
+== object-fit-none-png-001i.html object-fit-none-png-001i.html
+fails == object-fit-none-png-001o.html object-fit-none-png-001o.html
+== object-fit-none-png-001p.html object-fit-none-png-001p.html
+== object-fit-none-png-002c.html object-fit-none-png-002c.html
+fails == object-fit-none-png-002e.html object-fit-none-png-002e.html
+== object-fit-none-png-002i.html object-fit-none-png-002i.html
+fails == object-fit-none-png-002o.html object-fit-none-png-002o.html
+== object-fit-none-png-002p.html object-fit-none-png-002p.html
+== object-fit-scale-down-png-001c.html object-fit-scale-down-png-001c.html
+== object-fit-scale-down-png-001e.html object-fit-scale-down-png-001e.html
+== object-fit-scale-down-png-001i.html object-fit-scale-down-png-001i.html
+== object-fit-scale-down-png-001o.html object-fit-scale-down-png-001o.html
+== object-fit-scale-down-png-001p.html object-fit-scale-down-png-001p.html
+== object-fit-scale-down-png-002c.html object-fit-scale-down-png-002c.html
+fails == object-fit-scale-down-png-002e.html object-fit-scale-down-png-002e.html
+== object-fit-scale-down-png-002i.html object-fit-scale-down-png-002i.html
+fails == object-fit-scale-down-png-002o.html object-fit-scale-down-png-002o.html
+== object-fit-scale-down-png-002p.html object-fit-scale-down-png-002p.html
+
+# Tests for 'object-fit' / 'object-position' with an SVG image
+fails == object-fit-fill-svg-001e.html object-fit-fill-svg-001e.html
+== object-fit-fill-svg-001i.html object-fit-fill-svg-001i.html
+== object-fit-fill-svg-001o.html object-fit-fill-svg-001o.html
+== object-fit-fill-svg-001p.html object-fit-fill-svg-001p.html
+fails == object-fit-fill-svg-002e.html object-fit-fill-svg-002e.html
+== object-fit-fill-svg-002i.html object-fit-fill-svg-002i.html
+fails == object-fit-fill-svg-002o.html object-fit-fill-svg-002o.html
+== object-fit-fill-svg-002p.html object-fit-fill-svg-002p.html
+fails == object-fit-fill-svg-003e.html object-fit-fill-svg-003e.html
+== object-fit-fill-svg-003i.html object-fit-fill-svg-003i.html
+fails == object-fit-fill-svg-003o.html object-fit-fill-svg-003o.html
+== object-fit-fill-svg-003p.html object-fit-fill-svg-003p.html
+fails == object-fit-fill-svg-004e.html object-fit-fill-svg-004e.html
+== object-fit-fill-svg-004i.html object-fit-fill-svg-004i.html
+== object-fit-fill-svg-004o.html object-fit-fill-svg-004o.html
+== object-fit-fill-svg-004p.html object-fit-fill-svg-004p.html
+== object-fit-fill-svg-005e.html object-fit-fill-svg-005e.html
+# bug 1092436
+== object-fit-fill-svg-005i.html object-fit-fill-svg-005i.html
+# bug 1092436
+== object-fit-fill-svg-005o.html object-fit-fill-svg-005o.html
+# bug 1092436
+== object-fit-fill-svg-005p.html object-fit-fill-svg-005p.html
+# bug 1092436
+fails == object-fit-fill-svg-006e.html object-fit-fill-svg-006e.html
+# bug 1092436
+== object-fit-fill-svg-006i.html object-fit-fill-svg-006i.html
+# bug 1092436
+fails == object-fit-fill-svg-006o.html object-fit-fill-svg-006o.html
+# bug 1092436
+== object-fit-fill-svg-006p.html object-fit-fill-svg-006p.html
+# bug 1092436
+fails skip-if(B2G) == object-fit-contain-svg-001e.html object-fit-contain-svg-001e.html
+== object-fit-contain-svg-001i.html object-fit-contain-svg-001i.html
+fails skip-if(B2G) == object-fit-contain-svg-001o.html object-fit-contain-svg-001o.html
+== object-fit-contain-svg-001p.html object-fit-contain-svg-001p.html
+skip-if(B2G) == object-fit-contain-svg-002e.html object-fit-contain-svg-002e.html
+== object-fit-contain-svg-002i.html object-fit-contain-svg-002i.html
+skip-if(B2G) == object-fit-contain-svg-002o.html object-fit-contain-svg-002o.html
+== object-fit-contain-svg-002p.html object-fit-contain-svg-002p.html
+fails == object-fit-contain-svg-003e.html object-fit-contain-svg-003e.html
+== object-fit-contain-svg-003i.html object-fit-contain-svg-003i.html
+fails == object-fit-contain-svg-003o.html object-fit-contain-svg-003o.html
+== object-fit-contain-svg-003p.html object-fit-contain-svg-003p.html
+== object-fit-contain-svg-004e.html object-fit-contain-svg-004e.html
+== object-fit-contain-svg-004i.html object-fit-contain-svg-004i.html
+== object-fit-contain-svg-004o.html object-fit-contain-svg-004o.html
+== object-fit-contain-svg-004p.html object-fit-contain-svg-004p.html
+fails == object-fit-contain-svg-005e.html object-fit-contain-svg-005e.html
+== object-fit-contain-svg-005i.html object-fit-contain-svg-005i.html
+== object-fit-contain-svg-005o.html object-fit-contain-svg-005o.html
+== object-fit-contain-svg-005p.html object-fit-contain-svg-005p.html
+fails == object-fit-contain-svg-006e.html object-fit-contain-svg-006e.html
+== object-fit-contain-svg-006i.html object-fit-contain-svg-006i.html
+fails == object-fit-contain-svg-006o.html object-fit-contain-svg-006o.html
+== object-fit-contain-svg-006p.html object-fit-contain-svg-006p.html
+== object-fit-cover-svg-001e.html object-fit-cover-svg-001e.html
+== object-fit-cover-svg-001i.html object-fit-cover-svg-001i.html
+== object-fit-cover-svg-001o.html object-fit-cover-svg-001o.html
+== object-fit-cover-svg-001p.html object-fit-cover-svg-001p.html
+skip-if(B2G) == object-fit-cover-svg-002e.html object-fit-cover-svg-002e.html
+== object-fit-cover-svg-002i.html object-fit-cover-svg-002i.html
+fails skip-if(B2G) == object-fit-cover-svg-002o.html object-fit-cover-svg-002o.html
+== object-fit-cover-svg-002p.html object-fit-cover-svg-002p.html
+fails skip-if(B2G) == object-fit-cover-svg-003e.html object-fit-cover-svg-003e.html
+== object-fit-cover-svg-003i.html object-fit-cover-svg-003i.html
+fails skip-if(B2G) == object-fit-cover-svg-003o.html object-fit-cover-svg-003o.html
+== object-fit-cover-svg-003p.html object-fit-cover-svg-003p.html
+fails skip-if(B2G) == object-fit-cover-svg-004e.html object-fit-cover-svg-004e.html
+== object-fit-cover-svg-004i.html object-fit-cover-svg-004i.html
+skip-if(B2G) == object-fit-cover-svg-004o.html object-fit-cover-svg-004o.html
+== object-fit-cover-svg-004p.html object-fit-cover-svg-004p.html
+skip-if(B2G) == object-fit-cover-svg-005e.html object-fit-cover-svg-005e.html
+== object-fit-cover-svg-005i.html object-fit-cover-svg-005i.html
+fails skip-if(B2G) == object-fit-cover-svg-005o.html object-fit-cover-svg-005o.html
+== object-fit-cover-svg-005p.html object-fit-cover-svg-005p.html
+fails skip-if(B2G) == object-fit-cover-svg-006e.html object-fit-cover-svg-006e.html
+== object-fit-cover-svg-006i.html object-fit-cover-svg-006i.html
+fails skip-if(B2G) == object-fit-cover-svg-006o.html object-fit-cover-svg-006o.html
+== object-fit-cover-svg-006p.html object-fit-cover-svg-006p.html
+fails == object-fit-none-svg-001e.html object-fit-none-svg-001e.html
+== object-fit-none-svg-001i.html object-fit-none-svg-001i.html
+fails == object-fit-none-svg-001o.html object-fit-none-svg-001o.html
+== object-fit-none-svg-001p.html object-fit-none-svg-001p.html
+== object-fit-none-svg-002e.html object-fit-none-svg-002e.html
+== object-fit-none-svg-002i.html object-fit-none-svg-002i.html
+fails == object-fit-none-svg-002o.html object-fit-none-svg-002o.html
+== object-fit-none-svg-002p.html object-fit-none-svg-002p.html
+fails == object-fit-none-svg-003e.html object-fit-none-svg-003e.html
+== object-fit-none-svg-003i.html object-fit-none-svg-003i.html
+== object-fit-none-svg-003o.html object-fit-none-svg-003o.html
+== object-fit-none-svg-003p.html object-fit-none-svg-003p.html
+fails == object-fit-none-svg-004e.html object-fit-none-svg-004e.html
+== object-fit-none-svg-004i.html object-fit-none-svg-004i.html
+fails == object-fit-none-svg-004o.html object-fit-none-svg-004o.html
+== object-fit-none-svg-004p.html object-fit-none-svg-004p.html
+fails skip-if(B2G) == object-fit-none-svg-005e.html object-fit-none-svg-005e.html
+== object-fit-none-svg-005i.html object-fit-none-svg-005i.html
+fails skip-if(B2G) == object-fit-none-svg-005o.html object-fit-none-svg-005o.html
+== object-fit-none-svg-005p.html object-fit-none-svg-005p.html
+fails skip-if(B2G) == object-fit-none-svg-006e.html object-fit-none-svg-006e.html
+== object-fit-none-svg-006i.html object-fit-none-svg-006i.html
+fails skip-if(B2G) == object-fit-none-svg-006o.html object-fit-none-svg-006o.html
+== object-fit-none-svg-006p.html object-fit-none-svg-006p.html
+fails skip-if(B2G) == object-fit-scale-down-svg-001e.html object-fit-scale-down-svg-001e.html
+== object-fit-scale-down-svg-001i.html object-fit-scale-down-svg-001i.html
+fails skip-if(B2G) == object-fit-scale-down-svg-001o.html object-fit-scale-down-svg-001o.html
+== object-fit-scale-down-svg-001p.html object-fit-scale-down-svg-001p.html
+skip-if(B2G) == object-fit-scale-down-svg-002e.html object-fit-scale-down-svg-002e.html
+== object-fit-scale-down-svg-002i.html object-fit-scale-down-svg-002i.html
+fails skip-if(B2G) == object-fit-scale-down-svg-002o.html object-fit-scale-down-svg-002o.html
+== object-fit-scale-down-svg-002p.html object-fit-scale-down-svg-002p.html
+fails == object-fit-scale-down-svg-003e.html object-fit-scale-down-svg-003e.html
+== object-fit-scale-down-svg-003i.html object-fit-scale-down-svg-003i.html
+fails == object-fit-scale-down-svg-003o.html object-fit-scale-down-svg-003o.html
+== object-fit-scale-down-svg-003p.html object-fit-scale-down-svg-003p.html
+== object-fit-scale-down-svg-004e.html object-fit-scale-down-svg-004e.html
+== object-fit-scale-down-svg-004i.html object-fit-scale-down-svg-004i.html
+fails == object-fit-scale-down-svg-004o.html object-fit-scale-down-svg-004o.html
+== object-fit-scale-down-svg-004p.html object-fit-scale-down-svg-004p.html
+== object-fit-scale-down-svg-005e.html object-fit-scale-down-svg-005e.html
+== object-fit-scale-down-svg-005i.html object-fit-scale-down-svg-005i.html
+fails == object-fit-scale-down-svg-005o.html object-fit-scale-down-svg-005o.html
+== object-fit-scale-down-svg-005p.html object-fit-scale-down-svg-005p.html
+fails == object-fit-scale-down-svg-006e.html object-fit-scale-down-svg-006e.html
+== object-fit-scale-down-svg-006i.html object-fit-scale-down-svg-006i.html
+== object-fit-scale-down-svg-006o.html object-fit-scale-down-svg-006o.html
+== object-fit-scale-down-svg-006p.html object-fit-scale-down-svg-006p.html
+== object-position-png-001c.html object-position-png-001c.html
+# bug 1105150
+fuzzy-if(Mulet,2,20) == object-position-png-001e.html object-position-png-001e.html
+# Bug 1150536
+== object-position-png-001i.html object-position-png-001i.html
+fails fuzzy-if(Mulet,2,20) == object-position-png-001o.html object-position-png-001o.html
+# Bug 1150492
+== object-position-png-001p.html object-position-png-001p.html
+== object-position-png-002c.html object-position-png-002c.html
+# bug 1105150
+== object-position-png-002e.html object-position-png-002e.html
+== object-position-png-002i.html object-position-png-002i.html
+fails == object-position-png-002o.html object-position-png-002o.html
+== object-position-png-002p.html object-position-png-002p.html
+== object-position-svg-001e.html object-position-svg-001e.html
+# bug 1103286
+== object-position-svg-001i.html object-position-svg-001i.html
+fails == object-position-svg-001o.html object-position-svg-001o.html
+# bug 1103286
+== object-position-svg-001p.html object-position-svg-001p.html
+fails == object-position-svg-002e.html object-position-svg-002e.html
+# bug 1103286
+== object-position-svg-002i.html object-position-svg-002i.html
+== object-position-svg-002o.html object-position-svg-002o.html
+# bug 1103286
+== object-position-svg-002p.html object-position-svg-002p.html
diff --git a/layout/reftests/w3c-css/submitted/images3/reftest.list b/layout/reftests/w3c-css/submitted/images3/reftest.list
new file mode 100644
index 000000000..3834b0713
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/reftest.list
@@ -0,0 +1,192 @@
+default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+# Tests for 'object-fit' / 'object-position' with a PNG image
+== object-fit-fill-png-001c.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-001e.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-001i.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-001o.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-001p.html object-fit-fill-png-001-ref.html
+== object-fit-fill-png-002c.html object-fit-fill-png-002-ref.html
+== object-fit-fill-png-002e.html object-fit-fill-png-002-ref.html
+== object-fit-fill-png-002i.html object-fit-fill-png-002-ref.html
+== object-fit-fill-png-002o.html object-fit-fill-png-002-ref.html
+== object-fit-fill-png-002p.html object-fit-fill-png-002-ref.html
+== object-fit-contain-png-001c.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-001e.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-001i.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-001o.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-001p.html object-fit-contain-png-001-ref.html
+== object-fit-contain-png-002c.html object-fit-contain-png-002-ref.html
+== object-fit-contain-png-002e.html object-fit-contain-png-002-ref.html
+== object-fit-contain-png-002i.html object-fit-contain-png-002-ref.html
+== object-fit-contain-png-002o.html object-fit-contain-png-002-ref.html
+== object-fit-contain-png-002p.html object-fit-contain-png-002-ref.html
+== object-fit-cover-png-001c.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-001e.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-001i.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-001o.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-001p.html object-fit-cover-png-001-ref.html
+== object-fit-cover-png-002c.html object-fit-cover-png-002-ref.html
+== object-fit-cover-png-002e.html object-fit-cover-png-002-ref.html
+== object-fit-cover-png-002i.html object-fit-cover-png-002-ref.html
+== object-fit-cover-png-002o.html object-fit-cover-png-002-ref.html
+== object-fit-cover-png-002p.html object-fit-cover-png-002-ref.html
+== object-fit-none-png-001c.html object-fit-none-png-001-ref.html
+== object-fit-none-png-001e.html object-fit-none-png-001-ref.html
+== object-fit-none-png-001i.html object-fit-none-png-001-ref.html
+== object-fit-none-png-001o.html object-fit-none-png-001-ref.html
+== object-fit-none-png-001p.html object-fit-none-png-001-ref.html
+== object-fit-none-png-002c.html object-fit-none-png-002-ref.html
+== object-fit-none-png-002e.html object-fit-none-png-002-ref.html
+== object-fit-none-png-002i.html object-fit-none-png-002-ref.html
+== object-fit-none-png-002o.html object-fit-none-png-002-ref.html
+== object-fit-none-png-002p.html object-fit-none-png-002-ref.html
+== object-fit-scale-down-png-001c.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-001e.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-001i.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-001o.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-001p.html object-fit-scale-down-png-001-ref.html
+== object-fit-scale-down-png-002c.html object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-png-002e.html object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-png-002i.html object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-png-002o.html object-fit-scale-down-png-002-ref.html
+== object-fit-scale-down-png-002p.html object-fit-scale-down-png-002-ref.html
+
+# Tests for 'object-fit' / 'object-position' with an SVG image
+== object-fit-fill-svg-001e.html object-fit-fill-svg-001-ref.html
+== object-fit-fill-svg-001i.html object-fit-fill-svg-001-ref.html
+== object-fit-fill-svg-001o.html object-fit-fill-svg-001-ref.html
+== object-fit-fill-svg-001p.html object-fit-fill-svg-001-ref.html
+== object-fit-fill-svg-002e.html object-fit-fill-svg-002-ref.html
+== object-fit-fill-svg-002i.html object-fit-fill-svg-002-ref.html
+== object-fit-fill-svg-002o.html object-fit-fill-svg-002-ref.html
+== object-fit-fill-svg-002p.html object-fit-fill-svg-002-ref.html
+== object-fit-fill-svg-003e.html object-fit-fill-svg-003-ref.html
+== object-fit-fill-svg-003i.html object-fit-fill-svg-003-ref.html
+== object-fit-fill-svg-003o.html object-fit-fill-svg-003-ref.html
+== object-fit-fill-svg-003p.html object-fit-fill-svg-003-ref.html
+== object-fit-fill-svg-004e.html object-fit-fill-svg-004-ref.html
+== object-fit-fill-svg-004i.html object-fit-fill-svg-004-ref.html
+== object-fit-fill-svg-004o.html object-fit-fill-svg-004-ref.html
+== object-fit-fill-svg-004p.html object-fit-fill-svg-004-ref.html
+fails == object-fit-fill-svg-005e.html object-fit-fill-svg-005-ref.html # bug 1092436
+fails == object-fit-fill-svg-005i.html object-fit-fill-svg-005-ref.html # bug 1092436
+fails == object-fit-fill-svg-005o.html object-fit-fill-svg-005-ref.html # bug 1092436
+fails == object-fit-fill-svg-005p.html object-fit-fill-svg-005-ref.html # bug 1092436
+fails == object-fit-fill-svg-006e.html object-fit-fill-svg-006-ref.html # bug 1092436
+fails == object-fit-fill-svg-006i.html object-fit-fill-svg-006-ref.html # bug 1092436
+fails == object-fit-fill-svg-006o.html object-fit-fill-svg-006-ref.html # bug 1092436
+fails == object-fit-fill-svg-006p.html object-fit-fill-svg-006-ref.html # bug 1092436
+== object-fit-contain-svg-001e.html object-fit-contain-svg-001-ref.html
+== object-fit-contain-svg-001i.html object-fit-contain-svg-001-ref.html
+== object-fit-contain-svg-001o.html object-fit-contain-svg-001-ref.html
+== object-fit-contain-svg-001p.html object-fit-contain-svg-001-ref.html
+== object-fit-contain-svg-002e.html object-fit-contain-svg-002-ref.html
+== object-fit-contain-svg-002i.html object-fit-contain-svg-002-ref.html
+== object-fit-contain-svg-002o.html object-fit-contain-svg-002-ref.html
+== object-fit-contain-svg-002p.html object-fit-contain-svg-002-ref.html
+== object-fit-contain-svg-003e.html object-fit-contain-svg-003-ref.html
+== object-fit-contain-svg-003i.html object-fit-contain-svg-003-ref.html
+== object-fit-contain-svg-003o.html object-fit-contain-svg-003-ref.html
+== object-fit-contain-svg-003p.html object-fit-contain-svg-003-ref.html
+== object-fit-contain-svg-004e.html object-fit-contain-svg-004-ref.html
+== object-fit-contain-svg-004i.html object-fit-contain-svg-004-ref.html
+== object-fit-contain-svg-004o.html object-fit-contain-svg-004-ref.html
+== object-fit-contain-svg-004p.html object-fit-contain-svg-004-ref.html
+== object-fit-contain-svg-005e.html object-fit-contain-svg-005-ref.html
+== object-fit-contain-svg-005i.html object-fit-contain-svg-005-ref.html
+== object-fit-contain-svg-005o.html object-fit-contain-svg-005-ref.html
+== object-fit-contain-svg-005p.html object-fit-contain-svg-005-ref.html
+== object-fit-contain-svg-006e.html object-fit-contain-svg-006-ref.html
+== object-fit-contain-svg-006i.html object-fit-contain-svg-006-ref.html
+== object-fit-contain-svg-006o.html object-fit-contain-svg-006-ref.html
+== object-fit-contain-svg-006p.html object-fit-contain-svg-006-ref.html
+== object-fit-cover-svg-001e.html object-fit-cover-svg-001-ref.html
+== object-fit-cover-svg-001i.html object-fit-cover-svg-001-ref.html
+== object-fit-cover-svg-001o.html object-fit-cover-svg-001-ref.html
+== object-fit-cover-svg-001p.html object-fit-cover-svg-001-ref.html
+== object-fit-cover-svg-002e.html object-fit-cover-svg-002-ref.html
+== object-fit-cover-svg-002i.html object-fit-cover-svg-002-ref.html
+== object-fit-cover-svg-002o.html object-fit-cover-svg-002-ref.html
+== object-fit-cover-svg-002p.html object-fit-cover-svg-002-ref.html
+== object-fit-cover-svg-003e.html object-fit-cover-svg-003-ref.html
+== object-fit-cover-svg-003i.html object-fit-cover-svg-003-ref.html
+== object-fit-cover-svg-003o.html object-fit-cover-svg-003-ref.html
+== object-fit-cover-svg-003p.html object-fit-cover-svg-003-ref.html
+== object-fit-cover-svg-004e.html object-fit-cover-svg-004-ref.html
+== object-fit-cover-svg-004i.html object-fit-cover-svg-004-ref.html
+== object-fit-cover-svg-004o.html object-fit-cover-svg-004-ref.html
+== object-fit-cover-svg-004p.html object-fit-cover-svg-004-ref.html
+== object-fit-cover-svg-005e.html object-fit-cover-svg-005-ref.html
+== object-fit-cover-svg-005i.html object-fit-cover-svg-005-ref.html
+== object-fit-cover-svg-005o.html object-fit-cover-svg-005-ref.html
+== object-fit-cover-svg-005p.html object-fit-cover-svg-005-ref.html
+== object-fit-cover-svg-006e.html object-fit-cover-svg-006-ref.html
+== object-fit-cover-svg-006i.html object-fit-cover-svg-006-ref.html
+== object-fit-cover-svg-006o.html object-fit-cover-svg-006-ref.html
+== object-fit-cover-svg-006p.html object-fit-cover-svg-006-ref.html
+== object-fit-none-svg-001e.html object-fit-none-svg-001-ref.html
+== object-fit-none-svg-001i.html object-fit-none-svg-001-ref.html
+== object-fit-none-svg-001o.html object-fit-none-svg-001-ref.html
+== object-fit-none-svg-001p.html object-fit-none-svg-001-ref.html
+== object-fit-none-svg-002e.html object-fit-none-svg-002-ref.html
+== object-fit-none-svg-002i.html object-fit-none-svg-002-ref.html
+== object-fit-none-svg-002o.html object-fit-none-svg-002-ref.html
+== object-fit-none-svg-002p.html object-fit-none-svg-002-ref.html
+== object-fit-none-svg-003e.html object-fit-none-svg-003-ref.html
+== object-fit-none-svg-003i.html object-fit-none-svg-003-ref.html
+== object-fit-none-svg-003o.html object-fit-none-svg-003-ref.html
+== object-fit-none-svg-003p.html object-fit-none-svg-003-ref.html
+== object-fit-none-svg-004e.html object-fit-none-svg-004-ref.html
+== object-fit-none-svg-004i.html object-fit-none-svg-004-ref.html
+== object-fit-none-svg-004o.html object-fit-none-svg-004-ref.html
+== object-fit-none-svg-004p.html object-fit-none-svg-004-ref.html
+== object-fit-none-svg-005e.html object-fit-none-svg-005-ref.html
+== object-fit-none-svg-005i.html object-fit-none-svg-005-ref.html
+== object-fit-none-svg-005o.html object-fit-none-svg-005-ref.html
+== object-fit-none-svg-005p.html object-fit-none-svg-005-ref.html
+== object-fit-none-svg-006e.html object-fit-none-svg-006-ref.html
+== object-fit-none-svg-006i.html object-fit-none-svg-006-ref.html
+== object-fit-none-svg-006o.html object-fit-none-svg-006-ref.html
+== object-fit-none-svg-006p.html object-fit-none-svg-006-ref.html
+== object-fit-scale-down-svg-001e.html object-fit-scale-down-svg-001-ref.html
+== object-fit-scale-down-svg-001i.html object-fit-scale-down-svg-001-ref.html
+== object-fit-scale-down-svg-001o.html object-fit-scale-down-svg-001-ref.html
+== object-fit-scale-down-svg-001p.html object-fit-scale-down-svg-001-ref.html
+== object-fit-scale-down-svg-002e.html object-fit-scale-down-svg-002-ref.html
+== object-fit-scale-down-svg-002i.html object-fit-scale-down-svg-002-ref.html
+== object-fit-scale-down-svg-002o.html object-fit-scale-down-svg-002-ref.html
+== object-fit-scale-down-svg-002p.html object-fit-scale-down-svg-002-ref.html
+== object-fit-scale-down-svg-003e.html object-fit-scale-down-svg-003-ref.html
+== object-fit-scale-down-svg-003i.html object-fit-scale-down-svg-003-ref.html
+== object-fit-scale-down-svg-003o.html object-fit-scale-down-svg-003-ref.html
+== object-fit-scale-down-svg-003p.html object-fit-scale-down-svg-003-ref.html
+== object-fit-scale-down-svg-004e.html object-fit-scale-down-svg-004-ref.html
+== object-fit-scale-down-svg-004i.html object-fit-scale-down-svg-004-ref.html
+== object-fit-scale-down-svg-004o.html object-fit-scale-down-svg-004-ref.html
+== object-fit-scale-down-svg-004p.html object-fit-scale-down-svg-004-ref.html
+== object-fit-scale-down-svg-005e.html object-fit-scale-down-svg-005-ref.html
+== object-fit-scale-down-svg-005i.html object-fit-scale-down-svg-005-ref.html
+== object-fit-scale-down-svg-005o.html object-fit-scale-down-svg-005-ref.html
+== object-fit-scale-down-svg-005p.html object-fit-scale-down-svg-005-ref.html
+== object-fit-scale-down-svg-006e.html object-fit-scale-down-svg-006-ref.html
+== object-fit-scale-down-svg-006i.html object-fit-scale-down-svg-006-ref.html
+== object-fit-scale-down-svg-006o.html object-fit-scale-down-svg-006-ref.html
+== object-fit-scale-down-svg-006p.html object-fit-scale-down-svg-006-ref.html
+fails == object-position-png-001c.html object-position-png-001-ref.html # bug 1105150
+== object-position-png-001e.html object-position-png-001-ref.html
+== object-position-png-001i.html object-position-png-001-ref.html
+== object-position-png-001o.html object-position-png-001-ref.html
+== object-position-png-001p.html object-position-png-001-ref.html
+fails == object-position-png-002c.html object-position-png-002-ref.html # bug 1105150
+== object-position-png-002e.html object-position-png-002-ref.html
+== object-position-png-002i.html object-position-png-002-ref.html
+== object-position-png-002o.html object-position-png-002-ref.html
+== object-position-png-002p.html object-position-png-002-ref.html
+fails == object-position-svg-001e.html object-position-svg-001-ref.html # bug 1103286
+== object-position-svg-001i.html object-position-svg-001-ref.html
+fails == object-position-svg-001o.html object-position-svg-001-ref.html # bug 1103286
+== object-position-svg-001p.html object-position-svg-001-ref.html
+fails == object-position-svg-002e.html object-position-svg-002-ref.html # bug 1103286
+== object-position-svg-002i.html object-position-svg-002-ref.html
+fails == object-position-svg-002o.html object-position-svg-002-ref.html # bug 1103286
+== object-position-svg-002p.html object-position-svg-002-ref.html
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg
new file mode 100644
index 000000000..db715d875
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg
new file mode 100644
index 000000000..1b0bca073
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/colors-16x8.png b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png
new file mode 100644
index 000000000..bd2384587
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg
new file mode 100644
index 000000000..08e365940
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/colors-8x16-noSize.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-noSize.svg
new file mode 100644
index 000000000..e741537b9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg
new file mode 100644
index 000000000..ec8c59dcb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/colors-8x16.png b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png
new file mode 100644
index 000000000..596fdb389
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg
new file mode 100644
index 000000000..c336e3af1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/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/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh
new file mode 100644
index 000000000..b66ea4726
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh
@@ -0,0 +1,72 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# Script to generate <canvas src> reftest files for "object-fit" and
+# "object-position", from corresponding reftest files that use <object>.
+#
+# This script expects to be run from this working directory:
+#  mozilla-central/layout/reftests/w3c-css/submitted/images3
+
+# Array of image files that we'll use
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+canvasAttributeArr=('width="16" height="8"'   'width="8" height="16"')
+numImageFiles=${#imageFileArr[@]}
+
+
+for ((i = 0; i < $numImageFiles; i++)); do
+
+  imageFile=${imageFileArr[$i]}
+  canvasAttrs=${canvasAttributeArr[$i]}
+
+  # Loop across <object> tests:
+  # (We assume that tests that end with "001" use the first PNG image in
+  # $imageFileArr, and tests that end with "002" use the second PNG image.)
+  let testNum=$i+1
+  for origTestName in object-*-png-*00${testNum}o.html; do
+    # Find the corresponding reference case:
+    origReferenceName=$(echo $origTestName |
+                        sed "s/o.html/-ref.html/")
+
+    # Replace "o" suffix in filename with "c" (for "canvas")
+    canvasTestName=$(echo $origTestName |
+                     sed "s/o.html/c.html/")
+
+    # Generate testcase
+    # (converting <object data="..."> to <canvas width="..." height="...">
+    echo "Generating $canvasTestName from $origTestName."
+    hg cp $origTestName $canvasTestName
+
+    # Do string-replacements in testcase to convert it to test canvas:
+    # Adjust html & body nodes:
+    sed -i "s|<html>|<html class=\"reftest-wait\">|" $canvasTestName
+    sed -i "s|<body>|<body onload=\"drawImageToCanvases('$imageFile')\">|" $canvasTestName
+    # Adjust <title>:
+    sed -i "s|object element|canvas element|g" $canvasTestName
+    # Tweak the actual tags (open & close tags, and CSS rule):
+    sed -i "s|object {|canvas {|" $canvasTestName
+    sed -i "s|<object|<canvas|" $canvasTestName
+    sed -i "s|</object>|</canvas>|" $canvasTestName
+    # Drop "data" attr (pointing to image URI) and replace with
+    # width/height attrs to establish the canvas's intrinsic size:
+    sed -i "s|data=\"$imageFile\"|$canvasAttrs|" $canvasTestName
+
+    # Add a <script> block to draw an image into each canvas:
+    sed -i "/<\/style>/a \\
+    <script>\n\
+      function drawImageToCanvases(imageURI) {\n\
+        var image = new Image();\n\
+        image.onload = function() {\n\
+          var canvasElems = document.getElementsByTagName(\"canvas\");\n\
+          for (var i = 0; i < canvasElems.length; i++) {\n\
+            var ctx = canvasElems[i].getContext(\"2d\");\n\
+            ctx.drawImage(image, 0, 0);\n\
+          }\n\
+          document.documentElement.removeAttribute(\"class\");\n\
+        }\n\
+        image.src = imageURI;\n\
+      }\n\
+    <\/script>" $canvasTestName
+  done
+done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh
new file mode 100644
index 000000000..476977c89
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh
@@ -0,0 +1,109 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position", using a template testcase
+# file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+# (One exception: since there is no "background-size" equivalent of
+# "object-fit: scale-down", we add an extra CSS rule for the "scale-down"
+# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html
+
+imageFileFormat="png"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of "object-fit" values, & of corresponding "background-size" values.
+# (Note: background-size has no equivalent for "object-fit: scale-down". We use
+# "auto auto" here, which is equivalent *some* of the time; and for the cases
+# where it's *not* equivalent, we use an extra CSS rule in the reference case.
+# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+objectFitArr=(           "fill"      "contain" "cover" "none"      "scale-down" )
+backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto"  )
+numObjectFitVals=${#objectFitArr[@]}
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+# FIRST: Add 'default-preferences' line to the top of our reftest manifest:
+echo "default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+# Tests for 'object-fit' / 'object-position' with a PNG image" \
+ >> $REFTEST_LIST_FILE
+
+for ((i = 0; i < $numObjectFitVals; i++)); do
+  objectFit=${objectFitArr[$i]}
+  backgroundSizeEquiv=${backgroundSizeEquivArr[$i]}
+
+  # The reference case for "scale-down" needs an additional style rule, to
+  # look like "object-fit: scale-down" on small objects. (This is necessary
+  # because "background-size" doesn't have a value that exactly maps to
+  # "object-fit: scale-down".)
+  if [[ $objectFit == "scale-down" ]]; then
+      scaledownRule=".objectOuter > .small { background-size: contain; }"
+      scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/"
+  else
+      # (We're not testing "scale-down" in this generated file, so just delete
+      # the template's placeholder line for a "scale-down"-specific CSS rule.)
+      scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d"
+  fi
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \
+      | sed "$scaledownSedCmd" \
+      > $FILE_PATH/$filenameRef;
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="'object-fit: $objectFit' on $tagName element, with a PNG image and with various 'object-position' values"
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
+done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh
new file mode 100644
index 000000000..c4d51877e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh
@@ -0,0 +1,116 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position", using a template testcase
+# file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+# (One exception: since there is no "background-size" equivalent of
+# "object-fit: scale-down", we add an extra CSS rule for the "scale-down"
+# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html
+
+imageFileFormat="svg"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.svg"
+              "support/colors-8x16.svg"
+              "support/colors-16x8-noSize.svg"
+              "support/colors-8x16-noSize.svg"
+              "support/colors-16x8-parDefault.svg"
+              "support/colors-8x16-parDefault.svg")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of "object-fit" values, & of corresponding "background-size" values.
+# (Note: background-size has no equivalent for "object-fit: scale-down". We use
+# "auto auto" here, which is equivalent *some* of the time; and for the cases
+# where it's *not* equivalent, we use an extra CSS rule in the reference case.
+# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+objectFitArr=(           "fill"      "contain" "cover" "none"      "scale-down" )
+backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto"  )
+numObjectFitVals=${#objectFitArr[@]}
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+# FIRST: Add blank line & descriptive comment to reftest manifest:
+echo "
+# Tests for 'object-fit' / 'object-position' with an SVG image" \
+ >> $REFTEST_LIST_FILE
+
+for ((i = 0; i < $numObjectFitVals; i++)); do
+  objectFit=${objectFitArr[$i]}
+  backgroundSizeEquiv=${backgroundSizeEquivArr[$i]}
+
+  # The reference case for "scale-down" needs an additional style rule, to
+  # look like "object-fit: scale-down" on small objects. (This is necessary
+  # because "background-size" doesn't have a value that exactly maps to
+  # "object-fit: scale-down".)
+  if [[ $objectFit == "scale-down" ]]; then
+      scaledownRule=".objectOuter > .small { background-size: contain; }"
+      scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/"
+  else
+      # (We're not testing "scale-down" in this generated file, so just delete
+      # the template's placeholder line for a "scale-down"-specific CSS rule.)
+      scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d"
+  fi
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \
+      | sed "$scaledownSedCmd" \
+      | sed "/image-rendering:/d" \
+      > $FILE_PATH/$filenameRef;
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="'object-fit: $objectFit' on $tagName element, with a SVG image and with various 'object-position' values"
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \
+        | sed "/image-rendering:/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
+done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh
new file mode 100644
index 000000000..4763fabf7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh
@@ -0,0 +1,88 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position" (focusing on edge-case
+# object-position values that require pixel rounding), using a template
+# testcase file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html
+
+imageFileFormat="png"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of CSS classes to delete from the template, for a given image-file.
+# DETAILS: The template files contain some elements/styles that exercise
+# object-position x-values (op_x), and other elements/styles that exercise
+# object-position y-values (op_y). But actually, we'll only have extra space
+# for these percent values to resolve against in *one* dimension (since our
+# image-files are rectangular, and the container element is square, and we
+# scale the image up with "object-fit: contain"). So, we delete the
+# elements/styles in the dimension where object-position % values will just
+# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image).
+classPatternToDeleteArr=("op_x" "op_y")
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+
+    classPatternToDelete=${classPatternToDeleteArr[$j]}
+
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-position-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "/$classPatternToDelete/d" \
+      > $FILE_PATH/$filenameRef
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="various 'object-position' values on a fixed-size $tagName element, with a PNG image and 'object-fit:contain'."
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "/$classPatternToDelete/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh
new file mode 100644
index 000000000..e00385a47
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh
@@ -0,0 +1,88 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position" (focusing on edge-case
+# object-position values that require pixel rounding), using a template
+# testcase file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html
+
+imageFileFormat="svg"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.svg" "support/colors-8x16.svg")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of CSS classes to delete from the template, for a given image-file.
+# DETAILS: The template files contain some elements/styles that exercise
+# object-position x-values (op_x), and other elements/styles that exercise
+# object-position y-values (op_y). But actually, we'll only have extra space
+# for these percent values to resolve against in *one* dimension (since our
+# image-files are rectangular, and the container element is square, and we
+# scale the image up with "object-fit: contain"). So, we delete the
+# elements/styles in the dimension where object-position % values will just
+# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image).
+classPatternToDeleteArr=("op_x" "op_y")
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+
+    classPatternToDelete=${classPatternToDeleteArr[$j]}
+
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-position-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "/$classPatternToDelete/d" \
+      > $FILE_PATH/$filenameRef
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="various 'object-position' values on a fixed-size $tagName element, with a SVG image and 'object-fit:contain'."
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "/$classPatternToDelete/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html
new file mode 100644
index 000000000..94caf1ecb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-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("REPLACEME_IMAGE_FILENAME");
+        background-size: REPLACEME_BACKGROUND_SIZE_VAL;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      REPLACEME_SCALE_DOWN_EXTRA_RULE
+      .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/w3c-css/submitted/images3/support/template-object-fit-test.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html
new file mode 100644
index 000000000..fe1518235
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.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 Test: REPLACEME_TEST_TITLE</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="REPLACEME_REFERENCE_FILENAME">
+    <style type="text/css">
+      REPLACEME_CONTAINER_TAG {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: REPLACEME_OBJECT_FIT_VAL;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+    <!-- big/tall: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+    <!-- small: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html
new file mode 100644
index 000000000..19661f41f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("REPLACEME_IMAGE_FILENAME");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { background-position:  -7% 50% }
+      .op_x13  { background-position:  13% 50% }
+      .op_x23  { background-position:  23% 50% }
+      .op_x50  { background-position:  50% 50% }
+      .op_x75  { background-position:  75% 50% }
+      .op_x88  { background-position:  88% 50% }
+      .op_x111 { background-position: 111% 50% }
+      .op_y-7  { background-position: 50%  -7% }
+      .op_y13  { background-position: 50%  13% }
+      .op_y23  { background-position: 50%  23% }
+      .op_y50  { background-position: 50%  50% }
+      .op_y75  { background-position: 50%  75% }
+      .op_y88  { background-position: 50%  88% }
+      .op_y111 { background-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_x-7"></div>
+    <div class="op_x13"></div>
+    <div class="op_x23"></div>
+    <div class="op_x50"></div>
+    <div class="op_x75"></div>
+    <div class="op_x88"></div>
+    <div class="op_x111"></div>
+    <div class="op_y-7"></div>
+    <div class="op_y13"></div>
+    <div class="op_y23"></div>
+    <div class="op_y50"></div>
+    <div class="op_y75"></div>
+    <div class="op_y88"></div>
+    <div class="op_y111"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html
new file mode 100644
index 000000000..fb4b3ad3c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: REPLACEME_TEST_TITLE</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="REPLACEME_REFERENCE_FILENAME">
+    <style type="text/css">
+      REPLACEME_CONTAINER_TAG {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x-7">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x13">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x23">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x50">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x75">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x88">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x111">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y-7">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y13">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y23">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y50">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y75">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y88">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y111">REPLACEME_CONTAINER_CLOSETAG
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/lists-3/list-style-type-string-001-ref.html b/layout/reftests/w3c-css/submitted/lists-3/list-style-type-string-001-ref.html
new file mode 100644
index 000000000..0d1b13628
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/lists-3/list-style-type-string-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: String value of list-style-type</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <style>
+    ol, ul { list-style: none; }
+    li::before {
+      content: "# ";
+      font-variant-numeric: tabular-nums;
+    }
+  </style>
+</head>
+<body>
+  <ol start="-1">
+    <li>item -1</li>
+    <li>item 0</li>
+    <li>item 1</li>
+    <li>item 2</li>
+  </ol>
+  <ul start="-1">
+    <li>item -1</li>
+    <li>item 0</li>
+    <li>item 1</li>
+    <li>item 2</li>
+  </ul>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/lists-3/list-style-type-string-001a.html b/layout/reftests/w3c-css/submitted/lists-3/list-style-type-string-001a.html
new file mode 100644
index 000000000..f7ed6e3b3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/lists-3/list-style-type-string-001a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: String value of list-style-type</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string">
+  <link rel="match" href="list-style-type-string-001-ref.html">
+  <style>
+    ol, ul { list-style-type: "# "; list-style-position: inside; }
+  </style>
+</head>
+<body>
+  <ol start="-1">
+    <li>item -1</li>
+    <li>item 0</li>
+    <li>item 1</li>
+    <li>item 2</li>
+  </ol>
+  <ul start="-1">
+    <li>item -1</li>
+    <li>item 0</li>
+    <li>item 1</li>
+    <li>item 2</li>
+  </ul>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/lists-3/list-style-type-string-001b.html b/layout/reftests/w3c-css/submitted/lists-3/list-style-type-string-001b.html
new file mode 100644
index 000000000..f02bf13a7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/lists-3/list-style-type-string-001b.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: String value of list-style</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="https://drafts.csswg.org/css-lists-3/#valdef-list-style-type-string">
+  <link rel="match" href="list-style-type-string-001-ref.html">
+  <style>
+    ol, ul { list-style: inside "# "; }
+  </style>
+</head>
+<body>
+  <ol start="-1">
+    <li>item -1</li>
+    <li>item 0</li>
+    <li>item 1</li>
+    <li>item 2</li>
+  </ol>
+  <ul start="-1">
+    <li>item -1</li>
+    <li>item 0</li>
+    <li>item 1</li>
+    <li>item 2</li>
+  </ul>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/lists-3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/lists-3/reftest-stylo.list
new file mode 100644
index 000000000..569a549e7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/lists-3/reftest-stylo.list
@@ -0,0 +1,4 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests for list-style-type
+== list-style-type-string-001a.html list-style-type-string-001a.html
+== list-style-type-string-001b.html list-style-type-string-001b.html
diff --git a/layout/reftests/w3c-css/submitted/lists-3/reftest.list b/layout/reftests/w3c-css/submitted/lists-3/reftest.list
new file mode 100644
index 000000000..f914145ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/lists-3/reftest.list
@@ -0,0 +1,3 @@
+# Tests for list-style-type
+== list-style-type-string-001a.html list-style-type-string-001-ref.html
+== list-style-type-string-001b.html list-style-type-string-001-ref.html
diff --git a/layout/reftests/w3c-css/submitted/masking/blank.html b/layout/reftests/w3c-css/submitted/masking/blank.html
new file mode 100644
index 000000000..abb1b5472
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/blank.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>Blank document</title>
+  <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<body>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html
new file mode 100644
index 000000000..ee48c8001
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path border-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an HTML element.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 50px;
+        top: 50px;
+        background-color: blue;
+        width: 30px;
+        height: 30px;
+        padding: 10px;
+        border: solid blue 25px;
+        clip-path: circle(farthest-side) border-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html
new file mode 100644
index 000000000..2c18099ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path border-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG element.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 15px; top: 10px;">
+      <rect x="35" y="40" width="100" height="100" fill="blue"
+            clip-path="circle(50%) border-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html
new file mode 100644
index 000000000..0eec4cc22
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path border-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG  SVG element.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        left: 50px;
+        top: 50px;
+        background-color: blue;
+        width: 30px;
+        height: 30px;
+        padding: 10px;
+        border: solid blue 25px;
+        clip-path: circle(farthest-side) border-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html
new file mode 100644
index 000000000..fcbae31ac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path content-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an HTML element.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        width: 100px;
+        height: 100px;
+        padding: 40px;
+        clip-path: circle(farthest-side) content-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html
new file mode 100644
index 000000000..eab70f987
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path content-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an SVG element.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+      <rect x="50" y="50" width="100" height="100" fill="blue"
+            clip-path="circle(50%) content-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html
new file mode 100644
index 000000000..16622dca8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path content-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path content-box works correctly or not.">
+  </head>
+  <style type="text/css">
+    svg {
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      width: 100px;
+      height: 100px;
+      padding: 40px;
+      clip-path: circle(farthest-side) content-box;
+    }
+  </style>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html
new file mode 100644
index 000000000..ca850ec8b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path fill-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path fill-box works correctly or not. This test is for clip-path applied to an SVG  SVG element.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        left: 40px;
+        top: 40px;
+        background-color: blue;
+        width: 30px;
+        height: 30px;
+        margin: 10px;
+        padding: 10px;
+        border: solid blue 25px;
+        clip-path: circle(farthest-side) fill-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue">
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html
new file mode 100644
index 000000000..add81e8df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path geometry box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+      <circle cx="100" cy="100" r="50" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html
new file mode 100644
index 000000000..b9ee9ab63
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path geometry box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+      <polygon points="100,50 150,100 150,150 50,150 50,100" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html
new file mode 100644
index 000000000..4b93657e6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path margin-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-2-ref.html">
+    <meta name="assert" content="Test checks whether clip-path margin-box works correctly or not.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        background-color: blue;
+        width: 100px;
+        height: 100px;
+        margin: 50px;
+        clip-path: polygon(0% 75%, 50% 25%, 100% 75%) margin-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html
new file mode 100644
index 000000000..d605e046f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Reference for clip-path linked to local-ref URL</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <svg height="0" width="0">
+      <defs>
+        <clipPath id="c1">
+          <circle cy="110" cx="137" r="90" />
+        </clipPath>
+      </defs>
+    </svg>
+    <style>
+      div {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+        clip-path: url(#c1);
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html
new file mode 100644
index 000000000..e24afbcd6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <head>
+    <base href="http://example.com">
+    <meta charset="utf-8">
+    <title>Testcase for clip-path linked to local-ref URL</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-localRef-1-ref.html">
+    <meta name="assert" content="Test checks after changing base URL, whether fragment URLs works correctly or not.">
+    <svg height="0" width="0">
+      <defs>
+        <clipPath id="c1">
+          <circle cy="110" cx="137" r="90" />
+        </clipPath>
+      </defs>
+    </svg>
+    <style>
+      div {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+        clip-path: url(#c1);
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html
new file mode 100644
index 000000000..6634c93f6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path margin-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path margin-box works correctly or not. This test is for clip-path applied to an SVG element.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 10px; top: 15px;">
+      <rect x="40" y="35" width="100" height="100" fill="blue"
+            clip-path="circle(50%) margin-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html
new file mode 100644
index 000000000..55e6fe2f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS clip-path reference</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.foreground {
+        position: absolute;
+        background-color: rgb(0,0,255);
+        z-index: 100;
+        width: 50px;
+        height: 50px;
+      }
+
+      div.background {
+        position: absolute;
+        background-color: rgb(0,255,255);
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="foreground"></div>
+    <div class="background"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html
new file mode 100644
index 000000000..c895cdffc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path with mix-blend-mode</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-mix-blend-mode-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path works with mix-blend-mode correctly or not.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.foreground {
+        background-color: rgb(255,0,255);
+        clip-path: url(#top_left);
+        z-index: 100;
+        mix-blend-mode: multiply;
+      }
+
+      div.background {
+        background-color: rgb(0,255,255);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="foreground"></div>
+    <div class="background"></div>
+    <svg height="0" width="0">
+      <defs>
+        <clipPath id="top_left">
+          <rect x="0" y="0" width="50" height="50"/>
+        </clipPath>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html
new file mode 100644
index 000000000..4dc5e1714
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path padding-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an HTML element.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 50px;
+        top: 50px;
+        background-color: blue;
+        width: 50px;
+        height: 50px;
+        padding: 25px;
+        clip-path: circle(farthest-side) padding-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html
new file mode 100644
index 000000000..717a6bfe1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path padding-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG element.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+      <rect x="50" y="50" width="100" height="100" fill="blue"
+            clip-path="circle(50%) padding-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html
new file mode 100644
index 000000000..0ec021634
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path padding-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG  SVG element.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        left: 50px;
+        top: 50px;
+        background-color: blue;
+        width: 50px;
+        height: 50px;
+        padding: 25px;
+        clip-path: circle(farthest-side) padding-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html
new file mode 100644
index 000000000..a72f8b00e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path stroke-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path stroke-box works correctly or not. This test is for clip-path applied to an SVG  SVG element.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        left: 40px;
+        top: 40px;
+        background-color: blue;
+        width: 30px;
+        height: 30px;
+        margin: 10px;
+        padding: 10px;
+        border: solid blue 25px;
+        clip-path: circle(farthest-side) stroke-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html
new file mode 100644
index 000000000..ba81b5df7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path stroke-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path stroke-box works correctly or not.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+      <rect x="60" y="60" width="80" height="80" fill="blue" stroke="blue" stroke-width="20" clip-path="circle(50%) stroke-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html
new file mode 100644
index 000000000..f1f816b2f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path view-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path view-box works correctly or not.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 10px; top: 10px;">
+      <rect x="20" y="20" width="135" height="135" fill="blue"
+            clip-path="circle(25% at calc(50% - 10px) calc(50% - 10px)) view-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html
new file mode 100644
index 000000000..08c91b84b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path view-box with viewbox</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path view-box with viewbox works correctly or not.">
+  </head>
+  <body>
+    <svg width="200" height="200" viewBox="50 50 100 100" preserveAspectRatio="none" style="position: absolute; left: 10px; top: 10px;">
+      <rect x="0" y="0" width="200" height="200" fill="blue"
+            clip-path="circle(25% at calc(50% - 5px) calc(50% - 5px)) view-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html
new file mode 100644
index 000000000..dd3cae8ef
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path view-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path view-box works correctly or not. This test is for clip-path applied to an SVG  SVG element.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        left: 40px;
+        top: 40px;
+        background-color: blue;
+        width: 30px;
+        height: 30px;
+        margin: 10px;
+        padding: 10px;
+        border: solid blue 25px;
+        clip-path: circle(farthest-side) view-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
new file mode 100644
index 000000000..0f9197e1f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS mask-clip reference</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        position: absolute;
+        top: 10px;
+        background-color: purple;
+      }
+
+      div.border {
+        left: 10px;
+        margin: 1px 4px;
+        width: 60px;
+        height: 25px;
+      }
+
+      div.padding {
+        left: 110px;
+        margin: 9px 10px;
+        width: 52px;
+        height: 17px;
+      }
+
+      div.content {
+        left: 210px;
+        margin: 15px 13px;
+        width: 40px;
+        height: 11px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="color border"></div>
+    <div class="color padding"></div>
+    <div class="color content"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html b/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
new file mode 100644
index 000000000..c981536b8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-clip: clip mask image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip">
+    <link rel="match" href="mask-clip-1-ref.html">
+    <meta name="assert" content="border-box, padding-box, and content-box values of mask-clip should clip to the appropriate boxes.">
+    <style type="text/css">
+      div {
+        /*
+         * content box: 40 x 20
+         * padding box: 52 x 38
+         * border  box: 60 x 50
+         * margin  box: 66 x 54
+         */
+        background-color: purple;
+        position: absolute;
+        top: 10px;
+        margin: 1px 2px 3px 4px;
+        border: solid transparent;
+        border-width: 8px 2px 4px 6px;
+        padding: 6px 9px 12px 3px;
+        width: 40px;
+        height: 20px;
+      }
+
+      div.mask {
+        mask-size: 100% 100%;
+        mask-origin: border-box;
+        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+      }
+
+      div.border {
+        left: 10px;
+        mask-clip: border-box;
+      }
+
+      div.padding {
+        left: 110px;
+        mask-clip: padding-box;
+      }
+
+      div.content {
+        left: 210px;
+        mask-clip: content-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer mask border"></div>
+    <div class="outer mask padding"></div>
+    <div class="outer mask content"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html
new file mode 100644
index 000000000..9249622cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS mask-composite reference</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.add {
+        left: 10px;
+        background-image: url(support/blue-100x50-transparent-100x50.svg);
+      }
+
+      div.intersect {
+        left: 230px;
+        background-image: url(support/blue-100x50-transparent-100x50.svg);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="intersect"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html
new file mode 100644
index 000000000..795e52b8a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose vector image</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-1-ref.html">
+    <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(support/blue-100x50-transparent-100x50.svg),
+                    url(support/blue-100x50-transparent-100x50.svg);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html
new file mode 100644
index 000000000..be158c923
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose raster image</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-1-ref.html">
+    <meta name="assert" content="Test checks that raster-mask-image can be composed correctly by different mask-composite value.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(support/blue-100x50-transparent-100x50.png),
+                    url(support/blue-100x50-transparent-100x50.png);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html
new file mode 100644
index 000000000..0eb098d1b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose svg mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-1-ref.html">
+    <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value.">
+    <svg height="0">
+      <mask id="rectMask" x="0" y="0" width="100" height="100" >
+        <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(#rectMask),
+                    url(#rectMask);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html
new file mode 100644
index 000000000..cbf91daad
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS mask-composite reference</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.add {
+        left: 10px;
+        background-color: blue;
+      }
+
+      div.subtract {
+        left: 120px;
+        background-image: url(support/blue-100x50-transparent-100x50.svg);
+      }
+
+      div.exclude {
+        left: 340px;
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html
new file mode 100644
index 000000000..7db800814
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose vector image</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-2-ref.html">
+    <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(support/blue-100x50-transparent-100x50.svg),
+                    url(support/transparent-100x50-blue-100x50.svg);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html
new file mode 100644
index 000000000..3fd983fb1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose raster image</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-2-ref.html">
+    <meta name="assert" content="Test checks that raster-mask-image can be composed correctly by different mask-composite value.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(support/blue-100x50-transparent-100x50.png),
+                    url(support/transparent-100x50-blue-100x50.png);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html
new file mode 100644
index 000000000..2b26e9ac6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose SVG mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-2-ref.html">
+    <meta name="assert" content="Test checks that svg-mask can be composed correctly by different mask-composite value.">
+    <svg height="0">
+      <mask id="rectMask1" x="0" y="0" width="100" height="100" >
+        <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="rectMask2" x="0" y="0" width="100" height="100" >
+        <rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(#rectMask1),
+                    url(#rectMask2);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html
new file mode 100644
index 000000000..280084406
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html
new file mode 100644
index 000000000..62e00660a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-1-ref.html">
+    <meta name="assert" content="Test checks whether image as mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-png {
+        mask-image: url(support/transparent-100x50-blue-100x50.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-png"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html
new file mode 100644
index 000000000..9bf74102f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-1-ref.html">
+    <meta name="assert" content="Test checks whether SVG image as mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-svg {
+        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-svg"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html
new file mode 100644
index 000000000..1328d06c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-1-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask element as mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-svg-mask {
+        mask-image: url(support/mask-half-transparent-100x100.svg#mask);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-svg-mask"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1d.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1d.html
new file mode 100644
index 000000000..11f0ae7d9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1d.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-1-ref.html">
+    <meta name="assert" content="Test checks whether treat unresolvable mask as no-mask for a SVG element embedded in HTML document.">
+  </head>
+  <body>
+    <svg width="100" height="100">
+      <rect x="0" y="0" width="100" height="50" fill="purple" mask="url(#foo)"/>
+    </svg>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html
new file mode 100644
index 000000000..db949934e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        background-image: linear-gradient(rgba(128,0,128,0), rgba(128,0,128,1));
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-2.html b/layout/reftests/w3c-css/submitted/masking/mask-image-2.html
new file mode 100644
index 000000000..a071cff3f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-2-ref.html">
+    <meta name="assert" content="Test checks whether gradient CSS image as mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-gradient-1 {
+        mask-image: linear-gradient(rgba(0,0,255,0), rgba(0,0,255,1)); /* blue gradient mask */
+      }
+
+      div.mask-by-gradient-2 {
+        mask-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); /* red gradient mask */
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-gradient-1"></div>
+    <div class="mask-by-gradient-2"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html
new file mode 100644
index 000000000..ec29e333c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: multiple SVG masks</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <svg height="0">
+      <mask id="mask" x="0" y="0" width="1" height="1">
+        <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask: url(#mask);
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html
new file mode 100644
index 000000000..b3a6d3965
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: multiple SVG masks</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask as mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="0" y="0" width="1" height="1" >
+        <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="mask2" x="0" y="0" width="1" height="1" >
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask-image: url(#mask1), url(#mask2);
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html
new file mode 100644
index 000000000..bd805cde9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="0" y="0" width="1" height="1" >
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg), url(#mask1);
+        mask-repeat: no-repeat, repeat;
+        mask-position: 0 0, 0 0;
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html
new file mode 100644
index 000000000..32bd4454d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="0" y="0" width="1" height="1" >
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask-image: url(#mask1), url(support/50x50-opaque-blue.svg);
+        mask-repeat: repeat-x, no-repeat;
+        mask-position: 0 0, 0 0;
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html
new file mode 100644
index 000000000..f1ef1be70
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="10%" y="10%" width="0.8" height="0.8" >
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask: url(#mask1), url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat, no-repeat;
+        mask-position: 0 0, 0 0;
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html
new file mode 100644
index 000000000..15223e34d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="0" y="0" width="1" height="1" >
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div.outter {
+        margin: 0px;
+        padding: 0px;
+        width: 200px;
+        height: 200px;
+        transform: translate(-10px, -10px);
+      }
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg), url(#mask1);
+        mask-repeat: no-repeat, repeat;
+        mask-position: 0 0, 0 0;
+        /*mask: url(#mask1);*/
+        width: 100px;
+        height: 100px;
+        transform: translate(10px, 10px);
+      }
+    </style>
+
+  </head>
+  <body>
+    <div class="outter">
+      <div class="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html
new file mode 100644
index 000000000..e925105ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: SVG masks apply on border area</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+        <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="mask2" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+        <circle cx="-50" cy="-50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: red;
+        mask-image: url(#mask1), url(#mask2);
+        box-shadow: 0 0 0 100px purple;
+        width: 100px;
+        height: 100px;
+        position: relative;
+        left: 100px;
+        top: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html
new file mode 100644
index 000000000..1236c0c33
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: SVG masks apply on border area</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether apply transfrom to a SVG mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+        <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="mask2" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+        <circle cx="-50" cy="-50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div.outter {
+        margin: 0px;
+        padding: 0px;
+        width: 200px;
+        height: 200px;
+        transform: translate(-10px, -20px);
+      }
+      div.inner {
+        background-color: red;
+        mask-image: url(#mask1), url(#mask2);
+        mask-repeat: no-repeat, no-repeat;
+        box-shadow: 0 0 0 100px purple;
+        position: relative;
+        width: 100px;
+        height: 100px;
+        left: 100px;
+        top: 100px;
+        transform: translate(10px, 20px);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outter">
+      <div class="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3h.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3h.html
new file mode 100644
index 000000000..37608bfe2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3h.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path in SVG mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether clip-path in SVG mask works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="0" y="0" width="1" height="1" >
+        <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="mask2" x="0" y="0" width="1" height="1" >
+        <rect x="25" y="25" width="50" height="50" style="stroke:none; fill: #ffffff" clip-path="circle(50% at 50% 50%)"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask-image: url(#mask1), url(#mask2);
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-4a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-4a.html
new file mode 100644
index 000000000..ae3ad76a2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-4a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: unresovlable mask url</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="blank.html">
+    <meta name="assert" content="Test checks non-existent url should be counted as an image layer of transparent black.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-png {
+        mask-image: url(non-existent.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-png"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-4b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-4b.html
new file mode 100644
index 000000000..ed0022a4c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-4b.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: unresovlable mask url</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="blank.html">
+    <meta name="assert" content="Test checks a mask reference to a none-mask SVG element should be counted as an image layer of transparent black.">
+    <svg height="0">
+      <clipPath id="clip1">
+        <circle cx="50" cy="50" r="25"/>
+      </clipPath>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-reference {
+        mask-image: url(#clip1);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-reference"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html
new file mode 100644
index 000000000..19a251ef0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: data url mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 50px;
+        height: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div/>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-5.html b/layout/reftests/w3c-css/submitted/masking/mask-image-5.html
new file mode 100644
index 000000000..d98ddf8de
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-5.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: data url mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-5-ref.html">
+    <meta name="assert" content="Test checks handling data url mask correctly.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 50px;
+        height: 50px;
+      }
+      div.mask-by-data-url {
+        /* a 50x50 opaque blue rect */
+        mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9IjAiIHk9IjAiICB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9ImJsdWUiIGZpbGwtb3BhY2l0eT0iMSIvPgo8L3N2Zz4K");
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-data-url"/>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html
new file mode 100644
index 000000000..d85e075fd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask on inline element</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+        font-size: 100px;
+        line-height: 100px;
+      }
+
+      div.mask-by-png {
+        mask-image: url(support/transparent-100x50-blue-100x50.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-png">A</div>
+    <div class="mask-by-png">B</div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-6.html b/layout/reftests/w3c-css/submitted/masking/mask-image-6.html
new file mode 100644
index 000000000..ac31e4cf4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask on inline element</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-6-ref.html">
+    <meta name="assert" content="Test checks whether mask on inline elemnt works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+      span {
+        font-size: 100px;
+        line-height: 100px;
+        mask-image: url(support/transparent-100x50-blue-100x50.png);
+        mask-position: center;
+        mask-repeat: repeat;
+      }
+
+    </style>
+  </head>
+  <body>
+    <div>
+      <span>A B</span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-a.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-a.html
new file mode 100644
index 000000000..38977a0aa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-a.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-mode with vector image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode">
+    <link rel="match" href="mask-mode-ref.html">
+    <meta name="assert" content="Test checks that mask an SVG image referenced by mask-image is correct with different mask mode.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.auto {
+        left: 10px;
+        mask-mode: match-source;
+        mask-image: url(support/blue-100x100.svg);
+      }
+
+      div.alpha {
+        left: 120px;
+        mask-mode: alpha;
+        mask-image: url(support/blue-100x100.svg);
+      }
+
+      div.luminance1 {
+        left: 230px;
+        mask-mode: luminance;
+        mask-image: url(support/blue-100x100.svg);
+      }
+
+      div.luminance2 {
+        left: 340px;
+        mask-mode: luminance;
+        mask-image: url(support/red-100x100.svg);
+      }
+
+      div.luminance3 {
+        left: 450px;
+        mask-mode: luminance;
+        mask-image: url(support/green-100x100.svg);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="auto"></div>
+    <div class="alpha"></div>
+    <div class="luminance1"></div>
+    <div class="luminance2"></div>
+    <div class="luminance3"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-b.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-b.html
new file mode 100644
index 000000000..e5c11e9bf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-b.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-mode with raster image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode">
+    <link rel="match" href="mask-mode-ref.html">
+    <meta name="assert" content="Test checks that mask a PNG image referenced by mask-image is correct with different mask mode.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.auto {
+        left: 10px;
+        mask-mode: match-source;
+        mask-image: url(support/blue-100x100.png);
+      }
+
+      div.alpha {
+        left: 120px;
+        mask-mode: alpha;
+        mask-image: url(support/blue-100x100.png);
+      }
+
+      div.luminance1 {
+        left: 230px;
+        mask-mode: luminance;
+        mask-image: url(support/blue-100x100.png);
+      }
+
+      div.luminance2 {
+        left: 340px;
+        mask-mode: luminance;
+        mask-image: url(support/red-100x100.png);
+      }
+
+      div.luminance3 {
+        left: 450px;
+        mask-mode: luminance;
+        mask-image: url(support/green-100x100.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="auto"></div>
+    <div class="alpha"></div>
+    <div class="luminance1"></div>
+    <div class="luminance2"></div>
+    <div class="luminance3"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html
new file mode 100644
index 000000000..0f7dbd571
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS mask-mode reference</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        background-color: white;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.auto {
+        left: 10px;
+        background-image: url(support/blue-100x100.svg);
+      }
+
+      div.alpha {
+        left: 120px;
+        background-image: url(support/blue-100x100.svg);
+      }
+
+      div.luminance1 {
+        left: 230px;
+        background-image: url(support/blue-luminance-100x100.svg);
+      }
+
+      div.luminance2 {
+        left: 340px;
+        background-image: url(support/red-luminance-100x100.svg);
+      }
+
+      div.luminance3 {
+        left: 450px;
+        background-image: url(support/green-luminance-100x100.svg);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="auto"></div>
+    <div class="alpha"></div>
+    <div class="luminance1"></div>
+    <div class="luminance2"></div>
+    <div class="luminance3"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html
new file mode 100644
index 000000000..2b5e1fd3e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS mask-mode reference</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.match-luminance {
+        left: 10px;
+        background-image: url(support/blue-luminance-100x100.svg);
+      }
+
+      div.match-alpha {
+        left: 120px;
+        background-image: url(support/blue-100x100.svg);
+      }
+
+      div.luminance-luminance {
+        top: 120px;
+        left: 10px;
+        background-image: url(support/blue-luminance-100x100.svg);
+      }
+
+      div.luminance-alpha {
+        top: 120px;
+        left: 120px;
+        background-image: url(support/blue-luminance-100x100.svg);
+      }
+
+      div.alpha-luminance {
+        top: 230px;
+        left: 10px;
+        background-image: url(support/blue-100x100.svg);
+      }
+
+      div.alpha-alpha {
+        top: 230px;
+        left: 120px;
+        background-image: url(support/blue-100x100.svg);
+      }
+    </style>
+
+  </head>
+  <body>
+    <div class="match-luminance"></div>
+    <div class="match-alpha"></div>
+    <div class="luminance-luminance"></div>
+    <div class="luminance-alpha"></div>
+    <div class="alpha-luminance"></div>
+    <div class="alpha-alpha"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html
new file mode 100644
index 000000000..5c75ce71d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-mode with vector image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode">
+    <link rel="match" href="mask-mode-to-mask-type-ref.html">
+    <meta name="assert" content="Test checks the fallback logic between mask-mode and mask-type.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.match-luminance {
+        left: 10px;
+        mask-mode: match-source;
+        mask-image: url("#svg-luminance");
+      }
+
+      div.match-alpha {
+        left: 120px;
+        mask-mode: match-source;
+        mask-image: url("#svg-alpha");
+      }
+
+      div.luminance-luminance {
+        top: 120px;
+        left: 10px;
+        mask-mode: luminance;
+        mask-image: url("#svg-luminance");
+      }
+
+      div.luminance-alpha {
+        top: 120px;
+        left: 120px;
+        mask-mode: luminance;
+        mask-image: url("#svg-alpha");
+      }
+
+      div.alpha-luminance {
+        top: 230px;
+        left: 10px;
+        mask-mode: alpha;
+        mask-image: url("#svg-luminance");
+      }
+
+      div.alpha-alpha {
+        top: 230px;
+        left: 120px;
+        mask-mode: alpha;
+        mask-image: url("#svg-alpha");
+      }
+
+      #svg-luminance {
+        mask-type: luminance;
+      }
+
+      #svg-alpha {
+        mask-type: alpha;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="match-luminance"></div>
+    <div class="match-alpha"></div>
+    <div class="luminance-luminance"></div>
+    <div class="luminance-alpha"></div>
+    <div class="alpha-luminance"></div>
+    <div class="alpha-alpha"></div>
+    <svg xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <mask id="svg-luminance">
+          <rect x="0" y="0" width="100%" height="100%" fill="blue"/>
+        </mask>
+        <mask id="svg-alpha">
+          <rect x="0" y="0" width="100%" height="100%" fill="blue"/>
+        </mask>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html
new file mode 100644
index 000000000..5def84f06
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask with opacity</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 10px;
+        top: 60px;
+        background-color: rgba(0,0,255,0.5);
+        width: 100px;
+        height: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html
new file mode 100644
index 000000000..1bd42abfb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask with filter and opacity</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-opacity-1-ref.html">
+    <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        background-color: rgb(255,255,0);
+        width: 100px;
+        height: 100px;
+        filter: invert(100%);
+        mask-image: url(support/blue-100x50-transparent-100x50.png);
+        opacity: 0.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html
new file mode 100644
index 000000000..0de78f761
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask with opacity</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-opacity-1-ref.html">
+    <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not.">
+    <svg height="0">
+      <mask id="myMask" x="0" y="0" width="100" height="100" >
+        <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        background-color: rgb(0,0,255);
+        width: 100px;
+        height: 100px;
+        mask-image: url(support/blue-100x50-transparent-100x50.png);
+        opacity: 0.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html
new file mode 100644
index 000000000..1673d7c4e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: filter with opacity</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-opacity-1-ref.html">
+    <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 10px;
+        top: 60px;
+        background-color: rgb(255,255,0);
+        width: 100px;
+        height: 50px;
+        filter: invert(100%);
+        opacity: 0.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html
new file mode 100644
index 000000000..df7e684d2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+        position: relative;
+      }
+
+      div.inner {
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+        position: absolute;
+      }
+
+      #border { left: 4px; top: 1px; }
+      #padding { left: 10px; top: 9px; }
+      #content { left: 13px; top: 15px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="border"></div></div>
+    <div class="outer"><div class="inner" id="border"></div></div>
+    <div class="outer"><div class="inner" id="padding"></div></div>
+    <div class="outer"><div class="inner" id="content"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html
new file mode 100644
index 000000000..3788a5591
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-origin">
+    <link rel="match" href="mask-origin-1-ref.html">
+    <meta name="assert" content="Test checks whether setting mask position area works correctly or not.">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.inner {
+        /*
+         * content box: 60 x 60
+         * padding box: 72 x 78
+         * border  box: 80 x 90
+         * margin  box: 86 x 94
+         */
+        margin: 1px 2px 3px 4px;
+        border: solid transparent;
+        border-width: 8px 2px 4px 6px;
+        padding: 6px 9px 12px 3px;
+        width: 60px;
+        height: 60px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+      }
+
+      #border { mask-origin: border-box; }
+      #padding { mask-origin: padding-box; }
+      #content { mask-origin: content-box; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner" id="border"></div></div>
+    <div class="outer"><div class="inner" id="padding"></div></div>
+    <div class="outer"><div class="inner" id="content"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html
new file mode 100644
index 000000000..bbb5ef2c4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 125px;
+        height: 125px;
+        position: relative;
+      }
+
+      div.inner {
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+        position: absolute;
+      }
+
+      #pos-left-auto { left: 0px; top: 22px; }
+      #pos-left-bottom { left: 0px; top: 44px; }
+      #pos-right-top { left: 36px; top: 0px; }
+      #pos-right-bottom { left: 36px; top: 44px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="pos-left-auto"></div></div>
+    <div class="outer"><div class="inner" id="pos-left-bottom"></div></div>
+    <div class="outer"><div class="inner" id="pos-right-top"></div></div>
+    <div class="outer"><div class="inner" id="pos-right-bottom"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html
new file mode 100644
index 000000000..90ee89b15
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-origin">
+    <link rel="match" href="mask-origin-2-ref.html">
+    <meta name="assert" content="Test checks whether setting mask origin to margin-box works correctly or not.">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 125px;
+        height: 125px;
+      }
+
+      div.inner {
+        /*
+         * content box: 60 x 60
+         * padding box: 72 x 78
+         * border  box: 80 x 90
+         * margin  box: 86 x 94
+         */
+        margin: 1px 2px 3px 4px;
+        border: solid red;
+        border-width: 8px 2px 4px 6px;
+        padding: 6px 9px 12px 3px;
+        width: 60px;
+        height: 60px;
+        position: relative;
+        background-color: blue;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-origin: margin-box;
+      }
+
+      div.overflow {
+        position: absolute;
+        left: -10px;
+        top: -9px;
+        border: solid transparent;
+        border-width: 15px 13px 19px 13px;
+        width: 60px;
+        height: 60px;
+        background-color: purple;
+      }
+
+      #pos-left-auto { mask-position: left; }
+      #pos-left-bottom { mask-position: left bottom; }
+      #pos-right-top { mask-position: right top; }
+      #pos-right-bottom { mask-position: right bottom; }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner" id="pos-left-auto">
+        <div class="overflow"></div>
+      </div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-left-bottom">
+        <div class="overflow"></div>
+      </div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-right-top">
+        <div class="overflow"></div>
+      </div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-right-bottom">
+        <div class="overflow"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html
new file mode 100644
index 000000000..e323bd352
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+      }
+
+      div.inner {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+
+      #inner1 { right: 10px; bottom: 35px; }
+      #inner2 { right: 30px; bottom: 25px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1a.html
new file mode 100644
index 000000000..cee15ee71
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1a.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-1-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 { mask-position: right 20% bottom 70%; }
+      #inner2 { mask-position: bottom 70% right 20%; }
+      #inner3 { mask-position: right 30px bottom 25px; }
+      #inner4 { mask-position: bottom 25px right 30px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner3"></div></div>
+    <div class="outer"><div class="inner" id="inner4"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1b.html
new file mode 100644
index 000000000..669810e61
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1b.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-1-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 { mask-position: left 40px top 15px; }
+      #inner2 { mask-position: top 30% left 80%; }
+      #inner3 { mask-position: left 20px top 25px }
+      #inner4 { mask-position: top 25px left 20px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner3"></div></div>
+    <div class="outer"><div class="inner" id="inner4"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1c.html
new file mode 100644
index 000000000..9a1671c3d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1c.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-1-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 { mask-position: left 80% bottom 70%; }
+      #inner2 { mask-position: right 20% top 30%; }
+      #inner3 { mask-position: bottom 50% left 40%; }
+      #inner4 { mask-position: right 60% top 50%; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner3"></div></div>
+    <div class="outer"><div class="inner" id="inner4"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html
new file mode 100644
index 000000000..46be4b8b0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      #inner {
+        margin-left: 20px;
+        margin-top: 20px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-2a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2a.html
new file mode 100644
index 000000000..d8427338d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-2a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-2-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left 40% bottom 60%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-2b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2b.html
new file mode 100644
index 000000000..b5f7b3105
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-2b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-2-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: 40% 40%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html
new file mode 100644
index 000000000..dd2630356
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      #inner {
+        margin-left: 25px;
+        margin-top: 10px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html
new file mode 100644
index 000000000..724a1e3ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-3-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: center bottom 80%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-3b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3b.html
new file mode 100644
index 000000000..742a65ea1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-3b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-3-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: center 20%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html
new file mode 100644
index 000000000..7ddf68b28
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      #inner {
+        margin-left: 0px;
+        margin-top: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4a.html
new file mode 100644
index 000000000..9d17692e8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left center;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4b.html
new file mode 100644
index 000000000..9b46546d3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html
new file mode 100644
index 000000000..70959c098
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left bottom 50%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4d.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4d.html
new file mode 100644
index 000000000..e5dce03b4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4d.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask: url(support/50x50-opaque-blue.svg) left no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html
new file mode 100644
index 000000000..dc8c9ecb9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 120px;
+        height: 120px;
+      }
+
+      #inner1 {
+        margin-left: 35px;
+        margin-top: 0px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+
+      #inner2 {
+        margin-left: 35px;
+        margin-top: 20px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner1"></div>
+      <div id="inner2"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-5.html b/layout/reftests/w3c-css/submitted/masking/mask-position-5.html
new file mode 100644
index 000000000..295402263
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-5.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-5-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 120px;
+        height: 120px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: top, bottom;
+        mask-repeat: no-repeat, no-repeat;
+        mask-image: url(support/50x50-opaque-blue.svg),
+                    url(support/50x50-opaque-blue.svg);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html
new file mode 100644
index 000000000..b94527eb0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      .inner {
+        margin-left: 20px;
+        margin-top: 50px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-6.html b/layout/reftests/w3c-css/submitted/masking/mask-position-6.html
new file mode 100644
index 000000000..e1d9eca55
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-6.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-6-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      .outer {
+        border: 1px solid black;
+      }
+
+      .outer > div {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 {
+        mask-position: left 20px bottom;
+      }
+
+      #inner2 {
+        mask-position: left 40% bottom;
+      }
+
+      #inner3 {
+        mask-position: right 60% bottom;
+      }
+
+      #inner4 {
+        mask-position: right 30px bottom;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div id="inner1"></div></div>
+    <div class="outer"><div id="inner2"></div></div>
+    <div class="outer"><div id="inner3"></div></div>
+    <div class="outer"><div id="inner4"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html
new file mode 100644
index 000000000..c3c8d85eb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      .inner {
+        margin-left: 50px;
+        margin-top: 20px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-7.html b/layout/reftests/w3c-css/submitted/masking/mask-position-7.html
new file mode 100644
index 000000000..30e9a7581
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-7.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-7-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      .outer {
+        border: 1px solid black;
+      }
+
+      .outer > div {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 {
+        mask-position: right top 40%;
+      }
+
+      #inner2 {
+        mask-position: right top 20px;
+      }
+
+      #inner3 {
+        mask-position: right bottom 60%;
+      }
+
+      #inner4 {
+        mask-position: right bottom 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div id="inner1"></div></div>
+    <div class="outer"><div id="inner2"></div></div>
+    <div class="outer"><div id="inner3"></div></div>
+    <div class="outer"><div id="inner4"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html
new file mode 100644
index 000000000..01ed86d12
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        width: 128px;
+        height: 128px;
+        position: relative;
+        border: 1px solid black;
+      }
+
+      .color {
+        background-color: purple;
+      }
+
+      #default {
+        position: absolute;
+        width: 50px; height: 50px;
+      }
+
+      #repeat-x {
+        position: absolute;
+        width: 100%; height: 50px;
+      }
+
+      #repeat-y {
+        position: absolute;
+        width: 50px; height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer color"></div>
+    <div class="outer">
+      <div class="color" id="default"></div>
+    </div>
+    <div class="outer color"></div>
+    <div class="outer">
+      <div class="color" id="repeat-x"></div>
+    </div>
+    <div class="outer">
+      <div class="color" id="repeat-y"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html
new file mode 100644
index 000000000..a7fc586fd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+    <link rel="match" href="mask-repeat-1-ref.html">
+    <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 128px;
+        height: 128px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-position: left top;
+      }
+
+      #no-repeat {
+        mask-repeat: no-repeat no-repeat;
+      }
+      #repeat {
+        mask-repeat: repeat repeat;
+      }
+      #repeat-x {
+        mask-repeat: repeat no-repeat;
+      }
+      #repeat-y {
+        mask-repeat: no-repeat repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner" id="no-repeat"></div></div>
+    <div class="outer"><div class="inner" id="repeat"></div></div>
+    <div class="outer"><div class="inner" id="repeat-x"></div></div>
+    <div class="outer"><div class="inner" id="repeat-y"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html
new file mode 100644
index 000000000..fa386cdac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        width: 128px;
+        height: 128px;
+        position: relative;
+        border: 1px solid black;
+      }
+
+      div.inner {
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        background-color: purple;
+      }
+
+      #pos-top-left { left: 0; top: 0; }
+      #pos-top-right { right: 0; top: 0; }
+      #pos-bottom-left { left: 0; bottom: 0; }
+      #pos-bottom-right { right: 0; bottom: 0; }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-top-right"></div>
+      <div class="inner" id="pos-bottom-left"></div>
+      <div class="inner" id="pos-bottom-right"></div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-top-right"></div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-bottom-left"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html
new file mode 100644
index 000000000..e349239fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+    <link rel="match" href="mask-repeat-2-ref.html">
+    <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 128px;
+        height: 128px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-position: left top;
+      }
+
+      #space {
+        mask-repeat: space;
+      }
+      #space-x {
+        mask-repeat: space no-repeat;
+      }
+      #space-y {
+        mask-repeat: no-repeat space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="space"></div></div>
+    <div class="outer"><div class="inner" id="space-x"></div></div>
+    <div class="outer"><div class="inner" id="space-y"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html
new file mode 100644
index 000000000..4d4b869ce
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        width: 150px;
+        height: 150px;
+        border: 1px solid black;
+      }
+
+      .color {
+        background-color: purple;
+      }
+
+      #round {
+        width: 150px;
+        height: 150px;
+      }
+
+      #round-x {
+        width: 150px;
+        height: 50px;
+      }
+
+      #round-y {
+        width: 50px;
+        height: 150px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="color" id="round"></div></div>
+    <div class="outer"><div class="color" id="round-x"></div></div>
+    <div class="outer"><div class="color" id="round-y"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html
new file mode 100644
index 000000000..cb950d4f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+    <link rel="match" href="mask-repeat-3-ref.html">
+    <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 150px;
+        height: 150px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-position: left top;
+      }
+
+      #round {
+        mask-repeat: round;
+      }
+      #round-x {
+        mask-repeat: round no-repeat;
+      }
+      #round-y {
+        mask-repeat: no-repeat round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="round"></div></div>
+    <div class="outer"><div class="inner" id="round-x"></div></div>
+    <div class="outer"><div class="inner" id="round-y"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html
new file mode 100644
index 000000000..01d55f962
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-auto-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: auto auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html
new file mode 100644
index 000000000..aa2123192
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 20px;
+        height: 20px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html
new file mode 100644
index 000000000..5ef49cc61
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-auto-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 128px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: auto 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html
new file mode 100644
index 000000000..f2644bb1b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-auto-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 128px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: auto 15.625%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html
new file mode 100644
index 000000000..73e3df270
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html
new file mode 100644
index 000000000..6560a81ee
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-auto-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html
new file mode 100644
index 000000000..afbeb72f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 64px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html
new file mode 100644
index 000000000..a04557639
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-contain-clip-border-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        border: 20px solid transparent;
+        width: 24px;
+        height: 88px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-clip: border-box;
+        mask-origin: border-box;
+        mask-size: contain;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html
new file mode 100644
index 000000000..041e48d03
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        border: 20px solid white;
+        width: 24px;
+        height: 88px;
+      }
+
+      #innermost {
+        width: 24px;
+        height: 24px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner">
+        <div id="innermost"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html
new file mode 100644
index 000000000..4f321d9c5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-contain-clip-padding-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        background-color: purple;
+        border: 20px solid transparent;
+        width: 24px;
+        height: 88px;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-clip: padding-box;
+        mask-origin: padding-box;
+        mask-size: contain;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer"><div id="inner"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html
new file mode 100644
index 000000000..50ab373eb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner1 {
+        width: 64px;
+        height: 32px;
+      }
+
+      #inner2 {
+        width: 64px;
+        height: 64px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner1"></div>
+      <div id="inner2"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html
new file mode 100644
index 000000000..fcae5ba0e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-contain-position-fifty-fifty-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: contain;
+        mask-position: 50% 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html
new file mode 100644
index 000000000..a7346bfcb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 10px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 64px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html
new file mode 100644
index 000000000..19fc42d6e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-contain-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 10px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: contain;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html
new file mode 100644
index 000000000..961019bf1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 10px solid transparent;
+        width: 64px;
+        height: 128px;
+        background-clip: content-box;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html b/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html
new file mode 100644
index 000000000..171e11805
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-cover-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 10px solid black;
+        width: 64px;
+        height: 128px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-origin: content-box;
+        mask-clip: content-box;
+        mask-size: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html
new file mode 100644
index 000000000..7152f6ff9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-length-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 32px auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html
new file mode 100644
index 000000000..5411da9f8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 32px;
+        height: 64px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html
new file mode 100644
index 000000000..f9cf2cb6b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-length-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 32px 64px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html
new file mode 100644
index 000000000..26195541d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 16px;
+        height: 32px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html
new file mode 100644
index 000000000..ba5bbbc55
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-length-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 16px 25%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length.html
new file mode 100644
index 000000000..961357e12
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-length-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html
new file mode 100644
index 000000000..603346d6e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 50% auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html
new file mode 100644
index 000000000..4ac9c8e81
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 50% 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html
new file mode 100644
index 000000000..96a3d1bdc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 32px;
+        height: 32px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html
new file mode 100644
index 000000000..2c023ec13
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        width: 60px;
+        height: 120px;
+      }
+
+      #outer {
+        border: 10px solid black;
+      }
+
+      #inner {
+        height: 60px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html
new file mode 100644
index 000000000..69f89b8a9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-percent-percent-stretch-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 60px;
+        height: 120px;
+      }
+
+      #outer {
+        border: 10px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 100% 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html
new file mode 100644
index 000000000..7b04d9b6d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 50% 25%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html
new file mode 100644
index 000000000..2e056df52
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list b/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list
new file mode 100644
index 000000000..bc897987e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list
@@ -0,0 +1,85 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# All mask properties test cases are meant to be failed
+# until bug 1251161 is fixed, which means enabling mask shorthand.
+# To enable it in compile time, refer to bug 1243734
+
+# mask-composite test cases
+== mask-composite-1a.html mask-composite-1a.html
+== mask-composite-1b.html mask-composite-1b.html
+== mask-composite-1c.html mask-composite-1c.html
+== mask-composite-2a.html mask-composite-2a.html
+== mask-composite-2b.html mask-composite-2b.html
+== mask-composite-2c.html mask-composite-2c.html
+
+# mask-mode test cases
+== mask-mode-a.html mask-mode-a.html
+== mask-mode-b.html mask-mode-b.html
+== mask-mode-to-mask-type.html mask-mode-to-mask-type.html
+
+# mask-image test cases
+== mask-image-1a.html mask-image-1a.html
+== mask-image-1b.html mask-image-1b.html
+== mask-image-1c.html mask-image-1c.html
+== mask-image-2.html mask-image-2.html
+== mask-image-3a.html mask-image-3a.html
+== mask-image-3b.html mask-image-3b.html
+== mask-image-3c.html mask-image-3c.html
+== mask-image-3d.html mask-image-3d.html
+== mask-image-3e.html mask-image-3e.html
+== mask-image-3f.html mask-image-3f.html
+== mask-image-3g.html mask-image-3g.html
+== mask-image-4a.html mask-image-4a.html
+== mask-image-4b.html mask-image-4b.html
+
+# mask-clip test cases
+== mask-clip-1.html mask-clip-1.html
+
+# mask-position test cases
+== mask-position-1a.html mask-position-1a.html
+== mask-position-1b.html mask-position-1b.html
+== mask-position-1c.html mask-position-1c.html
+== mask-position-2a.html mask-position-2a.html
+== mask-position-2b.html mask-position-2b.html
+== mask-position-3a.html mask-position-3a.html
+== mask-position-3b.html mask-position-3b.html
+== mask-position-4a.html mask-position-4a.html
+== mask-position-4b.html mask-position-4b.html
+== mask-position-4c.html mask-position-4c.html
+== mask-position-4d.html mask-position-4d.html
+== mask-position-5.html mask-position-5.html
+== mask-position-6.html mask-position-6.html
+== mask-position-7.html mask-position-7.html
+
+# mask-repeat test cases
+== mask-repeat-1.html mask-repeat-1.html
+# bug 1258623
+== mask-repeat-2.html mask-repeat-2.html
+# bug 1258626
+== mask-repeat-3.html mask-repeat-3.html
+# bug 1258626
+
+# mask-origin test cases
+== mask-origin-1.html mask-origin-1.html
+# bug 1258286
+== mask-origin-2.html mask-origin-2.html
+# bug 1260094
+
+# mask-size test cases
+== mask-size-auto.html mask-size-auto.html
+== mask-size-auto-auto.html mask-size-auto-auto.html
+== mask-size-auto-length.html mask-size-auto-length.html
+== mask-size-auto-percent.html mask-size-auto-percent.html
+== mask-size-contain-clip-border.html mask-size-contain-clip-border.html
+== mask-size-contain-clip-padding.html mask-size-contain-clip-padding.html
+== mask-size-contain-position-fifty-fifty.html mask-size-contain-position-fifty-fifty.html
+== mask-size-contain.html mask-size-contain.html
+== mask-size-cover.html mask-size-cover.html
+== mask-size-length.html mask-size-length.html
+== mask-size-length-auto.html mask-size-length-auto.html
+== mask-size-length-length.html mask-size-length-length.html
+== mask-size-length-percent.html mask-size-length-percent.html
+== mask-size-percent.html mask-size-percent.html
+== mask-size-percent-auto.html mask-size-percent-auto.html
+== mask-size-percent-length.html mask-size-percent-length.html
+== mask-size-percent-percent.html mask-size-percent-percent.html
+== mask-size-percent-percent-stretch.html mask-size-percent-percent-stretch.html
diff --git a/layout/reftests/w3c-css/submitted/masking/reftest.list b/layout/reftests/w3c-css/submitted/masking/reftest.list
new file mode 100644
index 000000000..0cb5611c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
@@ -0,0 +1,112 @@
+# For those test items with failure type fuzzy-if added, please refer to bug 1231643#c10.
+
+# mask-composite test cases
+fails == mask-composite-1a.html mask-composite-1-ref.html
+fails == mask-composite-1b.html mask-composite-1-ref.html
+fails == mask-composite-1c.html mask-composite-1-ref.html
+fails == mask-composite-2a.html mask-composite-2-ref.html
+fails == mask-composite-2b.html mask-composite-2-ref.html
+fails == mask-composite-2c.html mask-composite-2-ref.html
+
+# mask-mode test cases
+fails == mask-mode-a.html mask-mode-ref.html
+fails == mask-mode-b.html mask-mode-ref.html
+fails == mask-mode-to-mask-type.html mask-mode-to-mask-type-ref.html
+
+# mask-image test cases
+fails == mask-image-1a.html mask-image-1-ref.html
+fails == mask-image-1b.html mask-image-1-ref.html
+fails == mask-image-1c.html mask-image-1-ref.html
+== mask-image-1d.html mask-image-1-ref.html
+fails == mask-image-2.html mask-image-2-ref.html
+fails == mask-image-3a.html mask-image-3-ref.html
+fails == mask-image-3b.html mask-image-3-ref.html
+fails == mask-image-3c.html mask-image-3-ref.html
+fails == mask-image-3d.html mask-image-3-ref.html
+fails == mask-image-3e.html mask-image-3-ref.html
+fails == mask-image-3f.html mask-image-3-ref.html
+fails == mask-image-3g.html mask-image-3-ref.html
+fails == mask-image-3h.html mask-image-3-ref.html
+fails == mask-image-4a.html blank.html
+fails == mask-image-4b.html blank.html
+== mask-image-5.html mask-image-5-ref.html
+== mask-image-6.html mask-image-6-ref.html
+
+# mask-clip test cases
+fails == mask-clip-1.html mask-clip-1-ref.html
+
+# mask-position test cases
+fails == mask-position-1a.html mask-position-1-ref.html
+fails == mask-position-1b.html mask-position-1-ref.html
+fails == mask-position-1c.html mask-position-1-ref.html
+fails == mask-position-2a.html mask-position-2-ref.html
+fails == mask-position-2b.html mask-position-2-ref.html
+fails == mask-position-3a.html mask-position-3-ref.html
+fails == mask-position-3b.html mask-position-3-ref.html
+fails == mask-position-4a.html mask-position-4-ref.html
+fails == mask-position-4b.html mask-position-4-ref.html
+fails == mask-position-4c.html mask-position-4-ref.html
+fails == mask-position-4d.html mask-position-4-ref.html
+fails == mask-position-5.html mask-position-5-ref.html
+fails == mask-position-6.html mask-position-6-ref.html
+fails == mask-position-7.html mask-position-7-ref.html
+
+# mask-repeat test cases
+fails == mask-repeat-1.html mask-repeat-1-ref.html
+fails == mask-repeat-2.html mask-repeat-2-ref.html
+fails == mask-repeat-3.html mask-repeat-3-ref.html
+
+# mask-origin test cases
+fails == mask-origin-1.html mask-origin-1-ref.html
+fails == mask-origin-2.html mask-origin-2-ref.html # bug 1260094
+
+# mask-size test cases
+fails == mask-size-auto.html mask-size-auto-ref.html
+fails == mask-size-auto-auto.html mask-size-auto-ref.html
+fails == mask-size-auto-length.html mask-size-auto-length-ref.html
+fails == mask-size-auto-percent.html mask-size-auto-length-ref.html
+fails == mask-size-contain-clip-border.html mask-size-contain-clip-border-ref.html
+fails == mask-size-contain-clip-padding.html mask-size-contain-clip-padding-ref.html
+fails == mask-size-contain-position-fifty-fifty.html mask-size-contain-position-fifty-fifty-ref.html
+fails == mask-size-contain.html mask-size-contain-ref.html
+fails == mask-size-cover.html mask-size-cover-ref.html
+fails == mask-size-length.html mask-size-length-length-ref.html
+fails == mask-size-length-auto.html mask-size-length-length-ref.html
+fails == mask-size-length-length.html mask-size-length-length-ref.html
+fails == mask-size-length-percent.html mask-size-length-percent-ref.html
+fails == mask-size-percent.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-auto.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-length.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-percent.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-percent-stretch.html mask-size-percent-percent-stretch-ref.html
+
+default-preferences pref(layout.css.clip-path-shapes.enabled,true)
+
+fuzzy-if(winWidget,1,21) == clip-path-contentBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-contentBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-contentBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-borderBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-borderBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-borderBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-marginBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-fillBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-strokeBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-strokeBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-viewBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-viewBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-viewBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,9,98) == clip-path-geometryBox-2.html clip-path-geometryBox-2-ref.html
+
+== clip-path-localRef-1.html clip-path-localRef-1-ref.html
+
+default-preferences
+
+# mask with opacity test cases
+fails == mask-opacity-1a.html mask-opacity-1-ref.html
+fails == mask-opacity-1b.html mask-opacity-1-ref.html
+fuzzy(1,5000) == mask-opacity-1c.html mask-opacity-1-ref.html
+
+== clip-path-mix-blend-mode-1.html clip-path-mix-blend-mode-1-ref.html
diff --git a/layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg b/layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg
new file mode 100644
index 000000000..c9a82b493
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="50" height="100" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0"  width="50" height="100" fill="blue" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg b/layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg
new file mode 100644
index 000000000..a68a1fa5b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0"  width="50" height="50" fill="blue" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png
new file mode 100644
index 000000000..3b72d5ce5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg
new file mode 100644
index 000000000..38cae60fc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png
new file mode 100644
index 000000000..65b1e88a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg
new file mode 100644
index 000000000..459f21d5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <rect x="0" y="0"  width="100%" height="50%" fill="blue" fill-opacity="0"/>
+  <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg
new file mode 100644
index 000000000..5b79155b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="RGB(238,238,255)" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png
new file mode 100644
index 000000000..d65838b7f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png
diff --git a/layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg
new file mode 100644
index 000000000..87fd691a0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="lime" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg
new file mode 100644
index 000000000..795bd7e5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="RGB(73,73,255)" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg
new file mode 100644
index 000000000..78f699355
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <mask id="mask" mask-type="alpha">
+      <rect x="0" y="0"  width="100" height="50" fill-opacity="1"/>
+      <rect x="0" y="50" width="100" height="50" fill-opacity="0"/>
+    </mask>
+  </defs>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png
new file mode 100644
index 000000000..43b8e542a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png
diff --git a/layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg
new file mode 100644
index 000000000..0ba285bf0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="red" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg
new file mode 100644
index 000000000..05075f521
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="RGB(201,201,255)" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png
new file mode 100644
index 000000000..f45174665
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png
diff --git a/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg
new file mode 100644
index 000000000..658aed9f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <rect x="0" y="0"  width="100%" height="50%" fill="blue" fill-opacity="1"/>
+  <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="0"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/multicol3/moz-multicol3-column-balancing-break-inside-avoid-1-ref.html b/layout/reftests/w3c-css/submitted/multicol3/moz-multicol3-column-balancing-break-inside-avoid-1-ref.html
new file mode 100644
index 000000000..e9b326b22
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/multicol3/moz-multicol3-column-balancing-break-inside-avoid-1-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html><head>
+  <title>CSS Test: Balancing Overflow, page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <meta name="flags" content="paged">
+  <meta charset="utf-8">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+	
+  .colset {
+    -moz-column-count: 3;
+    -moz-column-gap: 0;
+    border: solid silver;
+    width: 9em;
+  }
+  p { margin: 0; }
+  .short { height: 5px; }
+  .short p { }
+
+    </style>
+</head>
+<body>
+
+<div class="colset">
+<p>one<br>&nbsp;&nbsp;&nbsp;&nbsp;</p>
+<p>two three</p>
+<p>four five</p>
+</div>
+
+<div class="colset">
+  <p>one two three four five</p>
+</div>
+
+<div class="colset">
+one two three four five
+</div>
+
+<div class="colset">
+  <div class="short"><p>one two three four five</p></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/multicol3/moz-multicol3-column-balancing-break-inside-avoid-1.html b/layout/reftests/w3c-css/submitted/multicol3/moz-multicol3-column-balancing-break-inside-avoid-1.html
new file mode 100644
index 000000000..79405c9a2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/multicol3/moz-multicol3-column-balancing-break-inside-avoid-1.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html><head>
+  <title>CSS Test: Balancing Overflow, page-break-inside:avoid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=685012">
+  <link rel="help" href="http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside">
+  <link rel="match" href="moz-multicol3-column-balancing-break-inside-avoid-1-ref.html">
+  <meta name="flags" content="paged">
+  <meta charset="utf-8">
+  <style type="text/css">
+@page { size:5in 3in; margin:0.5in; }
+
+        html,body {
+            color:black; background-color:white; font-size:16px; padding:0; margin:0;
+        }
+	
+  .colset {
+    -moz-column-count: 3;
+    -moz-column-gap: 0;
+    border: solid silver;
+    width: 9em;
+  }
+  p { margin: 0; page-break-inside:avoid; }
+  .short { height: 5px; page-break-inside:avoid; }
+  .short p { page-break-inside:auto; }
+
+    </style>
+</head>
+<body>
+
+<div class="colset">
+<p>one</p>
+<p>two three</p>
+<p>four five</p>
+</div>
+
+<div class="colset">
+  <p>one two three four five</p>
+</div>
+
+<div class="colset">
+<p>one two</p>
+<p>three four five</p>
+</div>
+
+<div class="colset">
+  <div class="short"><p>one two three four five</p></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/multicol3/multicol-height-002.xht b/layout/reftests/w3c-css/submitted/multicol3/multicol-height-002.xht
new file mode 100644
index 000000000..f43afe383
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/multicol3/multicol-height-002.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head class="reftest-print">
+  <title>CSS Test: Percentage Computed Height on Multicol Child (Definite Multicol Height)</title>
+  <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" />
+  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" />
+  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/>
+  <meta name="flags" content="" />
+  <meta name="assert" content="Percentage heights with a multi-column element are relative to the computed height of the multicolumn box, and this works even when the multi-column element is paginated." />
+  <link rel="match" href="reference/multicol-height-002.xht" />
+  <style type="text/css"><![CDATA[
+    html, body { height: 100%; }
+    * { margin: 0; }
+    div {
+      border: double blue 12px;
+      -moz-column-count:2;
+      -moz-column-gap:0;
+      -moz-column-fill: balance;
+      height: 150%;
+    }
+    div > p {
+      border-right: solid orange 12px;
+      width: 0;
+      margin: 0 auto;
+      height: 200%;
+    }
+    blockquote {
+      border: solid thick yellow;
+    }
+  ]]></style>
+ </head>
+ <body>
+  <p>Test passes if even when printed:</p>
+  <ul>
+    <li>Two vertical orange stripes stretch exactly
+    from the inner top edge to the inner bottom edge of the blue box below.</li>
+    <li>There is a yellow stripe immediately below the blue box.</li>
+  </ul>
+  <div>
+    <p></p>
+  </div>
+  <blockquote></blockquote>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/multicol3/reference/multicol-height-002.xht b/layout/reftests/w3c-css/submitted/multicol3/reference/multicol-height-002.xht
new file mode 100644
index 000000000..f707a8a31
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/multicol3/reference/multicol-height-002.xht
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head class="reftest-print">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" />
+  <style type="text/css"><![CDATA[
+    html, body { height: 100%; }
+    * { margin: 0; }
+    div {
+      border: double blue 12px;
+      height: 150%;
+      padding: 0 12px;
+    }
+    div > p {
+      border-right: solid orange 12px;
+      border-left: solid orange 12px;
+      width: 50%;
+      margin: 0 auto;
+      height: 100%;
+    }
+    blockquote {
+      border: solid thick yellow;
+    }  ]]></style>
+ </head>
+ <body>
+  <p>Test passes if even when printed:</p>
+  <ul>
+    <li>Two vertical orange stripes stretch exactly
+    from the inner top edge to the inner bottom edge of the blue box below.</li>
+    <li>There is a yellow stripe immediately below the blue box.</li>
+  </ul>
+  <div>
+    <p></p>
+  </div>
+  <blockquote></blockquote>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/multicol3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/multicol3/reftest-stylo.list
new file mode 100644
index 000000000..9ac502b8e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/multicol3/reftest-stylo.list
@@ -0,0 +1,3 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== moz-multicol3-column-balancing-break-inside-avoid-1.html moz-multicol3-column-balancing-break-inside-avoid-1.html
+== multicol-height-002.xht multicol-height-002.xht
diff --git a/layout/reftests/w3c-css/submitted/multicol3/reftest.list b/layout/reftests/w3c-css/submitted/multicol3/reftest.list
new file mode 100644
index 000000000..52e87560e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/multicol3/reftest.list
@@ -0,0 +1,2 @@
+== moz-multicol3-column-balancing-break-inside-avoid-1.html moz-multicol3-column-balancing-break-inside-avoid-1-ref.html
+== multicol-height-002.xht reference/multicol-height-002.xht
diff --git a/layout/reftests/w3c-css/submitted/references/test-template-001.xht b/layout/reftests/w3c-css/submitted/references/test-template-001.xht
new file mode 100644
index 000000000..da956df9a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/references/test-template-001.xht
@@ -0,0 +1,13 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="{{ reference author's name }}" href="{{ reference author's contact info (mailto or http) }}" />
+  <style type="text/css"><![CDATA[
+   {{ css for the reference }}
+  ]]></style>
+ </head>
+ <body>
+   <!-- content of reference -->
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/reftest-stylo.list b/layout/reftests/w3c-css/submitted/reftest-stylo.list
new file mode 100644
index 000000000..71dad7646
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/reftest-stylo.list
@@ -0,0 +1,76 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Do not assign a test to multiple references. Chain the references instead.
+# See README.
+
+== test-template-001.xht test-template-001.xht
+
+# Module includes, alphabetical sans "CSS". Add/uncomment as necessary.
+
+## CSS Snapshot 2007
+
+# CSS2.1
+include css21/reftest-stylo.list
+
+# Backgrounds and Borders
+include background/reftest-stylo.list
+
+# Color Level 4
+include color4/reftest-stylo.list
+
+# Conditional Rules Level 3
+include conditional3/reftest-stylo.list
+
+# Containment
+include contain/reftest-stylo.list
+
+# Filter Effects Module
+include filters/reftest-stylo.list
+
+# Flexible Box Layout Module
+include flexbox/reftest-stylo.list
+
+# Fonts Level 3
+include fonts3/reftest-stylo.list
+
+# Image Values and Replaced Content Level 3
+# Disabled due to svg intermittents
+# include images3/reftest-stylo.list
+
+# Lists and Counters Level 3
+include lists-3/reftest-stylo.list
+
+# Masking Level 1
+include masking/reftest-stylo.list
+
+# Multi-column Layout 3
+include multicol3/reftest-stylo.list
+
+# Ruby Layout Module
+include ruby/reftest-stylo.list
+
+# Selectors Level 4
+include selectors4/reftest-stylo.list
+
+# Text Level 3
+include text3/reftest-stylo.list
+
+# Text Decoration Level 3
+include text-decor-3/reftest-stylo.list
+
+# Transforms
+include transforms/reftest-stylo.list
+
+# User Interface Level 3
+include ui3/reftest-stylo.list
+
+# Values and Units Level 3
+include values3/reftest-stylo.list
+
+# Variables Level 1
+include variables/reftest-stylo.list
+
+# CSS will-change Level 1
+include will-change/reftest-stylo.list
+
+# CSS Writing Modes Level 3
+include writing-modes-3/reftest-stylo.list
diff --git a/layout/reftests/w3c-css/submitted/reftest.list b/layout/reftests/w3c-css/submitted/reftest.list
new file mode 100644
index 000000000..435075d7d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/reftest.list
@@ -0,0 +1,77 @@
+# Do not assign a test to multiple references. Chain the references instead.
+# See README.
+
+== test-template-001.xht references/test-template-001.xht
+
+# Module includes, alphabetical sans "CSS". Add/uncomment as necessary.
+
+## CSS Snapshot 2007
+
+# CSS Box Alignment Level 3
+include align3/reftest.list
+
+# CSS2.1
+include css21/reftest.list
+
+# Backgrounds and Borders
+include background/reftest.list
+
+# Color Level 4
+include color4/reftest.list
+
+# Conditional Rules Level 3
+include conditional3/reftest.list
+
+# Containment
+include contain/reftest.list
+
+# Filter Effects Module
+include filters/reftest.list
+
+# Flexible Box Layout Module
+include flexbox/reftest.list
+
+# Fonts Level 3
+include fonts3/reftest.list
+
+# Image Values and Replaced Content Level 3
+include images3/reftest.list
+
+# Lists and Counters Level 3
+include lists-3/reftest.list
+
+# Masking Level 1
+include masking/reftest.list
+
+# Multi-column Layout 3
+include multicol3/reftest.list
+
+# Ruby Layout Module
+include ruby/reftest.list
+
+# Selectors Level 4
+include selectors4/reftest.list
+
+# Text Level 3
+include text3/reftest.list
+
+# Text Decoration Level 3
+include text-decor-3/reftest.list
+
+# Transforms
+include transforms/reftest.list
+
+# User Interface Level 3
+include ui3/reftest.list
+
+# Values and Units Level 3
+include values3/reftest.list
+
+# Variables Level 1
+include variables/reftest.list
+
+# CSS will-change Level 1
+include will-change/reftest.list
+
+# CSS Writing Modes Level 3
+include writing-modes-3/reftest.list
diff --git a/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001-ref.html b/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001-ref.html
new file mode 100644
index 000000000..ab1fee01a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Basic nested ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <style>
+    div {
+      display: inline-block;
+      padding: 20px;
+      border: 1px solid black;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if content in the two blocks are identical:</p>
+  <div id="test">
+    <ruby><rb>東<rb>南<rt>とう<rt>なん<rtc lang=en>Southeast</ruby>の方角
+  </div>
+  <div id="ref">
+    <ruby><rb>東<rb>南<rt>とう<rt>なん<rtc lang=en>Southeast</ruby>の方角
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001.html b/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001.html
new file mode 100644
index 000000000..1c00017cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/nested-ruby-pairing-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Basic nested ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#nested-pairing">
+  <link rel="match" href="nested-ruby-pairing-001-ref.html">
+  <style>
+    div {
+      display: inline-block;
+      padding: 20px;
+      border: 1px solid black;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if content in the two blocks are identical:</p>
+  <div id="test">
+    <ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt lang=en>Southeast</rt></ruby>の方角
+  </div>
+  <div id="ref">
+    <ruby><rb>東<rb>南<rt>とう<rt>なん<rtc lang=en>Southeast</ruby>の方角
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/reftest-stylo.list b/layout/reftests/w3c-css/submitted/ruby/reftest-stylo.list
new file mode 100644
index 000000000..d72859a10
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/reftest-stylo.list
@@ -0,0 +1,19 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests for inlinizing block-level boxes
+== ruby-inlinize-blocks-001.html ruby-inlinize-blocks-001.html
+skip == ruby-inlinize-blocks-002.html ruby-inlinize-blocks-002.html
+== ruby-inlinize-blocks-003.html ruby-inlinize-blocks-003.html
+== ruby-inlinize-blocks-004.html ruby-inlinize-blocks-004.html
+== ruby-inlinize-blocks-005.html ruby-inlinize-blocks-005.html
+
+# Tests for autohiding base-identical annotations
+== ruby-autohide-001.html ruby-autohide-001.html
+== ruby-autohide-002.html ruby-autohide-002.html
+== ruby-autohide-003.html ruby-autohide-003.html
+== ruby-autohide-004.html ruby-autohide-004.html
+
+# Tests for ruby with text-combine-upright
+== ruby-text-combine-upright-001a.html ruby-text-combine-upright-001a.html
+== ruby-text-combine-upright-001b.html ruby-text-combine-upright-001b.html
+== ruby-text-combine-upright-002a.html ruby-text-combine-upright-002a.html
+== ruby-text-combine-upright-002b.html ruby-text-combine-upright-002b.html
diff --git a/layout/reftests/w3c-css/submitted/ruby/reftest.list b/layout/reftests/w3c-css/submitted/ruby/reftest.list
new file mode 100644
index 000000000..25447e5e8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/reftest.list
@@ -0,0 +1,21 @@
+# Tests for inlinizing block-level boxes
+== ruby-inlinize-blocks-001.html ruby-inlinize-blocks-001-ref.html
+== ruby-inlinize-blocks-002.html ruby-inlinize-blocks-002-ref.html
+== ruby-inlinize-blocks-003.html ruby-inlinize-blocks-003-ref.html
+== ruby-inlinize-blocks-004.html ruby-inlinize-blocks-004-ref.html
+== ruby-inlinize-blocks-005.html ruby-inlinize-blocks-005-ref.html
+
+# Tests for autohiding base-identical annotations
+== ruby-autohide-001.html ruby-autohide-001-ref.html
+== ruby-autohide-002.html ruby-autohide-002-ref.html
+== ruby-autohide-003.html ruby-autohide-003-ref.html
+== ruby-autohide-004.html ruby-autohide-001-ref.html
+
+# Tests for ruby with text-combine-upright
+== ruby-text-combine-upright-001a.html ruby-text-combine-upright-001-ref.html
+== ruby-text-combine-upright-001b.html ruby-text-combine-upright-001-ref.html
+== ruby-text-combine-upright-002a.html ruby-text-combine-upright-002-ref.html
+== ruby-text-combine-upright-002b.html ruby-text-combine-upright-002-ref.html
+
+# Tests for nested ruby
+== nested-ruby-pairing-001.html nested-ruby-pairing-001-ref.html
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001-ref.html
new file mode 100644
index 000000000..43945ce1b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+</head>
+<body>
+  <ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt>
+  </ruby>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001.html
new file mode 100644
index 000000000..61bc6706b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide">
+  <link rel="match" href="ruby-autohide-001-ref.html">
+</head>
+<body>
+  <ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt>
+  </ruby>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002-ref.html
new file mode 100644
index 000000000..afa0f3cd2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+</head>
+<body>
+  <p><ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt>ri</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb>ri</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002.html
new file mode 100644
index 000000000..3d5131cdd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-002.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide">
+  <link rel="match" href="ruby-autohide-002-ref.html">
+  <script>
+    window.onload = function() {
+      // Force a reflow before changes.
+      document.body.clientWidth;
+      var elems = document.querySelectorAll('[data-content]');
+      for (var i = 0; i < elems.length; i++) {
+        elems[i].textContent = elems[i].dataset.content;
+      }
+    };
+  </script>
+</head>
+<body>
+  <p><ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt data-content="ri">り</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb data-content="ri">り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt data-content="り">ri</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+  <p><ruby>
+    <rb>振</rb><rb data-content="り">ri</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt>
+  </ruby></p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003-ref.html
new file mode 100644
index 000000000..468b17d4e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <style>
+    body { line-height: 5em; }
+  </style>
+</head>
+<body>
+  <ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt></rt><rt>が</rt><rt>な</rt>
+  </ruby>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003.html
new file mode 100644
index 000000000..2279e7540
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-003.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide">
+  <link rel="match" href="ruby-autohide-003-ref.html">
+  <style>
+    body { line-height: 5em; }
+  </style>
+</head>
+<body>
+  <ruby>
+    <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb>
+    <rt>ふ</rt><rt style="line-height: 100em;">り</rt><rt>が</rt><rt>な</rt>
+  </ruby>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-004.html b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-004.html
new file mode 100644
index 000000000..4499cf3e1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-autohide-004.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Autohide ruby annotations which are identical to their bases</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#autohide">
+  <link rel="match" href="ruby-autohide-001-ref.html">
+</head>
+<body>
+  <ruby>
+    振<rt>ふ</rt>り<rt>り</rt>仮<rt>が</rt>名<rt>な</rt>
+  </ruby>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001-ref.html
new file mode 100644
index 000000000..d29358b5b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="stylesheet" href="support/rbc.css">
+  <style>
+    .inline {
+      display: inline-block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<div class="inline">b</div>c</ruby></div>
+  <div><rb>a<div class="inline">b</div>c</rb></div>
+  <div><rt>a<div class="inline">b</div>c</rt></div>
+  <div><rbc>a<div class="inline">b</div>c</rbc></div>
+  <div><rtc>a<div class="inline">b</div>c</rtc></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001.html
new file mode 100644
index 000000000..f8a73f318
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize">
+  <link rel="match" href="ruby-inlinize-blocks-001-ref.html">
+  <link rel="stylesheet" href="support/rbc.css">
+  <style>
+    .inline {
+      display: block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<div class="inline">b</div>c</ruby></div>
+  <div><rb>a<div class="inline">b</div>c</rb></div>
+  <div><rt>a<div class="inline">b</div>c</rt></div>
+  <div><rbc>a<div class="inline">b</div>c</rbc></div>
+  <div><rtc>a<div class="inline">b</div>c</rtc></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002-ref.html
new file mode 100644
index 000000000..d1ba587e9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <style>
+    .block, table, .flex {
+      background-color: yellow;
+      width: 100px; height: 30px;
+      border: 1px solid blue;
+    }
+    .block { display: inline-block; }
+    table { display: inline-table; border-collapse: collapse; }
+    td { border: 3px solid red; }
+    .flex { display: inline-flex; }
+    .flex-item { flex: auto; }
+  </style>
+</head>
+<body>
+  <div><rb>a<div class="block">b</div>c</rb><rt>x<div class="block">y</div>z</rt></div>
+  <div>
+    <rb>a<table><tr><td>b1</td><td>b2</td></tr></table>c</rb>
+    <rt>x<table><tr><td>y1</td><td>y2</td></tr></table>z</rt>
+  </div>
+  <div>
+    <rb>a<div class="flex">
+      <div class="flex-item">b1</div>
+      <div class="flex-item">b2</div>
+    </div>c</rb>
+    <rt>x<div class="flex">
+      <div class="flex-item">y1</div>
+      <div class="flex-item">y2</div>
+    </div>z</rt>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002.html
new file mode 100644
index 000000000..e16b7731e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-002.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize">
+  <link rel="match" href="ruby-inlinize-blocks-002-ref.html">
+  <style>
+    .block, table, .flex {
+      background-color: yellow;
+      width: 100px; height: 30px;
+      border: 1px solid blue;
+    }
+    .block { display: block; }
+    table { border-collapse: collapse; }
+    td { border: 3px solid red; }
+    .flex { display: flex; }
+    .flex-item { flex: auto; }
+  </style>
+</head>
+<body>
+  <div><rb>a<div class="block">b</div>c</rb><rt>x<div class="block">y</div>z</rt></div>
+  <div>
+    <rb>a<table><tr><td>b1</td><td>b2</td></tr></table>c</rb>
+    <rt>x<table><tr><td>y1</td><td>y2</td></tr></table>z</rt>
+  </div>
+  <div>
+    <rb>a<div class="flex">
+      <div class="flex-item">b1</div>
+      <div class="flex-item">b2</div>
+    </div>c</rb>
+    <rt>x<div class="flex">
+      <div class="flex-item">y1</div>
+      <div class="flex-item">y2</div>
+    </div>z</rt>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003-ref.html
new file mode 100644
index 000000000..74a4889a9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="stylesheet" href="support/rbc.css">
+  <style>
+    div { border-collapse: collapse; }
+    .table { display: inline-table; }
+    .cell {
+      display: table-cell;
+      background-color: yellow;
+      border: 3px solid blue;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</ruby></div>
+  <div><rb>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rb></div>
+  <div><rt>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rt></div>
+  <div><rbc>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rbc></div>
+  <div><rtc>a<div class="table"><div class="cell">b1</div><div class="cell">b2</div></div>c</rtc></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003.html
new file mode 100644
index 000000000..8200413af
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-003.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize">
+  <link rel="match" href="ruby-inlinize-blocks-003-ref.html">
+  <link rel="stylesheet" href="support/rbc.css">
+  <style>
+    body { border-collapse: collapse; }
+    .cell {
+      display: table-cell;
+      background-color: yellow;
+      border: 3px solid blue;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<div class="cell">b1</div><div class="cell">b2</div>c</ruby></div>
+  <div><rb>a<div class="cell">b1</div><div class="cell">b2</div>c</rb></div>
+  <div><rt>a<div class="cell">b1</div><div class="cell">b2</div>c</rt></div>
+  <div><rbc>a<div class="cell">b1</div><div class="cell">b2</div>c</rbc></div>
+  <div><rtc>a<div class="cell">b1</div><div class="cell">b2</div>c</rtc></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004-ref.html
new file mode 100644
index 000000000..90e876850
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="stylesheet" href="support/rbc.css">
+  <style>
+    .inline {
+      display: inline-block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<span><div class="inline">b</div></span>c</ruby></div>
+  <div><rb>a<span><div class="inline">b</div></span>c</rb></div>
+  <div><rt>a<span><div class="inline">b</div></span>c</rt></div>
+  <div><rbc>a<span><div class="inline">b</div></span>c</rbc></div>
+  <div><rtc>a<span><div class="inline">b</div></span>c</rtc></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004.html
new file mode 100644
index 000000000..1305faa40
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-004.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize">
+  <link rel="match" href="ruby-inlinize-blocks-004-ref.html">
+  <link rel="stylesheet" href="support/rbc.css">
+  <style>
+    .inline {
+      display: block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>a<span><div class="inline">b</div></span>c</ruby></div>
+  <div><rb>a<span><div class="inline">b</div></span>c</rb></div>
+  <div><rt>a<span><div class="inline">b</div></span>c</rt></div>
+  <div><rbc>a<span><div class="inline">b</div></span>c</rbc></div>
+  <div><rtc>a<span><div class="inline">b</div></span>c</rtc></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005-ref.html
new file mode 100644
index 000000000..25ac110a2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="stylesheet" href="support/rbc.css">
+  <style>
+    ruby::before, rb::before, rt::before, rbc::before, rtc::before {
+      content: "a";
+      display: inline-block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+    ruby::after, rb::after, rt::after, rbc::after, rtc::after {
+      content: "c";
+      display: inline-block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>b</ruby></div>
+  <div><rb>b</rb></div>
+  <div><rt>b</rt></div>
+  <div><rbc>b</rbc></div>
+  <div><rtc>b</rtc></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005.html b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005.html
new file mode 100644
index 000000000..a80ce73e5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-inlinize-blocks-005.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Inlinize block-level boxes inside ruby</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:quanxunzhen@gmail.com">
+  <link rel="help" href="http://www.w3.org/TR/css-ruby-1/#anon-gen-inlinize">
+  <link rel="match" href="ruby-inlinize-blocks-005-ref.html">
+  <link rel="stylesheet" href="support/rbc.css">
+  <style>
+    ruby::before, rb::before, rt::before, rbc::before, rtc::before {
+      content: "a";
+      display: block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+    ruby::after, rb::after, rt::after, rbc::after, rtc::after {
+      content: "c";
+      display: block;
+      background-color: yellow;
+      width: 30px; height: 30px;
+    }
+  </style>
+</head>
+<body>
+  <div><ruby>b</ruby></div>
+  <div><rb>b</rb></div>
+  <div><rt>b</rt></div>
+  <div><rbc>b</rbc></div>
+  <div><rtc>b</rtc></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001-ref.html
new file mode 100644
index 000000000..580bcd3fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Ruby with text-combine-upright in base</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="stylesheet" href="support/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb><span style="writing-mode: horizontal-tb">X</span></rb><rt>XXXXXXXX</rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001a.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001a.html
new file mode 100644
index 000000000..a35772ac0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Ruby with text-combine-upright base</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+  <link rel="match" href="ruby-text-combine-upright-001-ref.html">
+  <link rel="stylesheet" href="support/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb style="text-combine-upright: all">X</rb><rt>XXXXXXXX</rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001b.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001b.html
new file mode 100644
index 000000000..4997bdc9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-001b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Ruby with text-combine-upright child in base</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+  <link rel="match" href="ruby-text-combine-upright-001-ref.html">
+  <link rel="stylesheet" href="support/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb><span style="text-combine-upright: all">X</span></rb><rt>XXXXXXXX</rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002-ref.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002-ref.html
new file mode 100644
index 000000000..796cd90b8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Reference: Ruby with text-combine-upright annotation</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="stylesheet" href="support/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb>XXXX</rb><rt><span style="writing-mode: horizontal-tb">X</span></rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002a.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002a.html
new file mode 100644
index 000000000..411c5b248
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002a.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Ruby with text-combine-upright in annotation</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+  <link rel="match" href="ruby-text-combine-upright-002-ref.html">
+  <link rel="stylesheet" href="support/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb>XXXX</rb><rt style="text-combine-upright: all">X</rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002b.html b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002b.html
new file mode 100644
index 000000000..df57bf886
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/ruby-text-combine-upright-002b.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Ruby with text-combine-upright child in annotation</title>
+  <link rel="author" title="Xidorn Quan" href="mailto:csswg@upsuper.org">
+  <link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-align-property">
+  <link rel="match" href="ruby-text-combine-upright-002-ref.html">
+  <link rel="stylesheet" href="support/ahem.css">
+  <style>
+    .test {
+      font: 52px Ahem;
+      writing-mode: vertical-rl;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if the two rectangles are vertically middle aligned.</p>
+  <div class="test">
+    <ruby><rb>XXXX</rb><rt><span style="text-combine-upright: all">X</span></rt></ruby>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ruby/support/Ahem.ttf b/layout/reftests/w3c-css/submitted/ruby/support/Ahem.ttf
new file mode 100644
index 000000000..ac81cb031
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/support/Ahem.ttf
diff --git a/layout/reftests/w3c-css/submitted/ruby/support/ahem.css b/layout/reftests/w3c-css/submitted/ruby/support/ahem.css
new file mode 100644
index 000000000..82ee46679
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/support/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Ahem";
+  src: url(./Ahem.ttf);
+}
diff --git a/layout/reftests/w3c-css/submitted/ruby/support/rbc.css b/layout/reftests/w3c-css/submitted/ruby/support/rbc.css
new file mode 100644
index 000000000..75620e1e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ruby/support/rbc.css
@@ -0,0 +1,4 @@
+rbc {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
diff --git a/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01-ref.html b/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01-ref.html
new file mode 100644
index 000000000..069c86cf0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test reference</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com">
+<style>
+  :root {
+    color: green;
+  }
+</style>
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
diff --git a/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01.html b/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01.html
new file mode 100644
index 000000000..5ae108b7d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: child-indexed selectors should match without a parent element.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
+<link rel="match" href="child-index-no-parent-01-ref.html">
+<style>
+  :root:first-child #a {
+    color: green;
+  }
+  :root:nth-child(n) #b {
+    color: green;
+  }
+  :root:first-of-type #c {
+    color: green;
+  }
+  :root:nth-of-type(1) #d {
+    color: green;
+  }
+  :root:last-of-type #e {
+    color: green;
+  }
+  :root:last-child #f {
+    color: green;
+  }
+  :root:nth-last-child(1) #g {
+    color: green;
+  }
+  :root:nth-last-of-type(n) #h {
+    color: green;
+  }
+
+  #i {
+    color: green;
+  }
+
+  /* NB: not matching intentionally */
+  :root:nth-last-child(2) #i {
+    color: red;
+  }
+</style>
+<p id="a">Should be green
+<p id="b">Should be green
+<p id="c">Should be green
+<p id="d">Should be green
+<p id="e">Should be green
+<p id="f">Should be green
+<p id="g">Should be green
+<p id="h">Should be green
+<p id="i">Should be green
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-01-ref.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01-ref.html
new file mode 100644
index 000000000..664d6dfa7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>dir() selector reference</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style>
+      div { text-align: left; }
+      .blue { color: blue; direction: ltr; }
+      .lime { color: lime; direction: rtl; }
+    </style>
+  </head>
+  <body>
+    <div class="blue">This element has default direction.</div>
+    <div class="blue">This element is ltr.</div>
+    <div class="lime">This element is rtl.</div>
+    <div class="blue">
+      <div>This element should inherit ltr.</div>
+      <div class="blue">This element is ltr.</div>
+      <div class="lime">This element is rtl.</div>
+      <div class="blue">Every word in this element should inherit ltr.</div>
+    </div>
+    <div class="lime">
+      <div>This element should inherit rtl.</div>
+      <div class="blue">This element is ltr.</div>
+      <div class="lime">This element is rtl.</div>
+      <div class="lime">Every word in this element should inherit rtl.</div>
+    </div>
+    <div class="blue">This element has an invalid dir attribute and
+      should have default direction.</div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-01a.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01a.html
new file mode 100644
index 000000000..d7a423979
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01a.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: :dir() selector</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+    <meta name="assert" content="Test checks :dir() basic functions with valid and invalid values.">
+    <link rel="match" href="dir-style-01-ref.html">
+    <style>
+      div { text-align: left; }
+      :dir(ltr) { color: blue }
+      :dir(rtl) { color: lime }
+      :dir(foopy) { color: red }
+    </style>
+  </head>
+  <body>
+    <div>This element has default direction.</div>
+    <div dir="ltr">This element is ltr.</div>
+    <div dir="rtl">This element is rtl.</div>
+    <div dir="ltr">
+      <div>This element should inherit ltr.</div>
+      <div dir="ltr">This element is ltr.</div>
+      <div dir="rtl">This element is rtl.</div>
+      <div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>ltr</span></span></span></span></span></span></span></span>.</div>
+    </div>
+    <div dir="rtl">
+      <div>This element should inherit rtl.</div>
+      <div dir="ltr">This element is ltr.</div>
+      <div dir="rtl">This element is rtl.</div>
+      <div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>rtl</span></span></span></span></span></span></span></span>.</div>
+    </div>
+    <div dir="foopy">This element has an invalid dir attribute and
+      should have default direction.</div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-01b.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01b.html
new file mode 100644
index 000000000..3ef501b78
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01b.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="UTF-8">
+    <title>CSS Test: :dir() selector</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+    <meta name="assert" content="Test checks :dir() basic functions after dynamic directionality change on elements.">
+    <link rel="match" href="dir-style-01-ref.html">
+    <style>
+      div { text-align: left; }
+      :dir(ltr) { color: blue }
+      :dir(rtl) { color: lime }
+      :dir(foopy) { color: red }
+    </style>
+    <script>
+      function switchDir()
+      {
+        divs = document.getElementsByTagName("div");
+        divs[0].offsetWidth; // ensure it's a dynamic change
+        for (var i = 0; i < divs.length; ++i) {
+          theDiv = divs[i];
+          if (theDiv.dir == "ltr") {
+            theDiv.dir = "rtl";
+          } else if (theDiv.dir == "rtl") {
+            theDiv.dir = "ltr";
+          }
+        }
+
+        document.documentElement.removeAttribute("class");
+      }
+    </script>
+  </head>
+  <body onload="switchDir()">
+    <div>This element has default direction.</div>
+    <div dir="rtl">This element is ltr.</div>
+    <div dir="ltr">This element is rtl.</div>
+    <div dir="rtl">
+      <div>This element should inherit ltr.</div>
+      <div dir="rtl">This element is ltr.</div>
+      <div dir="ltr">This element is rtl.</div>
+      <div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>ltr</span></span></span></span></span></span></span></span>.</div>
+    </div>
+    <div dir="ltr">
+      <div>This element should inherit rtl.</div>
+      <div dir="rtl">This element is ltr.</div>
+      <div dir="ltr">This element is rtl.</div>
+      <div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>rtl</span></span></span></span></span></span></span></span>.</div>
+    </div>
+    <div dir="foopy">This element has an invalid dir attribute and
+      should have default direction.</div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-02-ref.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02-ref.html
new file mode 100644
index 000000000..64fb09046
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>dir() selector reference</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style>
+      div { text-align: left; }
+      .blue { color: blue; direction: ltr; }
+      .lime { color: lime; direction: rtl; }
+    </style>
+  </head>
+  <body>
+    <div class="lime">This element has default direction.</div>
+    <div class="blue">This element is ltr.</div>
+    <div class="lime">This element is rtl.</div>
+    <div class="blue">
+      <div>This element should inherit ltr.</div>
+      <div class="blue">This element is ltr.</div>
+      <div class="lime">This element is rtl.</div>
+    </div>
+    <div class="lime">
+      <div>This element should inherit rtl.</div>
+      <div class="blue">This element is ltr.</div>
+      <div class="lime">This element is rtl.</div>
+    </div>
+    <div class="lime">This element has an invalid dir attribute and
+      should have default direction.</div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-02a.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02a.html
new file mode 100644
index 000000000..69b254dc8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02a.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html dir="rtl">
+  <head>
+    <meta charset="UTF-8">
+    <title>CSS Test: :dir() selector</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+    <meta name="assert" content="Test checks :dir() basic functions when default document directionality is rtl.">
+    <link rel="match" href="dir-style-02-ref.html">
+    <style>
+      div { text-align: left; }
+      :dir(ltr) { color: blue }
+      :dir(rtl) { color: lime }
+      :dir(foopy) { color: red }
+    </style>
+  </head>
+  <body>
+    <div>This element has default direction.</div>
+    <div dir="ltr">This element is ltr.</div>
+    <div dir="rtl">This element is rtl.</div>
+    <div dir="ltr">
+      <div>This element should inherit ltr.</div>
+      <div dir="ltr">This element is ltr.</div>
+      <div dir="rtl">This element is rtl.</div>
+    </div>
+    <div dir="rtl">
+      <div>This element should inherit rtl.</div>
+      <div dir="ltr">This element is ltr.</div>
+      <div dir="rtl">This element is rtl.</div>
+    </div>
+    <div dir="foopy">This element has an invalid dir attribute and
+      should have default direction.</div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-02b.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02b.html
new file mode 100644
index 000000000..802ca41f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02b.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="UTF-8">
+    <title>CSS Test: :dir() selector</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+    <meta name="assert" content="Test checks :dir() basic functions when document directionality is dynamically changed from ltr to rtl.">
+    <link rel="match" href="dir-style-02-ref.html">
+    <style>
+      div { text-align: left; }
+      :dir(ltr) { color: blue }
+      :dir(rtl) { color: lime }
+      :dir(foopy) { color: red }
+    </style>
+    <script>
+      function switchDir()
+      {
+        // ensure it's a dynamic change
+        document.documentElement.getBoundingClientRect();
+
+        document.dir = "rtl";
+
+        document.documentElement.removeAttribute("class");
+      }
+    </script>
+  </head>
+  <body onload="switchDir()">
+    <div>This element has default direction.</div>
+    <div dir="ltr">This element is ltr.</div>
+    <div dir="rtl">This element is rtl.</div>
+    <div dir="ltr">
+      <div>This element should inherit ltr.</div>
+      <div dir="ltr">This element is ltr.</div>
+      <div dir="rtl">This element is rtl.</div>
+    </div>
+    <div dir="rtl">
+      <div>This element should inherit rtl.</div>
+      <div dir="ltr">This element is ltr.</div>
+      <div dir="rtl">This element is rtl.</div>
+    </div>
+    <div dir="foopy">This element has an invalid dir attribute and
+      should have default direction.</div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-03-ref.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03-ref.html
new file mode 100644
index 000000000..8c2a60745
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>dir() selector reference</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style>
+      div { text-align: left; }
+      .ltr { color: blue; direction: ltr }
+      .rtl { color: lime; direction: rtl }
+    </style>
+  </head>
+  <body>
+    <div class="rtl">This element is rtl.</div>
+    <div class="ltr">This element has default direction.</div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-03a.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03a.html
new file mode 100644
index 000000000..c57b93eaa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03a.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>CSS Test: :dir() selector</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+    <meta name="assert" content="Test checks if :dir() can work with other selectors correctly.">
+    <link rel="match" href="dir-style-03-ref.html">
+    <style>
+      div { color: lime; text-align: left; }
+      :not(:dir(ltr)) + div { color: blue; }
+    </style>
+  </head>
+  <body>
+    <div dir="rtl">This element is rtl.</div>
+    <div>This element has default direction.</div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-03b.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03b.html
new file mode 100644
index 000000000..bb93b2fd6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="UTF-8">
+    <title>CSS Test: :dir() selector</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+    <meta name="assert" content="Test checks if :dir() can work with other selectors correctly after a dynamic directionality change on specified divs.">
+    <link rel="match" href="dir-style-03-ref.html">
+    <style>
+      div { color: lime; text-align: left; }
+      :not(:dir(ltr)) + div { color: blue }
+    </style>
+    <script>
+      function switchDir()
+      {
+        theDiv = document.getElementById("div");
+        theDiv.offsetWidth; // ensure it's a dynamic change
+        if (theDiv.dir == "ltr") {
+          theDiv.dir = "rtl";
+        } else if (theDiv.dir == "rtl") {
+          theDiv.dir = "ltr";
+        }
+
+        document.documentElement.removeAttribute("class");
+      }
+    </script>
+  </head>
+  <body onload="switchDir()">
+    <div id="div" dir="ltr">This element is rtl.</div>
+    <div>This element has default direction.</div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-04-ref.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-04-ref.html
new file mode 100644
index 000000000..13d394abf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-04-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>dir() selector reference</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style>
+      div { text-align: left; }
+      .ltr { direction: ltr; color: blue; }
+      .rtl { direction: rtl; color: lime; }
+    </style>
+  </head>
+  <body>
+    <div class="ltr">This element is ltr. <span>This span should
+      inherit dir from the parent. <span>This span should inherit dir
+      from the grandparent.</span></span>
+    </div>
+    <div class="rtl">This element is rtl. <span>This span should
+      inherit dir from the parent. <span>This span should inherit dir
+      from the grandparent.</span></span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-04.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-04.html
new file mode 100644
index 000000000..d0a458c84
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-04.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="UTF-8">
+    <title>CSS Test: :dir() selector</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+    <meta name="assert" content="Test checks :dir() basic functions on runtime added elements.">
+    <link rel="match" href="dir-style-04-ref.html">
+    <style>
+      :dir(ltr) { color: blue }
+      :dir(rtl) { color: lime }
+      div { text-align: left; }
+    </style>
+    <script>
+      function appendChildren(e)
+      {
+        // ensure it's a dynamic change
+        document.documentElement.getBoundingClientRect();
+
+        var x = document.createElement("span");
+        x.innerHTML = "This span should inherit dir from the parent. ";
+
+        var y = document.createElement("span");
+        y.innerHTML = "This span should inherit dir from the grandparent.";
+
+        var div = document.getElementById(e);
+
+        x.appendChild(y);
+        div.appendChild(x);
+
+        document.documentElement.removeAttribute("class");
+      }
+    </script>
+  </head>
+  <body onload="appendChildren('d1');appendChildren('d2');">
+    <div id="d1" dir="ltr">This element is ltr. </div>
+    <div id="d2" dir="rtl">This element is rtl. </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-1-ref.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-1-ref.html
new file mode 100644
index 000000000..f5e4edf0f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: :focus-within selector</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        border: solid 15px blue;
+        outline: none;
+        border-color: green;
+      }
+      #child1 {
+        border-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if, when the upper element is unfocused and the lower element is focused, the upper element is blue and the lower one is green, and they are surrounded by a thick green border.</p>
+    <div id="parent">
+      <div id="child1"></div>
+      <div id="child2"></div>
+    </div>
+  <body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-1.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-1.html
new file mode 100644
index 000000000..5a749c3ad
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: :focus-within selector</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+    <meta name="assert" content="Test checks :focus-within works after focus change">
+    <link rel="match" href="focus-within-1-ref.html">
+    <meta name="flags" content="interact">
+    <style type="text/css">
+      div {
+        border: solid 15px blue;
+        outline: none;
+      }
+      div:focus-within {
+        border-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if, when the upper element is unfocused and the lower element is focused, the upper element is blue and the lower one is green, and they are surrounded by a thick green border.</p>
+    <div id="parent">
+      <div id="child1" tabindex="1"></div>
+      <div id="child2" tabindex="2"></div>
+    </div>
+    <script>
+      var child1 = document.getElementById('child1');
+      child1.focus();
+      document.body.offsetWidth;
+
+      var child2 = document.getElementById('child2');
+      child2.focus();
+      document.body.offsetWidth;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-2-ref.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-2-ref.html
new file mode 100644
index 000000000..5aeac2441
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: :focus-within selector</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        border: solid 15px green;
+        outline: none;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if, when the element is focused and then removed, the outer element should change to green.</p>
+    <div id="parent"></div>
+  <body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-2.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-2.html
new file mode 100644
index 000000000..291bc032a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: :focus-within selector</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+    <meta name="assert" content="Test checks :focus-within should not apply after element removed.">
+    <link rel="match" href="focus-within-2-ref.html">
+    <meta name="flags" content="interact">
+    <style type="text/css">
+      div {
+        border: solid 15px green;
+        outline: none;
+      }
+      div:focus-within {
+        border-color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if, when the element is focused and then removed, the outer element should change to green.</p>
+    <div id="parent">
+      <div id="child" tabindex="1"></div>
+    </div>
+    <script>
+      var child = document.getElementById('child');
+      child.focus();
+      document.body.offsetWidth;
+      var parent = document.getElementById("parent");
+      parent.removeChild(child);
+      document.body.offsetWidth;
+    </script>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-3-ref.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-3-ref.html
new file mode 100644
index 000000000..cb0badd2a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-3-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: :focus-within selector</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+  </head>
+  <body>
+    <p>Test passes if, when the element inside the iframe is focused, there is no red border surrounded.</p>
+    <div>
+      <iframe src="focus-within-1.html" width="300px" height="300px" frameborder="0" tabindex="1"><p>Your browser does not support iframes.</p></iframe>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-3.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-3.html
new file mode 100644
index 000000000..1a3a806ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-3.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: :focus-within selector</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+    <meta name="assert" content="Test checks :focus-within should not work for iframe">
+    <link rel="match" href="focus-within-3-ref.html">
+    <meta name="flags" content="interact">
+    <style type="text/css">
+      div:focus-within {
+        border: solid 15px red;
+      }
+      iframe:focus-within {
+        border: solid 15px red;
+      }
+    </style>
+  </head>
+  <body>
+    <p>Test passes if, when the element inside the iframe is focused, there is no red border surrounded.</p>
+    <div>
+      <iframe src="focus-within-1.html" width="300px" height="300px" frameborder="0" tabindex="1"><p>Your browser does not support iframes.</p></iframe>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/reftest-stylo.list b/layout/reftests/w3c-css/submitted/selectors4/reftest-stylo.list
new file mode 100644
index 000000000..b86b5ca02
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/reftest-stylo.list
@@ -0,0 +1,8 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== dir-style-01a.html dir-style-01a.html
+== dir-style-01b.html dir-style-01b.html
+== dir-style-02a.html dir-style-02a.html
+== dir-style-02b.html dir-style-02b.html
+== dir-style-03a.html dir-style-03a.html
+== dir-style-03b.html dir-style-03b.html
+== dir-style-04.html dir-style-04.html
diff --git a/layout/reftests/w3c-css/submitted/selectors4/reftest.list b/layout/reftests/w3c-css/submitted/selectors4/reftest.list
new file mode 100644
index 000000000..5e1bccf5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/reftest.list
@@ -0,0 +1,11 @@
+needs-focus == focus-within-1.html focus-within-1-ref.html
+needs-focus == focus-within-2.html focus-within-2-ref.html
+needs-focus == focus-within-3.html focus-within-3-ref.html
+== dir-style-01a.html dir-style-01-ref.html
+== dir-style-01b.html dir-style-01-ref.html
+== dir-style-02a.html dir-style-02-ref.html
+== dir-style-02b.html dir-style-02-ref.html
+== dir-style-03a.html dir-style-03-ref.html
+== dir-style-03b.html dir-style-03-ref.html
+== dir-style-04.html dir-style-04-ref.html
+== child-index-no-parent-01.html child-index-no-parent-01-ref.html
diff --git a/layout/reftests/w3c-css/submitted/test-template-001.xht b/layout/reftests/w3c-css/submitted/test-template-001.xht
new file mode 100644
index 000000000..ea9cc5feb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/test-template-001.xht
@@ -0,0 +1,18 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: {{ brief but unique descriptive title of what's being tested }}</title>
+  <link rel="author" title="{{ test author's name }}" href="{{ test author's contact info (mailto or http) }}" />
+  <link rel="help" href="http://www.w3.org/TR/{{ URL to specific spec section; for multiple LINKs put primary first }}" />
+  <meta name="flags" content="{{ see http://wiki.csswg.org/test/format#requirement-flags }}" />
+  <meta name="assert" content="{{ explain precisely what is asserted when the test passes;
+                                  optional but helps coordination and review }}" />
+  <link rel="match" href="references/test-template-001.xht" />
+  <style type="text/css"><![CDATA[
+   {{ css for the test }}
+  ]]></style>
+ </head>
+ <body>
+   <!-- content of test -->
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/text-decor-3/reftest-stylo.list
new file mode 100644
index 000000000..7792a22e7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/reftest-stylo.list
@@ -0,0 +1,134 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+
+
+== ruby-text-decoration-01.html ruby-text-decoration-01.html
+== text-decoration-propagation-01.html text-decoration-propagation-01.html
+
+# text-emphasis-style
+== text-emphasis-style-property-001.html text-emphasis-style-property-001.html
+fuzzy-if(gtkWidget,3,4) fuzzy-if(skiaContent,87,65) == text-emphasis-style-property-002.html text-emphasis-style-property-002.html
+skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-003.html text-emphasis-style-property-003.html
+skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-004.html text-emphasis-style-property-004.html
+== text-emphasis-style-property-005.html text-emphasis-style-property-005.html
+== text-emphasis-style-property-005a.html text-emphasis-style-property-005a.html
+# START tests from support/generate-text-emphasis-style-property-010-tests.sh
+== text-emphasis-style-property-010Zs.html text-emphasis-style-property-010Zs.html
+== text-emphasis-style-property-010Zl.html text-emphasis-style-property-010Zl.html
+== text-emphasis-style-property-010Zp.html text-emphasis-style-property-010Zp.html
+== text-emphasis-style-property-010Cc.html text-emphasis-style-property-010Cc.html
+fails fuzzy-if(skiaContent,1,336) == text-emphasis-style-property-010Cf.html text-emphasis-style-property-010Cf.html
+# END tests from support/generate-text-emphasis-style-property-010-tests.sh
+== text-emphasis-style-property-010Cn.html text-emphasis-style-property-010Cn.html
+# START tests from support/generate-text-emphasis-style-property-tests.py
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-011.html text-emphasis-style-property-011.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-011a.html text-emphasis-style-property-011a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-011b.html text-emphasis-style-property-011b.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-012.html text-emphasis-style-property-012.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-012a.html text-emphasis-style-property-012a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-012b.html text-emphasis-style-property-012b.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-012c.html text-emphasis-style-property-012c.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-013.html text-emphasis-style-property-013.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-013a.html text-emphasis-style-property-013a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-013b.html text-emphasis-style-property-013b.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-014.html text-emphasis-style-property-014.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-014a.html text-emphasis-style-property-014a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-014b.html text-emphasis-style-property-014b.html
+fails fuzzy-if(gtkWidget,3,4) skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-015.html text-emphasis-style-property-015.html
+fails fuzzy-if(gtkWidget,3,4) skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-015a.html text-emphasis-style-property-015a.html
+fails fuzzy-if(gtkWidget,3,4) skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-015b.html text-emphasis-style-property-015b.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-016.html text-emphasis-style-property-016.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-016a.html text-emphasis-style-property-016a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-017.html text-emphasis-style-property-017.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-017a.html text-emphasis-style-property-017a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-017b.html text-emphasis-style-property-017b.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-018.html text-emphasis-style-property-018.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-018a.html text-emphasis-style-property-018a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-019.html text-emphasis-style-property-019.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-019a.html text-emphasis-style-property-019a.html
+fails fuzzy-if(gtkWidget,3,4) skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-020.html text-emphasis-style-property-020.html
+fails fuzzy-if(gtkWidget,3,4) skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-020a.html text-emphasis-style-property-020a.html
+# END tests from support/generate-text-emphasis-style-property-tests.py
+
+# text-emphasis-color
+fuzzy-if(gtkWidget,3,4) == text-emphasis-color-property-001.html text-emphasis-color-property-001.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-color-property-001a.html text-emphasis-color-property-001a.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-color-property-002.html text-emphasis-color-property-002.html
+
+# text-emphasis
+== text-emphasis-property-001.html text-emphasis-property-001.html
+fuzzy-if(gtkWidget,3,4) fuzzy-if(skiaContent,87,65) == text-emphasis-property-002.html text-emphasis-property-002.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-property-003.html text-emphasis-property-003.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-property-003a.html text-emphasis-property-003a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-property-003b.html text-emphasis-property-003b.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-property-004.html text-emphasis-property-004.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-property-004a.html text-emphasis-property-004a.html
+
+# text-emphasis-position
+# START tests from support/generate-text-emphasis-position-property-tests.py
+fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-001.html text-emphasis-position-property-001.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-001a.html text-emphasis-position-property-001a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-001b.html text-emphasis-position-property-001b.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-001c.html text-emphasis-position-property-001c.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-002.html text-emphasis-position-property-002.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-002a.html text-emphasis-position-property-002a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-002b.html text-emphasis-position-property-002b.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-002c.html text-emphasis-position-property-002c.html
+== text-emphasis-position-property-003.html text-emphasis-position-property-003.html
+== text-emphasis-position-property-003a.html text-emphasis-position-property-003a.html
+== text-emphasis-position-property-003b.html text-emphasis-position-property-003b.html
+== text-emphasis-position-property-003c.html text-emphasis-position-property-003c.html
+== text-emphasis-position-property-003d.html text-emphasis-position-property-003d.html
+== text-emphasis-position-property-003e.html text-emphasis-position-property-003e.html
+== text-emphasis-position-property-003f.html text-emphasis-position-property-003f.html
+== text-emphasis-position-property-003g.html text-emphasis-position-property-003g.html
+== text-emphasis-position-property-004.html text-emphasis-position-property-004.html
+== text-emphasis-position-property-004a.html text-emphasis-position-property-004a.html
+== text-emphasis-position-property-004b.html text-emphasis-position-property-004b.html
+== text-emphasis-position-property-004c.html text-emphasis-position-property-004c.html
+== text-emphasis-position-property-004d.html text-emphasis-position-property-004d.html
+== text-emphasis-position-property-004e.html text-emphasis-position-property-004e.html
+== text-emphasis-position-property-004f.html text-emphasis-position-property-004f.html
+== text-emphasis-position-property-004g.html text-emphasis-position-property-004g.html
+== text-emphasis-position-property-005.html text-emphasis-position-property-005.html
+== text-emphasis-position-property-005a.html text-emphasis-position-property-005a.html
+== text-emphasis-position-property-005b.html text-emphasis-position-property-005b.html
+== text-emphasis-position-property-005c.html text-emphasis-position-property-005c.html
+== text-emphasis-position-property-005d.html text-emphasis-position-property-005d.html
+== text-emphasis-position-property-005e.html text-emphasis-position-property-005e.html
+== text-emphasis-position-property-005f.html text-emphasis-position-property-005f.html
+== text-emphasis-position-property-005g.html text-emphasis-position-property-005g.html
+== text-emphasis-position-property-006.html text-emphasis-position-property-006.html
+== text-emphasis-position-property-006a.html text-emphasis-position-property-006a.html
+== text-emphasis-position-property-006b.html text-emphasis-position-property-006b.html
+== text-emphasis-position-property-006c.html text-emphasis-position-property-006c.html
+== text-emphasis-position-property-006d.html text-emphasis-position-property-006d.html
+== text-emphasis-position-property-006e.html text-emphasis-position-property-006e.html
+== text-emphasis-position-property-006f.html text-emphasis-position-property-006f.html
+== text-emphasis-position-property-006g.html text-emphasis-position-property-006g.html
+# END tests from support/generate-text-emphasis-position-property-tests.py
+
+# START tests from support/generate-text-emphasis-ruby-tests.py
+== text-emphasis-ruby-001.html text-emphasis-ruby-001.html
+== text-emphasis-ruby-002.html text-emphasis-ruby-002.html
+== text-emphasis-ruby-003.html text-emphasis-ruby-003.html
+== text-emphasis-ruby-003a.html text-emphasis-ruby-003a.html
+== text-emphasis-ruby-004.html text-emphasis-ruby-004.html
+== text-emphasis-ruby-004a.html text-emphasis-ruby-004a.html
+# END tests from support/generate-text-emphasis-ruby-tests.py
+
+# text-emphasis line height
+# START tests from support/generate-text-emphasis-line-height-tests.py
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-line-height-001a.html text-emphasis-line-height-001a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-line-height-001b.html text-emphasis-line-height-001b.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-line-height-002a.html text-emphasis-line-height-002a.html
+fails fuzzy-if(gtkWidget,3,4) == text-emphasis-line-height-002b.html text-emphasis-line-height-002b.html
+== text-emphasis-line-height-003a.html text-emphasis-line-height-003a.html
+== text-emphasis-line-height-003b.html text-emphasis-line-height-003b.html
+== text-emphasis-line-height-003c.html text-emphasis-line-height-003c.html
+== text-emphasis-line-height-003d.html text-emphasis-line-height-003d.html
+== text-emphasis-line-height-004a.html text-emphasis-line-height-004a.html
+== text-emphasis-line-height-004b.html text-emphasis-line-height-004b.html
+== text-emphasis-line-height-004c.html text-emphasis-line-height-004c.html
+== text-emphasis-line-height-004d.html text-emphasis-line-height-004d.html
+# END tests from support/generate-text-emphasis-line-height-tests.py
+fails fuzzy-if(gtkWidget,3,4) fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),43,1) == text-emphasis-line-height-001z.html text-emphasis-line-height-001z.html
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/reftest.list b/layout/reftests/w3c-css/submitted/text-decor-3/reftest.list
new file mode 100644
index 000000000..2c24653c6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/reftest.list
@@ -0,0 +1,131 @@
+== ruby-text-decoration-01.html ruby-text-decoration-01-ref.html
+== text-decoration-propagation-01.html text-decoration-propagation-01-ref.html
+
+# text-emphasis-style
+== text-emphasis-style-property-001.html text-emphasis-style-property-001-ref.html
+fuzzy-if(gtkWidget,3,4) fuzzy-if(skiaContent,104,80)  == text-emphasis-style-property-002.html text-emphasis-style-property-002-ref.html
+skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-003.html text-emphasis-style-property-003-ref.html
+skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-004.html text-emphasis-style-property-004-ref.html
+== text-emphasis-style-property-005.html text-emphasis-style-property-005-ref.html
+== text-emphasis-style-property-005a.html text-emphasis-style-property-005-ref.html
+# START tests from support/generate-text-emphasis-style-property-010-tests.sh
+== text-emphasis-style-property-010Zs.html text-emphasis-style-property-010-ref.html
+== text-emphasis-style-property-010Zl.html text-emphasis-style-property-010-ref.html
+== text-emphasis-style-property-010Zp.html text-emphasis-style-property-010-ref.html
+== text-emphasis-style-property-010Cc.html text-emphasis-style-property-010-ref.html
+fuzzy-if(skiaContent,1,336) == text-emphasis-style-property-010Cf.html text-emphasis-style-property-010-ref.html
+# END tests from support/generate-text-emphasis-style-property-010-tests.sh
+== text-emphasis-style-property-010Cn.html text-emphasis-style-property-010-ref.html
+# START tests from support/generate-text-emphasis-style-property-tests.py
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-011.html text-emphasis-style-property-011-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-011a.html text-emphasis-style-property-011-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-011b.html text-emphasis-style-property-011-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-012.html text-emphasis-style-property-012-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-012a.html text-emphasis-style-property-012-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-012b.html text-emphasis-style-property-012-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-012c.html text-emphasis-style-property-012-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-013.html text-emphasis-style-property-013-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-013a.html text-emphasis-style-property-013-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-013b.html text-emphasis-style-property-013-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-014.html text-emphasis-style-property-014-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-014a.html text-emphasis-style-property-014-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-014b.html text-emphasis-style-property-014-ref.html
+fuzzy-if(gtkWidget,3,4) skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-015.html text-emphasis-style-property-015-ref.html
+fuzzy-if(gtkWidget,3,4) skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-015a.html text-emphasis-style-property-015-ref.html
+fuzzy-if(gtkWidget,3,4) skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-015b.html text-emphasis-style-property-015-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-016.html text-emphasis-style-property-016-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-016a.html text-emphasis-style-property-016-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-017.html text-emphasis-style-property-017-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-017a.html text-emphasis-style-property-017-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-017b.html text-emphasis-style-property-017-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-018.html text-emphasis-style-property-018-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-018a.html text-emphasis-style-property-018-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-019.html text-emphasis-style-property-019-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-style-property-019a.html text-emphasis-style-property-019-ref.html
+fuzzy-if(gtkWidget,3,4) skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-020.html text-emphasis-style-property-020-ref.html
+fuzzy-if(gtkWidget,3,4) skip-if(/^Windows\x20NT\x205\.1/.test(http.oscpu)) == text-emphasis-style-property-020a.html text-emphasis-style-property-020-ref.html
+# END tests from support/generate-text-emphasis-style-property-tests.py
+
+# text-emphasis-color
+fuzzy-if(gtkWidget,3,4) == text-emphasis-color-property-001.html text-emphasis-color-property-001-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-color-property-001a.html text-emphasis-color-property-001-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-color-property-002.html text-emphasis-color-property-002-ref.html
+
+# text-emphasis
+== text-emphasis-property-001.html text-emphasis-style-property-001-ref.html
+fuzzy-if(gtkWidget,3,4) fuzzy-if(skiaContent,104,80) == text-emphasis-property-002.html text-emphasis-style-property-002-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-property-003.html text-emphasis-style-property-012-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-property-003a.html text-emphasis-style-property-012-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-property-003b.html text-emphasis-style-property-012-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-property-004.html text-emphasis-color-property-002-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-property-004a.html text-emphasis-color-property-002-ref.html
+
+# text-emphasis-position
+# START tests from support/generate-text-emphasis-position-property-tests.py
+fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-001.html text-emphasis-position-property-001-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-001a.html text-emphasis-position-property-001-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-001b.html text-emphasis-position-property-001-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-001c.html text-emphasis-position-property-001-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-002.html text-emphasis-position-property-002-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-002a.html text-emphasis-position-property-002-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-002b.html text-emphasis-position-property-002-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-position-property-002c.html text-emphasis-position-property-002-ref.html
+== text-emphasis-position-property-003.html text-emphasis-position-property-003-ref.html
+== text-emphasis-position-property-003a.html text-emphasis-position-property-003-ref.html
+== text-emphasis-position-property-003b.html text-emphasis-position-property-003-ref.html
+== text-emphasis-position-property-003c.html text-emphasis-position-property-003-ref.html
+== text-emphasis-position-property-003d.html text-emphasis-position-property-003-ref.html
+== text-emphasis-position-property-003e.html text-emphasis-position-property-003-ref.html
+== text-emphasis-position-property-003f.html text-emphasis-position-property-003-ref.html
+== text-emphasis-position-property-003g.html text-emphasis-position-property-003-ref.html
+== text-emphasis-position-property-004.html text-emphasis-position-property-004-ref.html
+== text-emphasis-position-property-004a.html text-emphasis-position-property-004-ref.html
+== text-emphasis-position-property-004b.html text-emphasis-position-property-004-ref.html
+== text-emphasis-position-property-004c.html text-emphasis-position-property-004-ref.html
+== text-emphasis-position-property-004d.html text-emphasis-position-property-004-ref.html
+== text-emphasis-position-property-004e.html text-emphasis-position-property-004-ref.html
+== text-emphasis-position-property-004f.html text-emphasis-position-property-004-ref.html
+== text-emphasis-position-property-004g.html text-emphasis-position-property-004-ref.html
+== text-emphasis-position-property-005.html text-emphasis-position-property-005-ref.html
+== text-emphasis-position-property-005a.html text-emphasis-position-property-005-ref.html
+== text-emphasis-position-property-005b.html text-emphasis-position-property-005-ref.html
+== text-emphasis-position-property-005c.html text-emphasis-position-property-005-ref.html
+== text-emphasis-position-property-005d.html text-emphasis-position-property-005-ref.html
+== text-emphasis-position-property-005e.html text-emphasis-position-property-005-ref.html
+== text-emphasis-position-property-005f.html text-emphasis-position-property-005-ref.html
+== text-emphasis-position-property-005g.html text-emphasis-position-property-005-ref.html
+== text-emphasis-position-property-006.html text-emphasis-position-property-006-ref.html
+== text-emphasis-position-property-006a.html text-emphasis-position-property-006-ref.html
+== text-emphasis-position-property-006b.html text-emphasis-position-property-006-ref.html
+== text-emphasis-position-property-006c.html text-emphasis-position-property-006-ref.html
+== text-emphasis-position-property-006d.html text-emphasis-position-property-006-ref.html
+== text-emphasis-position-property-006e.html text-emphasis-position-property-006-ref.html
+== text-emphasis-position-property-006f.html text-emphasis-position-property-006-ref.html
+== text-emphasis-position-property-006g.html text-emphasis-position-property-006-ref.html
+# END tests from support/generate-text-emphasis-position-property-tests.py
+
+# START tests from support/generate-text-emphasis-ruby-tests.py
+== text-emphasis-ruby-001.html text-emphasis-ruby-001-ref.html
+== text-emphasis-ruby-002.html text-emphasis-ruby-002-ref.html
+== text-emphasis-ruby-003.html text-emphasis-ruby-003-ref.html
+== text-emphasis-ruby-003a.html text-emphasis-ruby-003-ref.html
+== text-emphasis-ruby-004.html text-emphasis-ruby-004-ref.html
+== text-emphasis-ruby-004a.html text-emphasis-ruby-004-ref.html
+# END tests from support/generate-text-emphasis-ruby-tests.py
+
+# text-emphasis line height
+# START tests from support/generate-text-emphasis-line-height-tests.py
+fuzzy-if(gtkWidget,3,4) == text-emphasis-line-height-001a.html text-emphasis-line-height-001-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-line-height-001b.html text-emphasis-line-height-001-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-line-height-002a.html text-emphasis-line-height-002-ref.html
+fuzzy-if(gtkWidget,3,4) == text-emphasis-line-height-002b.html text-emphasis-line-height-002-ref.html
+== text-emphasis-line-height-003a.html text-emphasis-line-height-003-ref.html
+== text-emphasis-line-height-003b.html text-emphasis-line-height-003-ref.html
+== text-emphasis-line-height-003c.html text-emphasis-line-height-003-ref.html
+== text-emphasis-line-height-003d.html text-emphasis-line-height-003-ref.html
+== text-emphasis-line-height-004a.html text-emphasis-line-height-004-ref.html
+== text-emphasis-line-height-004b.html text-emphasis-line-height-004-ref.html
+== text-emphasis-line-height-004c.html text-emphasis-line-height-004-ref.html
+== text-emphasis-line-height-004d.html text-emphasis-line-height-004-ref.html
+# END tests from support/generate-text-emphasis-line-height-tests.py
+fuzzy-if(gtkWidget,3,4) fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),43,1) == text-emphasis-line-height-001z.html text-emphasis-line-height-001-ref.html
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/ruby-text-decoration-01-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/ruby-text-decoration-01-ref.html
new file mode 100644
index 000000000..c1b08d05c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/ruby-text-decoration-01-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: text-decoration on rubies</title>
+  <link rel="author" title="Xidorn Quan" href="http://www.upsuper.org/">
+</head>
+<style type="text/css">
+  ruby { display: ruby; }
+  rb { display: ruby-base; white-space: nowrap; }
+  rt { display: ruby-text; white-space: nowrap; }
+  p { line-height: 3em; }
+  span {
+    text-decoration: underline;
+  }
+</style>
+<body>
+  <p>
+    <ruby><rb><span>慶</span></rb><rt>けい</rt
+         ><rb><span>應</span></rb><rt>おう</rt
+         ><rb><span>義</span></rb><rt>ぎ</rt
+         ><rb><span>塾</span></rb><rt>じゅく</rt
+         ><rb><span>大</span></rb><rt>だい</rt
+         ><rb><span>学</span></rb><rt>がく</rt></ruby>
+  </p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/ruby-text-decoration-01.html b/layout/reftests/w3c-css/submitted/text-decor-3/ruby-text-decoration-01.html
new file mode 100644
index 000000000..943581a92
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/ruby-text-decoration-01.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: text-decoration on rubies</title>
+  <link rel="author" title="Xidorn Quan" href="http://www.upsuper.org/">
+  <link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#line-decoration">
+  <link rel="match" href="ruby-text-decoration-01-ref.html">
+</head>
+<style type="text/css">
+  ruby { display: ruby; }
+  rb { display: ruby-base; white-space: nowrap; }
+  rt { display: ruby-text; white-space: nowrap; }
+  p { line-height: 3em; }
+  p {
+    text-decoration: underline;
+  }
+</style>
+<body>
+  <p>
+    <ruby><rb>慶</rb><rt>けい</rt
+         ><rb>應</rb><rt>おう</rt
+         ><rb>義</rb><rt>ぎ</rt
+         ><rb>塾</rb><rt>じゅく</rt
+         ><rb>大</rb><rt>だい</rt
+         ><rb>学</rb><rt>がく</rt></ruby>
+  </p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-line-height-tests.py b/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-line-height-tests.py
new file mode 100644
index 000000000..7aa975aaa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-line-height-tests.py
@@ -0,0 +1,82 @@
+#!/usr/bin/env python
+# - * - coding: UTF-8 - * -
+
+"""
+This script generates tests text-emphasis-line-height-001 ~ 004 except
+001z. They test the line height expansion in different directions. This
+script outputs a list of all tests it generated in the format of Mozilla
+reftest.list to the stdout.
+"""
+
+from __future__ import unicode_literals
+
+TEST_FILE = 'text-emphasis-line-height-{:03}{}.html'
+TEST_TEMPLATE = '''<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, {pos}, {wm}, {tag}</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-{index:03}-ref.html">
+<p>Pass if the emphasis marks are {dir} the black line:</p>
+{start}試験テスト{end}
+'''
+
+REF_FILE = 'text-emphasis-line-height-{:03}-ref.html'
+REF_TEMPLATE='''<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis line height, {pos}</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt {{ font-variant-east-asian: inherit; }} </style>
+<p>Pass if the emphasis marks are {dir} the black line:</p>
+<div style="line-height: 1; border-{pos}: 1px solid black; writing-mode: {wm}; ruby-position: {posval}"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
+'''
+
+STYLE1 = 'line-height: 1; border-{pos}: 1px solid black; ' + \
+         'writing-mode: {wm}; text-emphasis-position: {posval};'
+STYLE2 = 'text-emphasis: circle;'
+
+TAGS = [
+    # (tag, start, end)
+    ('div', '<div style="{style1}{style2}">', '</div>'),
+    ('span', '<div style="{style1}"><span style="{style2}">', '</span></div>'),
+    ]
+POSITIONS = [
+    # pos, text-emphasis-position, ruby-position,
+    #   writing-modes, dir text
+    ('top', 'over right', 'over',
+        ['horizontal-tb'], 'below'),
+    ('bottom', 'under right', 'under',
+        ['horizontal-tb'], 'over'),
+    ('right', 'over right', 'over',
+        ['vertical-rl', 'vertical-lr'], 'to the left of'),
+    ('left', 'over left', 'under',
+        ['vertical-rl', 'vertical-lr'], 'to the right of'),
+    ]
+
+import string
+
+def write_file(filename, content):
+    with open(filename, 'wb') as f:
+        f.write(content.encode('UTF-8'))
+
+print("# START tests from {}".format(__file__))
+idx = 0
+for (pos, emphasis_pos, ruby_pos, wms, dir) in POSITIONS:
+    idx += 1
+    ref_file = REF_FILE.format(idx)
+    content = REF_TEMPLATE.format(pos=pos, dir=dir, wm=wms[0], posval=ruby_pos)
+    write_file(ref_file, content)
+    suffix = iter(string.ascii_lowercase)
+    for wm in wms:
+        style1 = STYLE1.format(pos=pos, wm=wm, posval=emphasis_pos)
+        for (tag, start, end) in TAGS:
+            test_file = TEST_FILE.format(idx, next(suffix))
+            content = TEST_TEMPLATE.format(
+                pos=pos, wm=wm, tag=tag, index=idx, dir=dir,
+                start=start.format(style1=style1, style2=STYLE2), end=end)
+            write_file(test_file, content)
+            print("== {} {}".format(test_file, ref_file))
+print("# END tests from {}".format(__file__))
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-position-property-tests.py b/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-position-property-tests.py
new file mode 100644
index 000000000..94701b57f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-position-property-tests.py
@@ -0,0 +1,79 @@
+#!/usr/bin/env python
+# - * - coding: UTF-8 - * -
+
+"""
+This script generates tests text-emphasis-position-property-001 ~ 006
+which cover all possible values of text-emphasis-position property with
+all combination of three main writing modes and two orientations. Only
+test files are generated by this script. It also outputs a list of all
+tests it generated in the format of Mozilla reftest.list to the stdout.
+"""
+
+from __future__ import unicode_literals
+
+import itertools
+
+TEST_FILE = 'text-emphasis-position-property-{:03}{}.html'
+REF_FILE = 'text-emphasis-position-property-{:03}-ref.html'
+TEST_TEMPLATE = '''<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: {value}, {title}</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: {value}' with 'writing-mode: {wm}' puts emphasis marks {position} the text.">
+<link rel="match" href="text-emphasis-position-property-{index:03}-ref.html">
+<p>Pass if the emphasis marks are {position} the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: {wm}; text-orientation: {orient}; text-emphasis-position: {value}">試験テスト</div>
+'''
+
+SUFFIXES = ['', 'a', 'b', 'c', 'd', 'e', 'f', 'g']
+
+WRITING_MODES = ["horizontal-tb", "vertical-rl", "vertical-lr"]
+POSITION_HORIZONTAL = ["over", "under"]
+POSITION_VERTICAL = ["right", "left"]
+
+REF_MAP_MIXED = { "over": 1, "under": 2, "right": 3, "left": 4 }
+REF_MAP_SIDEWAYS = { "right": 5, "left": 6 }
+POSITION_TEXT = { "over": "over", "under": "under",
+                  "right": "to the right of", "left": "to the left of" }
+
+suffixes = [iter(SUFFIXES) for i in range(6)]
+
+reftest_items = []
+
+def write_file(filename, content):
+    with open(filename, 'wb') as f:
+        f.write(content.encode('UTF-8'))
+
+def write_test_file(idx, suffix, wm, orient, value, position):
+    filename = TEST_FILE.format(idx, suffix)
+    write_file(filename, TEST_TEMPLATE.format(
+        value=value, wm=wm, orient=orient, index=idx, position=position,
+        title=(wm if orient == "mixed" else "{}, {}".format(wm, orient))))
+    reftest_items.append("== {} {}".format(filename, REF_FILE.format(idx)))
+
+def write_test_files(wm, orient, pos1, pos2):
+    idx = (REF_MAP_MIXED if orient == "mixed" else REF_MAP_SIDEWAYS)[pos1]
+    position = POSITION_TEXT[pos1]
+    suffix = suffixes[idx - 1]
+    write_test_file(idx, next(suffix), wm, orient, pos1 + " " + pos2, position)
+    write_test_file(idx, next(suffix), wm, orient, pos2 + " " + pos1, position)
+
+for wm in WRITING_MODES:
+    if wm == "horizontal-tb":
+        effective_pos = POSITION_HORIZONTAL
+        ineffective_pos = POSITION_VERTICAL
+    else:
+        effective_pos = POSITION_VERTICAL
+        ineffective_pos = POSITION_HORIZONTAL
+    for pos1, pos2 in itertools.product(effective_pos, ineffective_pos):
+        write_test_files(wm, "mixed", pos1, pos2)
+        if wm != "horizontal-tb":
+            write_test_files(wm, "sideways", pos1, pos2)
+
+print("# START tests from {}".format(__file__))
+reftest_items.sort()
+for item in reftest_items:
+    print(item)
+print("# END tests from {}".format(__file__))
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-ruby-tests.py b/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-ruby-tests.py
new file mode 100644
index 000000000..bb2f9706a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-ruby-tests.py
@@ -0,0 +1,69 @@
+#!/usr/bin/env python
+# - * - coding: UTF-8 - * -
+
+"""
+This script generates tests text-emphasis-ruby-001 ~ 004 which tests
+emphasis marks with ruby in four directions. It outputs a list of all
+tests it generated in the format of Mozilla reftest.list to the stdout.
+"""
+
+from __future__ import unicode_literals
+
+TEST_FILE = 'text-emphasis-ruby-{:03}{}.html'
+TEST_TEMPLATE = '''<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis and ruby, {wm}, {pos}</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="emphasis marks are drawn outside the ruby">
+<link rel="match" href="text-emphasis-ruby-{index:03}-ref.html">
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: {wm}; ruby-position: {ruby_pos}; text-emphasis-position: {posval}">ルビ<span style="text-emphasis: circle">と<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を</span>同時</div>
+'''
+
+REF_FILE = 'text-emphasis-ruby-{:03}-ref.html'
+REF_TEMPLATE = '''<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis and ruby, {wm}, {pos}</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rtc {{ font-variant-east-asian: inherit; }} </style>
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: {wm}; ruby-position: {posval}">ルビ<ruby>と<rtc>&#x25CF;</rtc>圏<rt>けん</rt><rtc>&#x25CF;</rtc>点<rt>てん</rt><rtc>&#x25CF;</rtc>を<rtc>&#x25CF;</rtc></ruby>同時</div>
+'''
+
+TEST_CASES = [
+        ('top', 'horizontal-tb', 'over', [
+            ('horizontal-tb', 'over right')]),
+        ('bottom', 'horizontal-tb', 'under', [
+            ('horizontal-tb', 'under right')]),
+        ('right', 'vertical-rl', 'over', [
+            ('vertical-rl', 'over right'),
+            ('vertical-lr', 'over right')]),
+        ('left', 'vertical-rl', 'under', [
+            ('vertical-rl', 'over left'),
+            ('vertical-lr', 'over left')]),
+    ]
+
+SUFFIXES = ['', 'a']
+
+def write_file(filename, content):
+    with open(filename, 'wb') as f:
+        f.write(content.encode('UTF-8'))
+
+print("# START tests from {}".format(__file__))
+idx = 0
+for pos, ref_wm, ruby_pos, subtests in TEST_CASES:
+    idx += 1
+    ref_file = REF_FILE.format(idx)
+    ref_content = REF_TEMPLATE.format(pos=pos, wm=ref_wm, posval=ruby_pos)
+    write_file(ref_file, ref_content)
+    suffix = iter(SUFFIXES)
+    for wm, posval in subtests:
+        test_file = TEST_FILE.format(idx, next(suffix))
+        test_content = TEST_TEMPLATE.format(
+            wm=wm, pos=pos, index=idx, ruby_pos=ruby_pos, posval=posval)
+        write_file(test_file, test_content)
+        print("== {} {}".format(test_file, ref_file))
+print("# END tests from {}".format(__file__))
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-style-property-010-tests.sh b/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-style-property-010-tests.sh
new file mode 100644
index 000000000..3e5667429
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-style-property-010-tests.sh
@@ -0,0 +1,81 @@
+#!/usr/bin/env bash
+
+# This script generates tests text-emphasis-style-property-010* except
+# 010Cn. The tests generated cover all characters listed in the unicode
+# data file which should not have emphasis mark specified in the spec.
+# This script downloads UnicodeData.txt from the website of the Unicode
+# Consortium and extract the characters form that file. It requires
+# python (either 2.5+ or 3.x), awk, and wget to work. Only test files
+# are generated by this script. It also outputs a list of all tests it
+# generated in the format of Mozilla reftest.list to the stdout. Other
+# information has been redirected to the stderr.
+
+UNICODE_DATA_FILE='UnicodeData.txt'
+UNICODE_DATA_URL="http://www.unicode.org/Public/8.0.0/ucd/$UNICODE_DATA_FILE"
+UNICODE_DATA_DIGEST='38b17e1118206489a7e0ab5d29d7932212d38838df7d3ec025ecb58e8798ec20'
+
+TEST_FILE='text-emphasis-style-property-010%s.html'
+REF_FILE='text-emphasis-style-property-010-ref.html'
+
+digest_file() {
+    python -c "import hashlib;
+print(hashlib.sha256(open('$1', 'rb').read()).hexdigest())"
+}
+
+check_file() {
+    [[ -f "$UNICODE_DATA_FILE" ]] || return 1
+    digest=`digest_file "$UNICODE_DATA_FILE"`
+    [[ "$digest" == "$UNICODE_DATA_DIGEST" ]] || return 2
+}
+
+download_data() {
+    check_file
+    if [[ $? -eq 2 ]]; then
+        echo "Removing incorrect data file..." >&2
+        rm "$UNICODE_DATA_FILE"
+    fi
+    wget -nc -O"$UNICODE_DATA_FILE" "$UNICODE_DATA_URL" >&2
+
+    check_file
+    if [[ $? -ne 0 ]]; then
+        echo "Failed to get the correct unicode data file!" >&2
+        exit 1
+    fi
+}
+
+list_codepoints() {
+    awk -F';' "\$3 == \"$1\" { print \"    0x\"\$1\",\" }" "$UNICODE_DATA_FILE"
+}
+
+write_test_file() {
+    filename=`printf "$TEST_FILE" $1`
+    echo "== $filename $REF_FILE"
+    cat <<EOF > $filename
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis, $1</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="Emphasis marks should not be rendered for characters in general category $1">
+<link rel="match" href="text-emphasis-style-property-010-ref.html">
+<p>Pass if there is nothing rendered below:</p>
+<div style="color: white; white-space: pre-wrap; text-emphasis: filled circle red">
+<script>
+  var codepoints = [
+`list_codepoints "$1"`
+  ];
+  document.write(codepoints.map(function (code) {
+    return String.fromCodePoint(code);
+  }).join(' '));
+</script>
+</div>
+EOF
+}
+
+download_data
+echo "# START tests from $0"
+for c in Zs Zl Zp Cc Cf; do
+    write_test_file "$c"
+done
+echo "# END tests from $0"
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-style-property-tests.py b/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-style-property-tests.py
new file mode 100644
index 000000000..eb14e83bc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/support/generate-text-emphasis-style-property-tests.py
@@ -0,0 +1,85 @@
+#!/usr/bin/env python
+# - * - coding: UTF-8 - * -
+
+"""
+This script generates tests text-emphasis-style-property-011 ~ 020 which
+cover all possible values of text-emphasis-style property, except none
+and <string>, with horizontal writing mode. It outputs a list of all
+tests it generated in the format of Mozilla reftest.list to the stdout.
+"""
+
+from __future__ import unicode_literals
+
+TEST_FILE = 'text-emphasis-style-property-{:03}{}.html'
+TEST_TEMPLATE = '''<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: {title}</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: {value}' produces {code} as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-{index:03}-ref.html">
+<p>Pass if there is a '{char}' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: {value}">試験テスト</div>
+'''
+
+REF_FILE = 'text-emphasis-style-property-{:03}-ref.html'
+REF_TEMPLATE = '''<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: {0}</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt {{ font-variant-east-asian: inherit; }} </style>
+<p>Pass if there is a '{1}' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>{1}</rt>験<rt>{1}</rt>テ<rt>{1}</rt>ス<rt>{1}</rt>ト<rt>{1}</rt></ruby></div>
+'''
+
+DATA_SET = [
+        ('dot',           0x2022, 0x25e6),
+        ('circle',        0x25cf, 0x25cb),
+        ('double-circle', 0x25c9, 0x25ce),
+        ('triangle',      0x25b2, 0x25b3),
+        ('sesame',        0xfe45, 0xfe46),
+        ]
+
+SUFFIXES = ['', 'a', 'b', 'c', 'd', 'e']
+
+def get_html_entity(code):
+    return '&#x{:04X};'.format(code)
+
+def write_file(filename, content):
+    with open(filename, 'wb') as f:
+        f.write(content.encode('UTF-8'))
+
+def write_test_file(idx, suffix, style, code, name=None):
+    if not name:
+        name = style
+    filename = TEST_FILE.format(idx, suffix)
+    write_file(filename, TEST_TEMPLATE.format(index=idx, value=style,
+                                              char=get_html_entity(code),
+                                              code='U+{:04X}'.format(code),
+                                              title=name))
+    print("== {} {}".format(filename, REF_FILE.format(idx)))
+
+idx = 10
+def write_files(style, code):
+    global idx
+    idx += 1
+    fill, shape = style
+    basic_style = "{} {}".format(fill, shape)
+    write_file(REF_FILE.format(idx),
+               REF_TEMPLATE.format(basic_style, get_html_entity(code)))
+    suffix = iter(SUFFIXES)
+    write_test_file(idx, next(suffix), basic_style, code)
+    write_test_file(idx, next(suffix), "{} {}".format(shape, fill), code)
+    if fill == 'filled':
+        write_test_file(idx, next(suffix), shape, code)
+    if shape == 'circle':
+        write_test_file(idx, next(suffix), fill, code, fill + ', horizontal')
+
+print("# START tests from {}".format(__file__))
+for name, code, _ in DATA_SET:
+    write_files(('filled', name), code)
+for name, _, code in DATA_SET:
+    write_files(('open', name), code)
+print("# END tests from {}".format(__file__))
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-decoration-propagation-01-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-decoration-propagation-01-ref.html
new file mode 100644
index 000000000..fe5b2191c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-decoration-propagation-01-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<span>
+  <svg width="400" height="100">
+    <text x="10" y="30">This text must not be underlined.</text>
+  </svg>
+</span>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-decoration-propagation-01.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-decoration-propagation-01.html
new file mode 100644
index 000000000..45e680d4d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-decoration-propagation-01.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-decoration shouldn't propagate through 'svg' element</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-text-decor-3/#line-decoration">
+<link rel="match" href="text-decoration-propagation-01-ref.html">
+<meta name="assert" content="An outer 'svg' element is an atomic inline-axis element, so text decorations must not propagate through it.">
+<style>
+span { text-decoration: underline; }
+</style>
+<span>
+  <svg width="400" height="100">
+    <text x="10" y="30">This text must not be underlined.</text>
+  </svg>
+</span>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001-ref.html
new file mode 100644
index 000000000..00c87eeb0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-color: currentColor</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if there is a <strong>green</strong> '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; color: green"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001.html
new file mode 100644
index 000000000..2d4676ad7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-color: untouched</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-color-property">
+<meta name="assert" content="The color of emphasis marks should be the same as the text by default">
+<link rel="match" href="text-emphasis-color-property-001-ref.html">
+<p>Pass if there is a <strong>green</strong> '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: filled circle; color: green">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001a.html
new file mode 100644
index 000000000..34c817e68
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-color: initial</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-color-property">
+<meta name="assert" content="The color of emphasis marks should be the same as the text for initial value">
+<link rel="match" href="text-emphasis-color-property-001-ref.html">
+<p>Pass if there is a <strong>green</strong> '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: filled circle; text-emphasis-color: initial; color: green">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001b.html
new file mode 100644
index 000000000..0acb0f768
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-001b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-color: initial from text-emphasis</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-color-property">
+<meta name="assert" content="The color of emphasis marks should be the same as the text by default">
+<link rel="match" href="text-emphasis-color-property-001-ref.html">
+<p>Pass if there is a <strong>green</strong> '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis: filled circle; color: green">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-002-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-002-ref.html
new file mode 100644
index 000000000..2bcc1d6b9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-002-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-color: green</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; color: green; } </style>
+<p>Pass if there is a <strong>green</strong> '&#x25CF;' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-002.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-002.html
new file mode 100644
index 000000000..a215267eb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-color-property-002.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-color: green</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-color-property">
+<meta name="assert" content="Emphasis marks should be rendered with color specified by text-emphasis-color.">
+<link rel="match" href="text-emphasis-color-property-002-ref.html">
+<p>Pass if there is a <strong>green</strong> '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: filled circle; text-emphasis-color: green">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001-ref.html
new file mode 100644
index 000000000..682acb715
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis line height, top</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are below the black line:</p>
+<div style="line-height: 1; border-top: 1px solid black; writing-mode: horizontal-tb; ruby-position: over"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001a.html
new file mode 100644
index 000000000..933d4a427
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, top, horizontal-tb, div</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-001-ref.html">
+<p>Pass if the emphasis marks are below the black line:</p>
+<div style="line-height: 1; border-top: 1px solid black; writing-mode: horizontal-tb; text-emphasis-position: over right;text-emphasis: circle;">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001b.html
new file mode 100644
index 000000000..58bf9821d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, top, horizontal-tb, span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-001-ref.html">
+<p>Pass if the emphasis marks are below the black line:</p>
+<div style="line-height: 1; border-top: 1px solid black; writing-mode: horizontal-tb; text-emphasis-position: over right;"><span style="text-emphasis: circle;">試験テスト</span></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001z.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001z.html
new file mode 100644
index 000000000..ae6dfb588
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-001z.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, top, textarea</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-001-ref.html">
+<style>
+textarea {
+  all: inherit;
+  width: 100%;
+  box-sizing: border-box;
+  border: 0 none; margin: 0; padding: 0;
+}
+</style>
+<p>Pass if the emphasis marks are below the black line:</p>
+<textarea style="line-height: 1; border-top: 1px solid black; text-emphasis: circle;">試験テスト</textarea>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-002-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-002-ref.html
new file mode 100644
index 000000000..345b1c146
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-002-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis line height, bottom</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are over the black line:</p>
+<div style="line-height: 1; border-bottom: 1px solid black; writing-mode: horizontal-tb; ruby-position: under"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-002a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-002a.html
new file mode 100644
index 000000000..eebe40d1f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-002a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, bottom, horizontal-tb, div</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-002-ref.html">
+<p>Pass if the emphasis marks are over the black line:</p>
+<div style="line-height: 1; border-bottom: 1px solid black; writing-mode: horizontal-tb; text-emphasis-position: under right;text-emphasis: circle;">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-002b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-002b.html
new file mode 100644
index 000000000..9f65d5f07
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-002b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, bottom, horizontal-tb, span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-002-ref.html">
+<p>Pass if the emphasis marks are over the black line:</p>
+<div style="line-height: 1; border-bottom: 1px solid black; writing-mode: horizontal-tb; text-emphasis-position: under right;"><span style="text-emphasis: circle;">試験テスト</span></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003-ref.html
new file mode 100644
index 000000000..a177e9b98
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis line height, right</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are to the left of the black line:</p>
+<div style="line-height: 1; border-right: 1px solid black; writing-mode: vertical-rl; ruby-position: over"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003a.html
new file mode 100644
index 000000000..4e60e5ad0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, right, vertical-rl, div</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-003-ref.html">
+<p>Pass if the emphasis marks are to the left of the black line:</p>
+<div style="line-height: 1; border-right: 1px solid black; writing-mode: vertical-rl; text-emphasis-position: over right;text-emphasis: circle;">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003b.html
new file mode 100644
index 000000000..01450b1e6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, right, vertical-rl, span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-003-ref.html">
+<p>Pass if the emphasis marks are to the left of the black line:</p>
+<div style="line-height: 1; border-right: 1px solid black; writing-mode: vertical-rl; text-emphasis-position: over right;"><span style="text-emphasis: circle;">試験テスト</span></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003c.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003c.html
new file mode 100644
index 000000000..fde86c7fd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003c.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, right, vertical-lr, div</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-003-ref.html">
+<p>Pass if the emphasis marks are to the left of the black line:</p>
+<div style="line-height: 1; border-right: 1px solid black; writing-mode: vertical-lr; text-emphasis-position: over right;text-emphasis: circle;">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003d.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003d.html
new file mode 100644
index 000000000..78a3b1ea0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-003d.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, right, vertical-lr, span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-003-ref.html">
+<p>Pass if the emphasis marks are to the left of the black line:</p>
+<div style="line-height: 1; border-right: 1px solid black; writing-mode: vertical-lr; text-emphasis-position: over right;"><span style="text-emphasis: circle;">試験テスト</span></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004-ref.html
new file mode 100644
index 000000000..e2a6a8c83
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis line height, left</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are to the right of the black line:</p>
+<div style="line-height: 1; border-left: 1px solid black; writing-mode: vertical-rl; ruby-position: under"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004a.html
new file mode 100644
index 000000000..0111f238c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, left, vertical-rl, div</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-004-ref.html">
+<p>Pass if the emphasis marks are to the right of the black line:</p>
+<div style="line-height: 1; border-left: 1px solid black; writing-mode: vertical-rl; text-emphasis-position: over left;text-emphasis: circle;">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004b.html
new file mode 100644
index 000000000..fbe45c04a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, left, vertical-rl, span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-004-ref.html">
+<p>Pass if the emphasis marks are to the right of the black line:</p>
+<div style="line-height: 1; border-left: 1px solid black; writing-mode: vertical-rl; text-emphasis-position: over left;"><span style="text-emphasis: circle;">試験テスト</span></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004c.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004c.html
new file mode 100644
index 000000000..fa6786771
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004c.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, left, vertical-lr, div</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-004-ref.html">
+<p>Pass if the emphasis marks are to the right of the black line:</p>
+<div style="line-height: 1; border-left: 1px solid black; writing-mode: vertical-lr; text-emphasis-position: over left;text-emphasis: circle;">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004d.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004d.html
new file mode 100644
index 000000000..2f5e0d404
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-line-height-004d.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis line height, left, vertical-lr, span</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="text emphasis marks should expand the line height like ruby if necessary">
+<link rel="match" href="text-emphasis-line-height-004-ref.html">
+<p>Pass if the emphasis marks are to the right of the black line:</p>
+<div style="line-height: 1; border-left: 1px solid black; writing-mode: vertical-lr; text-emphasis-position: over left;"><span style="text-emphasis: circle;">試験テスト</span></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001-ref.html
new file mode 100644
index 000000000..a401c67be
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-position: over</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are over the text below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001.html
new file mode 100644
index 000000000..feef0532c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: over right, horizontal-tb</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: over right' with 'writing-mode: horizontal-tb' puts emphasis marks over the text.">
+<link rel="match" href="text-emphasis-position-property-001-ref.html">
+<p>Pass if the emphasis marks are over the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: horizontal-tb; text-orientation: mixed; text-emphasis-position: over right">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001a.html
new file mode 100644
index 000000000..731a04e11
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: right over, horizontal-tb</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: right over' with 'writing-mode: horizontal-tb' puts emphasis marks over the text.">
+<link rel="match" href="text-emphasis-position-property-001-ref.html">
+<p>Pass if the emphasis marks are over the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: horizontal-tb; text-orientation: mixed; text-emphasis-position: right over">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001b.html
new file mode 100644
index 000000000..36b8e455e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: over left, horizontal-tb</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: over left' with 'writing-mode: horizontal-tb' puts emphasis marks over the text.">
+<link rel="match" href="text-emphasis-position-property-001-ref.html">
+<p>Pass if the emphasis marks are over the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: horizontal-tb; text-orientation: mixed; text-emphasis-position: over left">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001c.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001c.html
new file mode 100644
index 000000000..81cf7fd7c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-001c.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: left over, horizontal-tb</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: left over' with 'writing-mode: horizontal-tb' puts emphasis marks over the text.">
+<link rel="match" href="text-emphasis-position-property-001-ref.html">
+<p>Pass if the emphasis marks are over the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: horizontal-tb; text-orientation: mixed; text-emphasis-position: left over">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002-ref.html
new file mode 100644
index 000000000..466594947
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-position: under</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are under the text below:</p>
+<div style="line-height: 5; ruby-position: under"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002.html
new file mode 100644
index 000000000..034a41ac8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: under right, horizontal-tb</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: under right' with 'writing-mode: horizontal-tb' puts emphasis marks under the text.">
+<link rel="match" href="text-emphasis-position-property-002-ref.html">
+<p>Pass if the emphasis marks are under the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: horizontal-tb; text-orientation: mixed; text-emphasis-position: under right">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002a.html
new file mode 100644
index 000000000..4aae003b7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: right under, horizontal-tb</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: right under' with 'writing-mode: horizontal-tb' puts emphasis marks under the text.">
+<link rel="match" href="text-emphasis-position-property-002-ref.html">
+<p>Pass if the emphasis marks are under the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: horizontal-tb; text-orientation: mixed; text-emphasis-position: right under">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002b.html
new file mode 100644
index 000000000..3ae17dcab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: under left, horizontal-tb</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: under left' with 'writing-mode: horizontal-tb' puts emphasis marks under the text.">
+<link rel="match" href="text-emphasis-position-property-002-ref.html">
+<p>Pass if the emphasis marks are under the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: horizontal-tb; text-orientation: mixed; text-emphasis-position: under left">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002c.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002c.html
new file mode 100644
index 000000000..e67fce566
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-002c.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: left under, horizontal-tb</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: left under' with 'writing-mode: horizontal-tb' puts emphasis marks under the text.">
+<link rel="match" href="text-emphasis-position-property-002-ref.html">
+<p>Pass if the emphasis marks are under the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: horizontal-tb; text-orientation: mixed; text-emphasis-position: left under">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003-ref.html
new file mode 100644
index 000000000..770fa1e8f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-position: right</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; writing-mode: vertical-rl; ruby-position: over"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003.html
new file mode 100644
index 000000000..b8fcd3d8d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: right over, vertical-rl</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: right over' with 'writing-mode: vertical-rl' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-003-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: mixed; text-emphasis-position: right over">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003a.html
new file mode 100644
index 000000000..ded96690c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: over right, vertical-rl</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: over right' with 'writing-mode: vertical-rl' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-003-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: mixed; text-emphasis-position: over right">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003b.html
new file mode 100644
index 000000000..25e69eb1d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: right under, vertical-rl</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: right under' with 'writing-mode: vertical-rl' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-003-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: mixed; text-emphasis-position: right under">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003c.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003c.html
new file mode 100644
index 000000000..0cf05a3d4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003c.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: under right, vertical-rl</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: under right' with 'writing-mode: vertical-rl' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-003-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: mixed; text-emphasis-position: under right">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003d.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003d.html
new file mode 100644
index 000000000..648721919
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003d.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: right over, vertical-lr</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: right over' with 'writing-mode: vertical-lr' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-003-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: mixed; text-emphasis-position: right over">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003e.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003e.html
new file mode 100644
index 000000000..b2dc58b2d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003e.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: over right, vertical-lr</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: over right' with 'writing-mode: vertical-lr' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-003-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: mixed; text-emphasis-position: over right">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003f.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003f.html
new file mode 100644
index 000000000..ad2613bda
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003f.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: right under, vertical-lr</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: right under' with 'writing-mode: vertical-lr' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-003-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: mixed; text-emphasis-position: right under">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003g.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003g.html
new file mode 100644
index 000000000..c2cc3d6a8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-003g.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: under right, vertical-lr</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: under right' with 'writing-mode: vertical-lr' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-003-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: mixed; text-emphasis-position: under right">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004-ref.html
new file mode 100644
index 000000000..1e56f5877
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-position: left</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; writing-mode: vertical-rl; ruby-position: under"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004.html
new file mode 100644
index 000000000..10a42ce81
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: left over, vertical-rl</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: left over' with 'writing-mode: vertical-rl' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-004-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: mixed; text-emphasis-position: left over">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004a.html
new file mode 100644
index 000000000..e1fc0a727
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: over left, vertical-rl</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: over left' with 'writing-mode: vertical-rl' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-004-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: mixed; text-emphasis-position: over left">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004b.html
new file mode 100644
index 000000000..2deb2e66a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: left under, vertical-rl</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: left under' with 'writing-mode: vertical-rl' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-004-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: mixed; text-emphasis-position: left under">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004c.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004c.html
new file mode 100644
index 000000000..45b14882d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004c.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: under left, vertical-rl</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: under left' with 'writing-mode: vertical-rl' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-004-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: mixed; text-emphasis-position: under left">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004d.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004d.html
new file mode 100644
index 000000000..2c0dd0234
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004d.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: left over, vertical-lr</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: left over' with 'writing-mode: vertical-lr' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-004-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: mixed; text-emphasis-position: left over">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004e.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004e.html
new file mode 100644
index 000000000..4b17e87c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004e.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: over left, vertical-lr</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: over left' with 'writing-mode: vertical-lr' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-004-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: mixed; text-emphasis-position: over left">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004f.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004f.html
new file mode 100644
index 000000000..1e7b48b56
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004f.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: left under, vertical-lr</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: left under' with 'writing-mode: vertical-lr' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-004-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: mixed; text-emphasis-position: left under">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004g.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004g.html
new file mode 100644
index 000000000..02860e4fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-004g.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: under left, vertical-lr</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: under left' with 'writing-mode: vertical-lr' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-004-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: mixed; text-emphasis-position: under left">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005-ref.html
new file mode 100644
index 000000000..7427dec9d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-position: right, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; writing-mode: vertical-rl; text-orientation: sideways; ruby-position: over"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005.html
new file mode 100644
index 000000000..2eaca9cf0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: right over, vertical-rl, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: right over' with 'writing-mode: vertical-rl' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-005-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: sideways; text-emphasis-position: right over">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005a.html
new file mode 100644
index 000000000..1061e936f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: over right, vertical-rl, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: over right' with 'writing-mode: vertical-rl' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-005-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: sideways; text-emphasis-position: over right">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005b.html
new file mode 100644
index 000000000..f535eb2bc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: right under, vertical-rl, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: right under' with 'writing-mode: vertical-rl' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-005-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: sideways; text-emphasis-position: right under">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005c.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005c.html
new file mode 100644
index 000000000..111804711
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005c.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: under right, vertical-rl, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: under right' with 'writing-mode: vertical-rl' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-005-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: sideways; text-emphasis-position: under right">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005d.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005d.html
new file mode 100644
index 000000000..390446cdf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005d.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: right over, vertical-lr, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: right over' with 'writing-mode: vertical-lr' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-005-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: sideways; text-emphasis-position: right over">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005e.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005e.html
new file mode 100644
index 000000000..6f65274d0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005e.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: over right, vertical-lr, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: over right' with 'writing-mode: vertical-lr' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-005-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: sideways; text-emphasis-position: over right">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005f.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005f.html
new file mode 100644
index 000000000..ecec98122
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005f.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: right under, vertical-lr, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: right under' with 'writing-mode: vertical-lr' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-005-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: sideways; text-emphasis-position: right under">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005g.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005g.html
new file mode 100644
index 000000000..81b220bff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-005g.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: under right, vertical-lr, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: under right' with 'writing-mode: vertical-lr' puts emphasis marks to the right of the text.">
+<link rel="match" href="text-emphasis-position-property-005-ref.html">
+<p>Pass if the emphasis marks are to the right of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: sideways; text-emphasis-position: under right">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006-ref.html
new file mode 100644
index 000000000..85af6c250
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-position: left, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; writing-mode: vertical-rl; text-orientation: sideways; ruby-position: under"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006.html
new file mode 100644
index 000000000..8933513b7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: left over, vertical-rl, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: left over' with 'writing-mode: vertical-rl' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-006-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: sideways; text-emphasis-position: left over">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006a.html
new file mode 100644
index 000000000..5aa8067f5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: over left, vertical-rl, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: over left' with 'writing-mode: vertical-rl' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-006-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: sideways; text-emphasis-position: over left">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006b.html
new file mode 100644
index 000000000..6d98ea15f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: left under, vertical-rl, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: left under' with 'writing-mode: vertical-rl' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-006-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: sideways; text-emphasis-position: left under">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006c.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006c.html
new file mode 100644
index 000000000..1d1acd964
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006c.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: under left, vertical-rl, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: under left' with 'writing-mode: vertical-rl' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-006-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-rl; text-orientation: sideways; text-emphasis-position: under left">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006d.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006d.html
new file mode 100644
index 000000000..575f07d5f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006d.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: left over, vertical-lr, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: left over' with 'writing-mode: vertical-lr' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-006-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: sideways; text-emphasis-position: left over">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006e.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006e.html
new file mode 100644
index 000000000..d03a66cc2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006e.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: over left, vertical-lr, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: over left' with 'writing-mode: vertical-lr' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-006-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: sideways; text-emphasis-position: over left">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006f.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006f.html
new file mode 100644
index 000000000..955a5e212
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006f.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: left under, vertical-lr, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: left under' with 'writing-mode: vertical-lr' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-006-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: sideways; text-emphasis-position: left under">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006g.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006g.html
new file mode 100644
index 000000000..9f21cc5c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-position-property-006g.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-position: under left, vertical-lr, sideways</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="'text-emphasis-position: under left' with 'writing-mode: vertical-lr' puts emphasis marks to the left of the text.">
+<link rel="match" href="text-emphasis-position-property-006-ref.html">
+<p>Pass if the emphasis marks are to the left of the text below:</p>
+<div style="line-height: 5; text-emphasis: circle; writing-mode: vertical-lr; text-orientation: sideways; text-emphasis-position: under left">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-001.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-001.html
new file mode 100644
index 000000000..f45e2add8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-001.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis: none</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property">
+<meta name="assert" content="text-emphasis: none does not produce any emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-001-ref.html">
+<p>Pass if there is NO emphasis marks above the text below:</p>
+<div style="line-height: 5; text-emphasis: none">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-002.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-002.html
new file mode 100644
index 000000000..0083d3e7a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-002.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis: string</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property">
+<meta name="assert" content="'text-emphasis: string' uses the given string as emphasis marks">
+<link rel="match" href="text-emphasis-style-property-002-ref.html">
+<p>Pass if there is a '^' above every character below:</p>
+<div style="line-height: 5; text-emphasis: '^'">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-003.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-003.html
new file mode 100644
index 000000000..fc35010e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-003.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis: circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property">
+<meta name="assert" content="'text-emphasis: circle' produces U+25CF as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-012-ref.html">
+<p>Pass if there is a '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis: circle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-003a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-003a.html
new file mode 100644
index 000000000..e70518b06
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-003a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis: filled</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property">
+<meta name="assert" content="'text-emphasis: filled' produces U+25CF as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-012-ref.html">
+<p>Pass if there is a '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis: filled">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-003b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-003b.html
new file mode 100644
index 000000000..79e66bc93
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-003b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis: filled circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property">
+<meta name="assert" content="'text-emphasis: filled circle' produces U+25CF as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-012-ref.html">
+<p>Pass if there is a '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis: filled circle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-004.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-004.html
new file mode 100644
index 000000000..15d2ab001
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-004.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis: circle green</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property">
+<meta name="assert" content="Emphasis marks should be rendered with color specified by text-emphasis.">
+<link rel="match" href="text-emphasis-color-property-002-ref.html">
+<p>Pass if there is a <strong>green</strong> '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis: circle green">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-004a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-004a.html
new file mode 100644
index 000000000..6d0d80d29
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-property-004a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis: green circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property">
+<meta name="assert" content="Emphasis marks should be rendered with color specified by text-emphasis.">
+<link rel="match" href="text-emphasis-color-property-002-ref.html">
+<p>Pass if there is a <strong>green</strong> '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis: green circle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-001-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-001-ref.html
new file mode 100644
index 000000000..e48967f9f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-001-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis and ruby, horizontal-tb, top</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rtc { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: horizontal-tb; ruby-position: over">ルビ<ruby>と<rtc>&#x25CF;</rtc>圏<rt>けん</rt><rtc>&#x25CF;</rtc>点<rt>てん</rt><rtc>&#x25CF;</rtc>を<rtc>&#x25CF;</rtc></ruby>同時</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-001.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-001.html
new file mode 100644
index 000000000..61c47aa0b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-001.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis and ruby, horizontal-tb, top</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="emphasis marks are drawn outside the ruby">
+<link rel="match" href="text-emphasis-ruby-001-ref.html">
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: horizontal-tb; ruby-position: over; text-emphasis-position: over right">ルビ<span style="text-emphasis: circle">と<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を</span>同時</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-002-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-002-ref.html
new file mode 100644
index 000000000..ca2c0cc6f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-002-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis and ruby, horizontal-tb, bottom</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rtc { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: horizontal-tb; ruby-position: under">ルビ<ruby>と<rtc>&#x25CF;</rtc>圏<rt>けん</rt><rtc>&#x25CF;</rtc>点<rt>てん</rt><rtc>&#x25CF;</rtc>を<rtc>&#x25CF;</rtc></ruby>同時</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-002.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-002.html
new file mode 100644
index 000000000..47fcfe19f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-002.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis and ruby, horizontal-tb, bottom</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="emphasis marks are drawn outside the ruby">
+<link rel="match" href="text-emphasis-ruby-002-ref.html">
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: horizontal-tb; ruby-position: under; text-emphasis-position: under right">ルビ<span style="text-emphasis: circle">と<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を</span>同時</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-003-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-003-ref.html
new file mode 100644
index 000000000..182037b0d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-003-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis and ruby, vertical-rl, right</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rtc { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: vertical-rl; ruby-position: over">ルビ<ruby>と<rtc>&#x25CF;</rtc>圏<rt>けん</rt><rtc>&#x25CF;</rtc>点<rt>てん</rt><rtc>&#x25CF;</rtc>を<rtc>&#x25CF;</rtc></ruby>同時</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-003.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-003.html
new file mode 100644
index 000000000..f3cff064f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-003.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis and ruby, vertical-rl, right</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="emphasis marks are drawn outside the ruby">
+<link rel="match" href="text-emphasis-ruby-003-ref.html">
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: vertical-rl; ruby-position: over; text-emphasis-position: over right">ルビ<span style="text-emphasis: circle">と<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を</span>同時</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-003a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-003a.html
new file mode 100644
index 000000000..8dbb5a0a4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-003a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis and ruby, vertical-lr, right</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="emphasis marks are drawn outside the ruby">
+<link rel="match" href="text-emphasis-ruby-003-ref.html">
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: vertical-lr; ruby-position: over; text-emphasis-position: over right">ルビ<span style="text-emphasis: circle">と<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を</span>同時</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-004-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-004-ref.html
new file mode 100644
index 000000000..44bcba492
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-004-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis and ruby, vertical-rl, left</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rtc { font-variant-east-asian: inherit; } </style>
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: vertical-rl; ruby-position: under">ルビ<ruby>と<rtc>&#x25CF;</rtc>圏<rt>けん</rt><rtc>&#x25CF;</rtc>点<rt>てん</rt><rtc>&#x25CF;</rtc>を<rtc>&#x25CF;</rtc></ruby>同時</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-004.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-004.html
new file mode 100644
index 000000000..f95fd809a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-004.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis and ruby, vertical-rl, left</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="emphasis marks are drawn outside the ruby">
+<link rel="match" href="text-emphasis-ruby-004-ref.html">
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: vertical-rl; ruby-position: under; text-emphasis-position: over left">ルビ<span style="text-emphasis: circle">と<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を</span>同時</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-004a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-004a.html
new file mode 100644
index 000000000..cf0ba4c4a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-ruby-004a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis and ruby, vertical-lr, left</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-position-property">
+<meta name="assert" content="emphasis marks are drawn outside the ruby">
+<link rel="match" href="text-emphasis-ruby-004-ref.html">
+<p>Pass if the emphasis marks are outside the ruby:</p>
+<div style="line-height: 5; writing-mode: vertical-lr; ruby-position: under; text-emphasis-position: over left">ルビ<span style="text-emphasis: circle">と<ruby>圏<rt>けん</rt>点<rt>てん</rt></ruby>を</span>同時</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-001-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-001-ref.html
new file mode 100644
index 000000000..60f8fa7b9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-001-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: none</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<p>Pass if there is NO emphasis marks above the text below:</p>
+<div style="line-height: 5;">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-001.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-001.html
new file mode 100644
index 000000000..910293b44
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-001.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: none</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="text-emphasis-style: none does not produce any emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-001-ref.html">
+<p>Pass if there is NO emphasis marks above the text below:</p>
+<div style="line-height: 5; text-emphasis-style: none">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-002-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-002-ref.html
new file mode 100644
index 000000000..e9cf74415
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-002-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: string</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: normal; } </style>
+<p>Pass if there is a '^' above every character below:</p>
+<div style="line-height: 5"><ruby>試<rt>^</rt>験<rt>^</rt>テ<rt>^</rt>ス<rt>^</rt>ト<rt>^</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-002.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-002.html
new file mode 100644
index 000000000..dc0496653
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-002.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: string</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: string' uses the given string as emphasis marks">
+<link rel="match" href="text-emphasis-style-property-002-ref.html">
+<p>Pass if there is a '^' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: '^'">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-003-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-003-ref.html
new file mode 100644
index 000000000..d9c29d749
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-003-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>

+<meta charset="utf-8">

+<title>CSS Reference: text-emphasis-style: filled sesame, vertical</title>

+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">

+<link rel="author" title="Mozilla" href="https://www.mozilla.org">

+<style> rt { font-variant-east-asian: normal; } </style>

+<p>Pass if there is a '&#xFE45;' to the right of every character below:</p>

+<div style="writing-mode: vertical-rl; line-height: 5;"><ruby>試<rt>&#xFE45;</rt>験<rt>&#xFE45;</rt>テ<rt>&#xFE45;</rt>ス<rt>&#xFE45;</rt>ト<rt>&#xFE45;</rt></ruby></div>

diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-003.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-003.html
new file mode 100644
index 000000000..b2af7448f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-003.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: filled, vertical</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: filled' produces U+FE45 as emphasis marks in vertical writing modes.">
+<link rel="match" href="text-emphasis-style-property-003-ref.html">
+<p>Pass if there is a '&#xFE45;' to the right of every character below:</p>
+<div style="writing-mode: vertical-rl; line-height: 5; text-emphasis-style: filled">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-004-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-004-ref.html
new file mode 100644
index 000000000..a1065f419
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-004-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>

+<meta charset="utf-8">

+<title>CSS Reference: text-emphasis-style: open sesame, vertical</title>

+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">

+<link rel="author" title="Mozilla" href="https://www.mozilla.org">

+<style> rt { font-variant-east-asian: normal; } </style>

+<p>Pass if there is a '&#xFE46;' to the right of every character below:</p>

+<div style="writing-mode: vertical-rl; line-height: 5;"><ruby>試<rt>&#xFE46;</rt>験<rt>&#xFE46;</rt>テ<rt>&#xFE46;</rt>ス<rt>&#xFE46;</rt>ト<rt>&#xFE46;</rt></ruby></div>

diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-004.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-004.html
new file mode 100644
index 000000000..60c718653
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-004.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>

+<meta charset="utf-8">

+<title>CSS Test: text-emphasis-style: open, vertical</title>

+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">

+<link rel="author" title="Mozilla" href="https://www.mozilla.org">

+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">

+<meta name="assert" content="'text-emphasis: open sesame' produces U+FE46 as emphasis marks.">

+<link rel="match" href="text-emphasis-style-property-004-ref.html">

+<p>Pass if there is a '&#xFE46;' to the right of every character below:</p>

+<div style="writing-mode: vertical-rl; line-height: 5; text-emphasis-style: open">試験テスト</div>

diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-005-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-005-ref.html
new file mode 100644
index 000000000..b65490267
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-005-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style, vertical</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: normal; text-orientation: upright; } </style>
+<p>Pass if the emphasis marks 'V' are upright:</p>
+<div style="writing-mode: vertical-rl; line-height: 5;"><ruby>試<rt>V</rt>験<rt>V</rt>テ<rt>V</rt>ス<rt>V</rt>ト<rt>V</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-005.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-005.html
new file mode 100644
index 000000000..29be3abda
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-005.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style, vertical-rl</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="Emphasis marks must remain upright in vertical writing modes">
+<link rel="match" href="text-emphasis-style-property-005-ref.html">
+<p>Pass if the emphasis marks 'V' are upright:</p>
+<div style="writing-mode: vertical-rl; line-height: 5; text-emphasis-style: 'V'">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-005a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-005a.html
new file mode 100644
index 000000000..af0ad4e0a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-005a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style, vertical-lr</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="Emphasis marks must remain upright in vertical writing modes">
+<link rel="match" href="text-emphasis-style-property-005-ref.html">
+<p>Pass if the emphasis marks 'V' are upright:</p>
+<div style="writing-mode: vertical-lr; line-height: 5; text-emphasis-style: 'V'">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010-ref.html
new file mode 100644
index 000000000..93028d6e7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis on characters without emphasis mark</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<p>Pass if there is nothing rendered below:</p>
+<div></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Cc.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Cc.html
new file mode 100644
index 000000000..78ded1ca2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Cc.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis, Cc</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="Emphasis marks should not be rendered for characters in general category Cc">
+<link rel="match" href="text-emphasis-style-property-010-ref.html">
+<p>Pass if there is nothing rendered below:</p>
+<div style="color: white; white-space: pre-wrap; text-emphasis: filled circle red">
+<script>
+  var codepoints = [
+    0x0000,
+    0x0001,
+    0x0002,
+    0x0003,
+    0x0004,
+    0x0005,
+    0x0006,
+    0x0007,
+    0x0008,
+    0x0009,
+    0x000A,
+    0x000B,
+    0x000C,
+    0x000D,
+    0x000E,
+    0x000F,
+    0x0010,
+    0x0011,
+    0x0012,
+    0x0013,
+    0x0014,
+    0x0015,
+    0x0016,
+    0x0017,
+    0x0018,
+    0x0019,
+    0x001A,
+    0x001B,
+    0x001C,
+    0x001D,
+    0x001E,
+    0x001F,
+    0x007F,
+    0x0080,
+    0x0081,
+    0x0082,
+    0x0083,
+    0x0084,
+    0x0085,
+    0x0086,
+    0x0087,
+    0x0088,
+    0x0089,
+    0x008A,
+    0x008B,
+    0x008C,
+    0x008D,
+    0x008E,
+    0x008F,
+    0x0090,
+    0x0091,
+    0x0092,
+    0x0093,
+    0x0094,
+    0x0095,
+    0x0096,
+    0x0097,
+    0x0098,
+    0x0099,
+    0x009A,
+    0x009B,
+    0x009C,
+    0x009D,
+    0x009E,
+    0x009F,
+  ];
+  document.write(codepoints.map(function (code) {
+    return String.fromCodePoint(code);
+  }).join(' '));
+</script>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Cf.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Cf.html
new file mode 100644
index 000000000..012ef3785
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Cf.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis, Cf</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="Emphasis marks should not be rendered for characters in general category Cf">
+<link rel="match" href="text-emphasis-style-property-010-ref.html">
+<p>Pass if there is nothing rendered below:</p>
+<div style="color: white; white-space: pre-wrap; text-emphasis: filled circle red">
+<script>
+  var codepoints = [
+    0x00AD,
+    0x0600,
+    0x0601,
+    0x0602,
+    0x0603,
+    0x0604,
+    0x0605,
+    0x061C,
+    0x06DD,
+    0x070F,
+    0x180E,
+    0x200B,
+    0x200C,
+    0x200D,
+    0x200E,
+    0x200F,
+    0x202A,
+    0x202B,
+    0x202C,
+    0x202D,
+    0x202E,
+    0x2060,
+    0x2061,
+    0x2062,
+    0x2063,
+    0x2064,
+    0x2066,
+    0x2067,
+    0x2068,
+    0x2069,
+    0x206A,
+    0x206B,
+    0x206C,
+    0x206D,
+    0x206E,
+    0x206F,
+    0xFEFF,
+    0xFFF9,
+    0xFFFA,
+    0xFFFB,
+    0x110BD,
+    0x1BCA0,
+    0x1BCA1,
+    0x1BCA2,
+    0x1BCA3,
+    0x1D173,
+    0x1D174,
+    0x1D175,
+    0x1D176,
+    0x1D177,
+    0x1D178,
+    0x1D179,
+    0x1D17A,
+    0xE0001,
+    0xE0020,
+    0xE0021,
+    0xE0022,
+    0xE0023,
+    0xE0024,
+    0xE0025,
+    0xE0026,
+    0xE0027,
+    0xE0028,
+    0xE0029,
+    0xE002A,
+    0xE002B,
+    0xE002C,
+    0xE002D,
+    0xE002E,
+    0xE002F,
+    0xE0030,
+    0xE0031,
+    0xE0032,
+    0xE0033,
+    0xE0034,
+    0xE0035,
+    0xE0036,
+    0xE0037,
+    0xE0038,
+    0xE0039,
+    0xE003A,
+    0xE003B,
+    0xE003C,
+    0xE003D,
+    0xE003E,
+    0xE003F,
+    0xE0040,
+    0xE0041,
+    0xE0042,
+    0xE0043,
+    0xE0044,
+    0xE0045,
+    0xE0046,
+    0xE0047,
+    0xE0048,
+    0xE0049,
+    0xE004A,
+    0xE004B,
+    0xE004C,
+    0xE004D,
+    0xE004E,
+    0xE004F,
+    0xE0050,
+    0xE0051,
+    0xE0052,
+    0xE0053,
+    0xE0054,
+    0xE0055,
+    0xE0056,
+    0xE0057,
+    0xE0058,
+    0xE0059,
+    0xE005A,
+    0xE005B,
+    0xE005C,
+    0xE005D,
+    0xE005E,
+    0xE005F,
+    0xE0060,
+    0xE0061,
+    0xE0062,
+    0xE0063,
+    0xE0064,
+    0xE0065,
+    0xE0066,
+    0xE0067,
+    0xE0068,
+    0xE0069,
+    0xE006A,
+    0xE006B,
+    0xE006C,
+    0xE006D,
+    0xE006E,
+    0xE006F,
+    0xE0070,
+    0xE0071,
+    0xE0072,
+    0xE0073,
+    0xE0074,
+    0xE0075,
+    0xE0076,
+    0xE0077,
+    0xE0078,
+    0xE0079,
+    0xE007A,
+    0xE007B,
+    0xE007C,
+    0xE007D,
+    0xE007E,
+    0xE007F,
+  ];
+  document.write(codepoints.map(function (code) {
+    return String.fromCodePoint(code);
+  }).join(' '));
+</script>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Cn.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Cn.html
new file mode 100644
index 000000000..90f583df3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Cn.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis, Cn</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="Emphasis marks should not be rendered for non-characters">
+<link rel="match" href="text-emphasis-style-property-010-ref.html">
+<p>Pass if there is nothing rendered below:</p>
+<div style="color: white; white-space: pre-wrap; text-emphasis: filled circle red">
+<script>
+  // U+FDD0..U+FDEF and U+XXFFFE..U+XXFFFF are noncharacters,
+  // and thus guaranteed to be unassigned.
+  var codepoints = [];
+  for (var code = 0xFDD0; code <= 0xFDEF; ++code) {
+    codepoints.push(code);
+  }
+  for (var plane = 0; plane <= 0x10; ++plane) {
+    codepoints.push(plane * 0x10000 + 0xFFFE);
+    codepoints.push(plane * 0x10000 + 0xFFFF);
+  }
+  document.write(codepoints.map(function (code) {
+    return String.fromCodePoint(code);
+  }).join(' '));
+</script>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Zl.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Zl.html
new file mode 100644
index 000000000..38840ba38
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Zl.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis, Zl</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="Emphasis marks should not be rendered for characters in general category Zl">
+<link rel="match" href="text-emphasis-style-property-010-ref.html">
+<p>Pass if there is nothing rendered below:</p>
+<div style="color: white; white-space: pre-wrap; text-emphasis: filled circle red">
+<script>
+  var codepoints = [
+    0x2028,
+  ];
+  document.write(codepoints.map(function (code) {
+    return String.fromCodePoint(code);
+  }).join(' '));
+</script>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Zp.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Zp.html
new file mode 100644
index 000000000..f0bbdbc8a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Zp.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis, Zp</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="Emphasis marks should not be rendered for characters in general category Zp">
+<link rel="match" href="text-emphasis-style-property-010-ref.html">
+<p>Pass if there is nothing rendered below:</p>
+<div style="color: white; white-space: pre-wrap; text-emphasis: filled circle red">
+<script>
+  var codepoints = [
+    0x2029,
+  ];
+  document.write(codepoints.map(function (code) {
+    return String.fromCodePoint(code);
+  }).join(' '));
+</script>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Zs.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Zs.html
new file mode 100644
index 000000000..c6e415252
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-010Zs.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis, Zs</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="Emphasis marks should not be rendered for characters in general category Zs">
+<link rel="match" href="text-emphasis-style-property-010-ref.html">
+<p>Pass if there is nothing rendered below:</p>
+<div style="color: white; white-space: pre-wrap; text-emphasis: filled circle red">
+<script>
+  var codepoints = [
+    0x0020,
+    0x00A0,
+    0x1680,
+    0x2000,
+    0x2001,
+    0x2002,
+    0x2003,
+    0x2004,
+    0x2005,
+    0x2006,
+    0x2007,
+    0x2008,
+    0x2009,
+    0x200A,
+    0x202F,
+    0x205F,
+    0x3000,
+  ];
+  document.write(codepoints.map(function (code) {
+    return String.fromCodePoint(code);
+  }).join(' '));
+</script>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011-ref.html
new file mode 100644
index 000000000..9f28f3f41
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: filled dot</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if there is a '&#x2022;' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#x2022;</rt>験<rt>&#x2022;</rt>テ<rt>&#x2022;</rt>ス<rt>&#x2022;</rt>ト<rt>&#x2022;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011.html
new file mode 100644
index 000000000..ed8d0fd4e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: filled dot</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: filled dot' produces U+2022 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-011-ref.html">
+<p>Pass if there is a '&#x2022;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: filled dot">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011a.html
new file mode 100644
index 000000000..849280198
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: dot filled</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: dot filled' produces U+2022 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-011-ref.html">
+<p>Pass if there is a '&#x2022;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: dot filled">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011b.html
new file mode 100644
index 000000000..894b57e24
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-011b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: dot</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: dot' produces U+2022 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-011-ref.html">
+<p>Pass if there is a '&#x2022;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: dot">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012-ref.html
new file mode 100644
index 000000000..672a659f4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: filled circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if there is a '&#x25CF;' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#x25CF;</rt>験<rt>&#x25CF;</rt>テ<rt>&#x25CF;</rt>ス<rt>&#x25CF;</rt>ト<rt>&#x25CF;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012.html
new file mode 100644
index 000000000..97c8dfde0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: filled circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: filled circle' produces U+25CF as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-012-ref.html">
+<p>Pass if there is a '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: filled circle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012a.html
new file mode 100644
index 000000000..5aa13441c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: circle filled</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: circle filled' produces U+25CF as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-012-ref.html">
+<p>Pass if there is a '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: circle filled">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012b.html
new file mode 100644
index 000000000..a9ece184d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: circle' produces U+25CF as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-012-ref.html">
+<p>Pass if there is a '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: circle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012c.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012c.html
new file mode 100644
index 000000000..624473247
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-012c.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: filled, horizontal</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: filled' produces U+25CF as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-012-ref.html">
+<p>Pass if there is a '&#x25CF;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: filled">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013-ref.html
new file mode 100644
index 000000000..5d6cb187d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: filled double-circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if there is a '&#x25C9;' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#x25C9;</rt>験<rt>&#x25C9;</rt>テ<rt>&#x25C9;</rt>ス<rt>&#x25C9;</rt>ト<rt>&#x25C9;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013.html
new file mode 100644
index 000000000..074ef47f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: filled double-circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: filled double-circle' produces U+25C9 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-013-ref.html">
+<p>Pass if there is a '&#x25C9;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: filled double-circle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013a.html
new file mode 100644
index 000000000..b641c21e5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: double-circle filled</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: double-circle filled' produces U+25C9 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-013-ref.html">
+<p>Pass if there is a '&#x25C9;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: double-circle filled">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013b.html
new file mode 100644
index 000000000..2f68d4484
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-013b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: double-circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: double-circle' produces U+25C9 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-013-ref.html">
+<p>Pass if there is a '&#x25C9;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: double-circle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014-ref.html
new file mode 100644
index 000000000..a18fc957b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: filled triangle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if there is a '&#x25B2;' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#x25B2;</rt>験<rt>&#x25B2;</rt>テ<rt>&#x25B2;</rt>ス<rt>&#x25B2;</rt>ト<rt>&#x25B2;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014.html
new file mode 100644
index 000000000..60231abf9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: filled triangle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: filled triangle' produces U+25B2 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-014-ref.html">
+<p>Pass if there is a '&#x25B2;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: filled triangle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014a.html
new file mode 100644
index 000000000..1c72bda80
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: triangle filled</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: triangle filled' produces U+25B2 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-014-ref.html">
+<p>Pass if there is a '&#x25B2;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: triangle filled">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014b.html
new file mode 100644
index 000000000..9b32cdd67
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-014b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: triangle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: triangle' produces U+25B2 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-014-ref.html">
+<p>Pass if there is a '&#x25B2;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: triangle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015-ref.html
new file mode 100644
index 000000000..a9cef72d3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: filled sesame</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if there is a '&#xFE45;' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#xFE45;</rt>験<rt>&#xFE45;</rt>テ<rt>&#xFE45;</rt>ス<rt>&#xFE45;</rt>ト<rt>&#xFE45;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015.html
new file mode 100644
index 000000000..6c62462ad
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: filled sesame</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: filled sesame' produces U+FE45 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-015-ref.html">
+<p>Pass if there is a '&#xFE45;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: filled sesame">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015a.html
new file mode 100644
index 000000000..e059497b0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: sesame filled</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: sesame filled' produces U+FE45 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-015-ref.html">
+<p>Pass if there is a '&#xFE45;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: sesame filled">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015b.html
new file mode 100644
index 000000000..a243600b0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-015b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: sesame</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: sesame' produces U+FE45 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-015-ref.html">
+<p>Pass if there is a '&#xFE45;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: sesame">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-016-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-016-ref.html
new file mode 100644
index 000000000..6b104021b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-016-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: open dot</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if there is a '&#x25E6;' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#x25E6;</rt>験<rt>&#x25E6;</rt>テ<rt>&#x25E6;</rt>ス<rt>&#x25E6;</rt>ト<rt>&#x25E6;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-016.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-016.html
new file mode 100644
index 000000000..954f9f4e8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-016.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: open dot</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: open dot' produces U+25E6 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-016-ref.html">
+<p>Pass if there is a '&#x25E6;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: open dot">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-016a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-016a.html
new file mode 100644
index 000000000..aeabcfa70
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-016a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: dot open</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: dot open' produces U+25E6 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-016-ref.html">
+<p>Pass if there is a '&#x25E6;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: dot open">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017-ref.html
new file mode 100644
index 000000000..c0be7ffd8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: open circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if there is a '&#x25CB;' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#x25CB;</rt>験<rt>&#x25CB;</rt>テ<rt>&#x25CB;</rt>ス<rt>&#x25CB;</rt>ト<rt>&#x25CB;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017.html
new file mode 100644
index 000000000..948ccf083
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: open circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: open circle' produces U+25CB as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-017-ref.html">
+<p>Pass if there is a '&#x25CB;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: open circle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017a.html
new file mode 100644
index 000000000..b9f58a888
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: circle open</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: circle open' produces U+25CB as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-017-ref.html">
+<p>Pass if there is a '&#x25CB;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: circle open">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017b.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017b.html
new file mode 100644
index 000000000..19ae3c8cb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-017b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: open, horizontal</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: open' produces U+25CB as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-017-ref.html">
+<p>Pass if there is a '&#x25CB;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: open">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-018-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-018-ref.html
new file mode 100644
index 000000000..f9d2980a8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-018-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: open double-circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if there is a '&#x25CE;' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#x25CE;</rt>験<rt>&#x25CE;</rt>テ<rt>&#x25CE;</rt>ス<rt>&#x25CE;</rt>ト<rt>&#x25CE;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-018.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-018.html
new file mode 100644
index 000000000..30713e614
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-018.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: open double-circle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: open double-circle' produces U+25CE as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-018-ref.html">
+<p>Pass if there is a '&#x25CE;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: open double-circle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-018a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-018a.html
new file mode 100644
index 000000000..b3e577df1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-018a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: double-circle open</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: double-circle open' produces U+25CE as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-018-ref.html">
+<p>Pass if there is a '&#x25CE;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: double-circle open">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-019-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-019-ref.html
new file mode 100644
index 000000000..b8f4f201f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-019-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: open triangle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if there is a '&#x25B3;' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#x25B3;</rt>験<rt>&#x25B3;</rt>テ<rt>&#x25B3;</rt>ス<rt>&#x25B3;</rt>ト<rt>&#x25B3;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-019.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-019.html
new file mode 100644
index 000000000..20c8069ec
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-019.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: open triangle</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: open triangle' produces U+25B3 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-019-ref.html">
+<p>Pass if there is a '&#x25B3;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: open triangle">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-019a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-019a.html
new file mode 100644
index 000000000..f73bf2111
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-019a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: triangle open</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: triangle open' produces U+25B3 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-019-ref.html">
+<p>Pass if there is a '&#x25B3;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: triangle open">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-020-ref.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-020-ref.html
new file mode 100644
index 000000000..1502d3d7f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-020-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: text-emphasis-style: open sesame</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style> rt { font-variant-east-asian: inherit; } </style>
+<p>Pass if there is a '&#xFE46;' above every character below:</p>
+<div style="line-height: 5;"><ruby>試<rt>&#xFE46;</rt>験<rt>&#xFE46;</rt>テ<rt>&#xFE46;</rt>ス<rt>&#xFE46;</rt>ト<rt>&#xFE46;</rt></ruby></div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-020.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-020.html
new file mode 100644
index 000000000..09c5ae534
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-020.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: open sesame</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: open sesame' produces U+FE46 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-020-ref.html">
+<p>Pass if there is a '&#xFE46;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: open sesame">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-020a.html b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-020a.html
new file mode 100644
index 000000000..a32781d61
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text-decor-3/text-emphasis-style-property-020a.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: text-emphasis-style: sesame open</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-emphasis-style-property">
+<meta name="assert" content="'text-emphasis-style: sesame open' produces U+FE46 as emphasis marks.">
+<link rel="match" href="text-emphasis-style-property-020-ref.html">
+<p>Pass if there is a '&#xFE46;' above every character below:</p>
+<div style="line-height: 5; text-emphasis-style: sesame open">試験テスト</div>
diff --git a/layout/reftests/w3c-css/submitted/text3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/text3/reftest-stylo.list
new file mode 100644
index 000000000..c5f743719
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/reftest-stylo.list
@@ -0,0 +1,9 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== text-align-match-parent-01.html text-align-match-parent-01.html
+== text-align-match-parent-02.html text-align-match-parent-02.html
+== text-align-match-parent-03.html text-align-match-parent-03.html
+== text-align-match-parent-04.html text-align-match-parent-04.html
+== text-align-match-parent-root-ltr.html text-align-match-parent-root-ltr.html
+== text-align-match-parent-root-rtl.html text-align-match-parent-root-rtl.html
+
+== text-word-spacing-001.html text-word-spacing-001.html
diff --git a/layout/reftests/w3c-css/submitted/text3/reftest.list b/layout/reftests/w3c-css/submitted/text3/reftest.list
new file mode 100644
index 000000000..2712e4363
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/reftest.list
@@ -0,0 +1,8 @@
+== text-align-match-parent-01.html text-align-match-parent-ref.html
+== text-align-match-parent-02.html text-align-match-parent-ref.html
+== text-align-match-parent-03.html text-align-match-parent-ref.html
+== text-align-match-parent-04.html text-align-match-parent-ref.html
+== text-align-match-parent-root-ltr.html text-align-match-parent-root-ltr-ref.html
+== text-align-match-parent-root-rtl.html text-align-match-parent-root-rtl-ref.html
+
+== text-word-spacing-001.html text-word-spacing-ref.html
diff --git a/layout/reftests/w3c-css/submitted/text3/support/Ahem.ttf b/layout/reftests/w3c-css/submitted/text3/support/Ahem.ttf
new file mode 100644
index 000000000..ac81cb031
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/support/Ahem.ttf
diff --git a/layout/reftests/w3c-css/submitted/text3/support/ahem.css b/layout/reftests/w3c-css/submitted/text3/support/ahem.css
new file mode 100644
index 000000000..82ee46679
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/support/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Ahem";
+  src: url(./Ahem.ttf);
+}
diff --git a/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-01.html b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-01.html
new file mode 100644
index 000000000..2c390dc66
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-01.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="assert" content="Text checks that an element with
+     text-align: match-parent inherits its parent's value and calculates
+     'start' and 'end' with respect to its parent's direction"
+     <link rel="match" href="text-align-match-parent-ref.html">
+    <style type="text/css">
+div.start  { text-align: start; }
+div.end    { text-align: end; }
+div.left   { text-align: left; }
+div.right  { text-align: right; }
+div > div  { text-align: match-parent; }
+    </style>
+  </head>
+  <body>
+   <div>Test passes if each line that says "Left" is aligned left and
+   each line that says "Right" is aligned right</div>
+   <div class="start" dir="ltr"><div dir="ltr">Left</div></div>
+   <div class="start" dir="ltr"><div dir="rtl">Left</div></div>
+   <div class="start" dir="rtl"><div dir="ltr">Right</div></div>
+   <div class="start" dir="rtl"><div dir="rtl">Right</div></div>
+   <div class="end" dir="ltr"><div dir="ltr">Right</div></div>
+   <div class="end" dir="ltr"><div dir="rtl">Right</div></div>
+   <div class="end" dir="rtl"><div dir="ltr">Left</div></div>
+   <div class="end" dir="rtl"><div dir="rtl">Left</div></div>
+   <div class="left" dir="ltr"><div dir="ltr">Left</div></div>
+   <div class="left" dir="ltr"><div dir="rtl">Left</div></div>
+   <div class="left" dir="rtl"><div dir="ltr">Left</div></div>
+   <div class="left" dir="rtl"><div dir="rtl">Left</div></div>
+   <div class="right" dir="ltr"><div dir="ltr">Right</div></div>
+   <div class="right" dir="ltr"><div dir="rtl">Right</div></div>
+   <div class="right" dir="rtl"><div dir="ltr">Right</div></div>
+   <div class="right" dir="rtl"><div dir="rtl">Right</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-02.html b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-02.html
new file mode 100644
index 000000000..0d567cb02
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-02.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Text checks that an element with
+      text-align: match-parent still aligns correctly if the parent's
+      dir attribute is changed">
+     <link rel="match" href="text-align-match-parent-ref.html">
+    <style type="text/css">
+div.start  { text-align: start; }
+div.end    { text-align: end; }
+div.left   { text-align: left; }
+div.right  { text-align: right; }
+div > div  { text-align: match-parent; }
+    </style>
+    <script type="text/javascript">
+function changeParentDir()
+{
+  for (parent = 0; parent < 16; ++parent) {
+     var parentDiv = document.getElementById("d" + parent);
+     if (parentDiv.dir == "rtl") {
+       parentDiv.dir = "ltr";
+     } else {
+       parentDiv.dir = "rtl";
+     }
+   }
+
+  document.documentElement.removeAttribute("class");
+}
+    </script>
+  </head>
+  <body onload="changeParentDir()">
+   <div>Test passes if each line that says "Left" is aligned left and
+   each line that says "Right" is aligned right</div>
+   <div id="d0" class="start" dir="rtl"><div dir="ltr">Left</div></div>
+   <div id="d1" class="start" dir="rtl"><div dir="rtl">Left</div></div>
+   <div id="d2" class="start" dir="ltr"><div dir="ltr">Right</div></div>
+   <div id="d3" class="start" dir="ltr"><div dir="rtl">Right</div></div>
+   <div id="d4" class="end" dir="rtl"><div dir="ltr">Right</div></div>
+   <div id="d5" class="end" dir="rtl"><div dir="rtl">Right</div></div>
+   <div id="d6" class="end" dir="ltr"><div dir="ltr">Left</div></div>
+   <div id="d7" class="end" dir="ltr"><div dir="rtl">Left</div></div>
+   <div id="d8" class="left" dir="rtl"><div dir="ltr">Left</div></div>
+   <div id="d9" class="left" dir="rtl"><div dir="rtl">Left</div></div>
+   <div id="d10" class="left" dir="ltr"><div dir="ltr">Left</div></div>
+   <div id="d11" class="left" dir="ltr"><div dir="rtl">Left</div></div>
+   <div id="d12" class="right" dir="rtl"><div dir="ltr">Right</div></div>
+   <div id="d13" class="right" dir="rtl"><div dir="rtl">Right</div></div>
+   <div id="d14" class="right" dir="ltr"><div dir="ltr">Right</div></div>
+   <div id="d15" class="right" dir="ltr"><div dir="rtl">Right</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-03.html b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-03.html
new file mode 100644
index 000000000..55887fd5d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-03.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Text checks that an element whose
+      text-align property is changed to match-parent aligns correctly">
+     <link rel="match" href="text-align-match-parent-ref.html">
+    <style type="text/css">
+div.start  { text-align: start; }
+div.end    { text-align: end; }
+div.left   { text-align: left; }
+div.right  { text-align: right; }
+div.center { text-align: center; }
+div.match  { text-align: match-parent; }
+    </style>
+   <script type="text/javascript">
+function changeChildAlign()
+{
+  for (child = 0; child < 16; ++child) {
+     var childDiv = document.getElementById("d" + child);
+     childDiv.className = "match";
+   }
+
+  document.documentElement.removeAttribute("class");
+}
+   </script>
+  </head>
+  <body onload="changeChildAlign()">
+   <div>Test passes if each line that says "Left" is aligned left and
+   each line that says "Right" is aligned right</div>
+   <div class="start" dir="ltr"><div id="d0" class="center" dir="ltr">Left</div></div>
+   <div class="start" dir="ltr"><div id="d1" class="center" dir="rtl">Left</div></div>
+   <div class="start" dir="rtl"><div id="d2" class="center" dir="ltr">Right</div></div>
+   <div class="start" dir="rtl"><div id="d3" class="center" dir="rtl">Right</div></div>
+   <div class="end" dir="ltr"><div id="d4" class="center" dir="ltr">Right</div></div>
+   <div class="end" dir="ltr"><div id="d5" class="center" dir="rtl">Right</div></div>
+   <div class="end" dir="rtl"><div id="d6" class="center" dir="ltr">Left</div></div>
+   <div class="end" dir="rtl"><div id="d7" class="center" dir="rtl">Left</div></div>
+   <div class="left" dir="ltr"><div id="d8" class="center" dir="ltr">Left</div></div>
+   <div class="left" dir="ltr"><div id="d9" class="center" dir="rtl">Left</div></div>
+   <div class="left" dir="rtl"><div id="d10" class="center" dir="ltr">Left</div></div>
+   <div class="left" dir="rtl"><div id="d11" class="center" dir="rtl">Left</div></div>
+   <div class="right" dir="ltr"><div id="d12" class="center" dir="ltr">Right</div></div>
+   <div class="right" dir="ltr"><div id="d13" class="center" dir="rtl">Right</div></div>
+   <div class="right" dir="rtl"><div id="d14" class="center" dir="ltr">Right</div></div>
+   <div class="right" dir="rtl"><div id="d15" class="center" dir="rtl">Right</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-04.html b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-04.html
new file mode 100644
index 000000000..dc1c0adcd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-04.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Text checks that an element with
+      text-align: match-parent still aligns correctly if the parent's
+      width is changed">
+     <link rel="match" href="text-align-match-parent-ref.html">
+    <style type="text/css">
+div.start  { text-align: start; }
+div.end    { text-align: end; }
+div.left   { text-align: left; }
+div.right  { text-align: right; }
+div > div  { text-align: match-parent; }
+    </style>
+    <script type="text/javascript">
+function changeParentWidth()
+{
+  for (parent = 0; parent < 16; ++parent) {
+     var parentDiv = document.getElementById("d" + parent);
+     parentDiv.style.width = "";
+   }
+
+  document.documentElement.removeAttribute("class");
+}
+   </script>
+  </head>
+  <body onload="changeParentWidth()">
+   <div>Test passes if each line that says "Left" is aligned left and
+   each line that says "Right" is aligned right</div>
+   <div id="d0" style="width: 50%;" class="start" dir="ltr"><div dir="ltr">Left</div></div>
+   <div id="d1" style="width: 50%;" class="start" dir="ltr"><div dir="rtl">Left</div></div>
+   <div id="d2" style="width: 50%;" class="start" dir="rtl"><div dir="ltr">Right</div></div>
+   <div id="d3" style="width: 50%;" class="start" dir="rtl"><div dir="rtl">Right</div></div>
+   <div id="d4" style="width: 50%;" class="end" dir="ltr"><div dir="ltr">Right</div></div>
+   <div id="d5" style="width: 50%;" class="end" dir="ltr"><div dir="rtl">Right</div></div>
+   <div id="d6" style="width: 50%;" class="end" dir="rtl"><div dir="ltr">Left</div></div>
+   <div id="d7" style="width: 50%;" class="end" dir="rtl"><div dir="rtl">Left</div></div>
+   <div id="d8" style="width: 50%;" class="left" dir="ltr"><div dir="ltr">Left</div></div>
+   <div id="d9" style="width: 50%;" class="left" dir="ltr"><div dir="rtl">Left</div></div>
+   <div id="d10" style="width: 50%;" class="left" dir="rtl"><div dir="ltr">Left</div></div>
+   <div id="d11" style="width: 50%;" class="left" dir="rtl"><div dir="rtl">Left</div></div>
+   <div id="d12" style="width: 50%;" class="right" dir="ltr"><div dir="ltr">Right</div></div>
+   <div id="d13" style="width: 50%;" class="right" dir="ltr"><div dir="rtl">Right</div></div>
+   <div id="d14" style="width: 50%;" class="right" dir="rtl"><div dir="ltr">Right</div></div>
+   <div id="d15" style="width: 50%;" class="right" dir="rtl"><div dir="rtl">Right</div></div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-ref.html b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-ref.html
new file mode 100644
index 000000000..f916b44c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <style type="text/css">
+div.left   { text-align: left; }
+div.right  { text-align: right; }
+    </style>
+  </head>
+  <body>
+   <div>Test passes if each line that says "Left" is aligned left and
+   each line that says "Right" is aligned right</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="left">Left</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+   <div class="right">Right</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-ltr-ref.html b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-ltr-ref.html
new file mode 100644
index 000000000..422f4fa51
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-ltr-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <style type="text/css">
+html { text-align: start; }
+    </style>
+  </head>
+  <body>
+    <p>This line should be aligned left</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-ltr.html b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-ltr.html
new file mode 100644
index 000000000..6665703b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-ltr.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="assert" content="Text checks that
+      text-align: match-parent on a root element with dir=ltr is
+      equivalent to text-align: start">
+    <link rel="match" href="text-align-match-parent-root-ltr-ref.html">
+    <style type="text/css">
+html { text-align: match-parent; }
+    </style>
+  </head>
+  <body>
+    <p>This line should be aligned left</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-rtl-ref.html b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-rtl-ref.html
new file mode 100644
index 000000000..a96db4575
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-rtl-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html dir="rtl">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <style type="text/css">
+html { text-align: start; }
+    </style>
+  </head>
+  <body>
+    <p>This line should be aligned right</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-rtl.html b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-rtl.html
new file mode 100644
index 000000000..a2d8f2290
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/text-align-match-parent-root-rtl.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="rtl">
+  <head>
+    <title>CSS Text: text-align: match-parent</title>
+    <link rel="author" title="Simon Montagu" href="mailto:smontagu@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css-text-3/#text-align-property">
+    <meta name="assert" content="Text checks that
+      text-align: match-parent on a root element with dir=rtl is
+      equivalent to text-align: start">
+    <link rel="match" href="text-align-match-parent-root-rtl-ref.html">
+    <style type="text/css">
+html { text-align: match-parent; }
+    </style>
+  </head>
+  <body>
+    <p>This line should be aligned right</p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/text3/text-word-spacing-001.html b/layout/reftests/w3c-css/submitted/text3/text-word-spacing-001.html
new file mode 100644
index 000000000..a9bcfd93b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/text-word-spacing-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>CSS Text Test: Word Spacing</title>
+<link rel="author" title="Nicholas Nethercote" href="mailto:nnethercote@mozilla.com">
+<link rel="help" href="http://www.w3.org/TR/css-text-3/#word-spacing">
+<link rel="stylesheet" type="text/css" href="support/ahem.css" />
+<link rel="match" href="text-word-spacing-ref.html">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Test checks that word-spacing works with percentages.">
+<style>
+@font-face {
+  font-family: Ahem;
+  src: url(support/Ahem.ttf);
+}
+/* We use Ahem to avoid very minor differences between the test and the
+   reference that occur with certain font+platform combinations. */
+div { font-family: Ahem; font-size: 20px; }
+div.wsn100  { word-spacing: -100%; }
+div.wsn40   { word-spacing: -40%; }
+div.ws0     { word-spacing: 0%; }
+div.ws25    { word-spacing: calc(25% + 0px); }
+div.ws100   { word-spacing: 100%; }
+div.ws300   { word-spacing: calc(100% + 6em + 50%*4 - 12em/2); }
+div.ws400p1 { word-spacing: calc(400% + 1em); }
+</style>
+<body>
+  <p>Test passes if the space between the words starts at zero and increases by
+  one on each subsequent line.</p>
+  <div class="wsn100" >A Bc Def Ghij</div>
+  <div class="ws0"    >A Bc Def Ghij</div>
+  <div class="ws100"  >A Bc Def Ghij</div>
+  <div class="wsn40"  >A &nbsp;&nbsp;&nbsp;&nbsp;Bc &nbsp;&nbsp;&nbsp;&nbsp;Def &nbsp;&nbsp;&nbsp;&nbsp;Ghij</div>
+  <div class="ws300"  >A Bc Def Ghij</div>
+  <div class="ws25"   >A &nbsp;&nbsp;&nbsp;Bc &nbsp;&nbsp;&nbsp;Def &nbsp;&nbsp;&nbsp;Ghij</div>
+  <div class="ws400p1">A Bc Def Ghij</div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/text3/text-word-spacing-ref.html b/layout/reftests/w3c-css/submitted/text3/text-word-spacing-ref.html
new file mode 100644
index 000000000..5cbd7a550
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/text3/text-word-spacing-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSS Text Test: Word Spacing</title>
+<link rel="author" title="Nicholas Nethercote" href="mailto:nnethercote@mozilla.com">
+<link rel="stylesheet" type="text/css" href="support/ahem.css" />
+<meta name="flags" content="ahem">
+<style>
+@font-face {
+  font-family: Ahem;
+  src: url(support/Ahem.ttf);
+}
+/* We use Ahem to avoid very minor differences between the test and the
+   reference that occur with certain font+platform combinations. */
+div { font-family: Ahem; font-size: 20px; }
+span.padoneem { padding-left: 1em; }
+</style>
+<body>
+  <p>Test passes if the space between the words starts at zero and increases by
+  one on each subsequent line.</p>
+  <div>ABcDefGhij</div>
+  <div>A Bc Def Ghij</div>
+  <div>A &nbsp;Bc &nbsp;Def &nbsp;Ghij</div>
+  <div>A &nbsp;&nbsp;Bc &nbsp;&nbsp;Def &nbsp;&nbsp;Ghij</div>
+  <div>A &nbsp;&nbsp;&nbsp;Bc &nbsp;&nbsp;&nbsp;Def &nbsp;&nbsp;&nbsp;Ghij</div>
+  <div>A &nbsp;&nbsp;&nbsp;&nbsp;Bc &nbsp;&nbsp;&nbsp;&nbsp;Def &nbsp;&nbsp;&nbsp;&nbsp;Ghij</div>
+  <div>A &nbsp;&nbsp;&nbsp;&nbsp;<span class="padoneem">Bc &nbsp;&nbsp;&nbsp;&nbsp;<span class="padoneem">Def &nbsp;&nbsp;&nbsp;&nbsp;<span class="padoneem">Ghij &nbsp;&nbsp;&nbsp;&nbsp;<span class="padoneem"></div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/transforms/containing-block-dynamic-1-ref.html b/layout/reftests/w3c-css/submitted/transforms/containing-block-dynamic-1-ref.html
new file mode 100644
index 000000000..34b66abdb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/containing-block-dynamic-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #fixedmoves {
+    position: absolute;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="fixedmoves"></div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/transforms/perspective-containing-block-dynamic-1a.html b/layout/reftests/w3c-css/submitted/transforms/perspective-containing-block-dynamic-1a.html
new file mode 100644
index 000000000..dcf7f2f4a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/perspective-containing-block-dynamic-1a.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#perspective-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changeperspective {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changeperspective" style="perspective: 1000px">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changeperspective = document.getElementById("changeperspective");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changeperspective.style.perspective = "";
+  </script>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/transforms/perspective-containing-block-dynamic-1b.html b/layout/reftests/w3c-css/submitted/transforms/perspective-containing-block-dynamic-1b.html
new file mode 100644
index 000000000..12f8299fd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/perspective-containing-block-dynamic-1b.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#perspective-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changeperspective {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changeperspective">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changeperspective = document.getElementById("changeperspective");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changeperspective.style.perspective = "1000px";
+  </script>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/transforms/perspective-zero.html b/layout/reftests/w3c-css/submitted/transforms/perspective-zero.html
new file mode 100644
index 000000000..f0044ad00
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/perspective-zero.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: transform: perspective(0)</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#funcdef-perspective">
+<meta name="assert" content="perspective(0) should behave like identity transform function.">
+<link rel="match" href="reference/green.html">
+<style>
+#cover-me, #test {
+  width: 100px;
+  height: 100px;
+}
+#cover-me {
+  background: red;
+  position: relative;
+  margin-bottom: -100px;
+}
+#test {
+  background: green;
+  /* This should be an identity transform, since perspective(0) must be
+   * treated as perspective(infinity), and consequently translateZ()
+   * doesn't have any effect, so that it covers up #cover-me.
+   * If perspective(0) is invalid, #test would not create a stacking
+   * context, and #cover-me would be placed on top of #test showing red.
+   * If perspective(0) is handled as perspective(epsilon), #test would
+   * be invisible. */
+  transform: perspective(0) translateZ(50px);
+}
+</style>
+<p>Pass if there is NO red below:</p>
+<div id="cover-me"></div><div id="test"></div>
diff --git a/layout/reftests/w3c-css/submitted/transforms/reference/green.html b/layout/reftests/w3c-css/submitted/transforms/reference/green.html
new file mode 100644
index 000000000..f7714d2b8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/reference/green.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: A green box</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<p>Pass if there is NO red below:</p>
+<div id="ref" style="width: 100px; height: 100px; background: green"></div>
diff --git a/layout/reftests/w3c-css/submitted/transforms/reftest-stylo.list b/layout/reftests/w3c-css/submitted/transforms/reftest-stylo.list
new file mode 100644
index 000000000..6ab706d2f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/reftest-stylo.list
@@ -0,0 +1,5 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== transform-containing-block-dynamic-1a.html transform-containing-block-dynamic-1a.html
+== transform-containing-block-dynamic-1b.html transform-containing-block-dynamic-1b.html
+== perspective-containing-block-dynamic-1a.html perspective-containing-block-dynamic-1a.html
+== perspective-containing-block-dynamic-1b.html perspective-containing-block-dynamic-1b.html
diff --git a/layout/reftests/w3c-css/submitted/transforms/reftest.list b/layout/reftests/w3c-css/submitted/transforms/reftest.list
new file mode 100644
index 000000000..80da1a6c2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/reftest.list
@@ -0,0 +1,5 @@
+== transform-containing-block-dynamic-1a.html containing-block-dynamic-1-ref.html
+== transform-containing-block-dynamic-1b.html containing-block-dynamic-1-ref.html
+== perspective-containing-block-dynamic-1a.html containing-block-dynamic-1-ref.html
+== perspective-containing-block-dynamic-1b.html containing-block-dynamic-1-ref.html
+== perspective-zero.html reference/green.html
diff --git a/layout/reftests/w3c-css/submitted/transforms/transform-containing-block-dynamic-1a.html b/layout/reftests/w3c-css/submitted/transforms/transform-containing-block-dynamic-1a.html
new file mode 100644
index 000000000..7e6a10dda
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/transform-containing-block-dynamic-1a.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-rendering">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.">
+<meta name="assert" content="The object acts as a containing block for fixed positioned descendants."
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changetransform {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changetransform" style="transform: translateX(4px)">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changetransform = document.getElementById("changetransform");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changetransform.style.transform = "";
+  </script>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/transforms/transform-containing-block-dynamic-1b.html b/layout/reftests/w3c-css/submitted/transforms/transform-containing-block-dynamic-1b.html
new file mode 100644
index 000000000..61266f02e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/transforms/transform-containing-block-dynamic-1b.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-rendering">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.">
+<meta name="assert" content="The object acts as a containing block for fixed positioned descendants."
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changetransform {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changetransform">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changetransform = document.getElementById("changetransform");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changetransform.style.transform = "translateX(0px)";
+  </script>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001-ref.xht
new file mode 100644
index 000000000..e886a0f05
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001-ref.xht
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reference: Box Sizing - Border-Box with specified width</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <style type="text/css"><![CDATA[
+    .container {
+      width: 300px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      width: 140px;
+      z-index: 1;
+      float: left;
+      border: 5px solid black;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001.xht
new file mode 100644
index 000000000..3118bc40b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: Box Sizing - Border-Box with specified width</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+  <link rel="match" href="box-sizing-border-box-001-ref.xht" />
+  <meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge." />
+  <style type="text/css"><![CDATA[
+    .container {
+      width: 300px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      box-sizing: border-box;
+      width: 50%;
+      z-index: 1;
+      float: left;
+      border: 5px solid black;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002-ref.xht
new file mode 100644
index 000000000..7c6bc218a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002-ref.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reference: Box Sizing - Border-Box with specified width</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <style type="text/css"><![CDATA[
+    .container {
+      width: 300px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      width: 120px;
+      z-index: 1;
+      float: left;
+      border: 5px solid black;
+      padding: 0px 10px;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002.xht
new file mode 100644
index 000000000..c18147f7c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: Box Sizing - Border-Box with specified width</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+  <link rel="match" href="box-sizing-border-box-002-ref.xht" />
+  <meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge." />
+  <style type="text/css"><![CDATA[
+    .container {
+      width: 300px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      box-sizing: border-box;
+      width: 50%;
+      z-index: 1;
+      float: left;
+      border: 5px solid black;
+      padding: 0px 10px;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003-ref.xht
new file mode 100644
index 000000000..c468c5b5b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reference: Box Sizing - Border-Box with specified width/height</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <style type="text/css"><![CDATA[
+    .container {
+      width: 300px;
+      height: 400px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      width: 120px;
+      height: 340px;
+      z-index: 1;
+      float: left;
+      border: 5px solid black;
+      padding: 25px 10px;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003.xht
new file mode 100644
index 000000000..b66b812e4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: Box Sizing - Border-Box with specified width/height</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+  <link rel="match" href="box-sizing-border-box-003-ref.xht" />
+  <meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge." />
+  <style type="text/css"><![CDATA[
+    .container {
+      width: 300px;
+      height: 400px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      box-sizing: border-box;
+      width: 50%;
+      height: 100%;
+      z-index: 1;
+      float: left;
+      border: 5px solid black;
+      padding: 25px 10px;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004-ref.xht
new file mode 100644
index 000000000..a635acd13
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004-ref.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reference: Box Sizing - Border-Box with min/max width/height</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <style type="text/css"><![CDATA[
+    .container {
+      min-width: 500px;
+      max-width: 700px;
+      min-height: 70px;
+      max-height: 90px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      min-width: 240px;
+      max-width: 340px;
+      min-height: 60px;
+      max-height: 80px;
+      z-index: 1;
+      float: left;
+      border: 5px solid black;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004.xht
new file mode 100644
index 000000000..626988214
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004.xht
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: Box Sizing - Border-Box with min/max width/height</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+  <link rel="match" href="box-sizing-border-box-004-ref.xht" />
+  <meta name="assert" content="box-sizing: border-box should make the element's (length) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge." />
+  <style type="text/css"><![CDATA[
+    .container {
+      min-width: 500px;
+      max-width: 700px;
+      min-height: 70px;
+      max-height: 90px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      box-sizing: border-box;
+      min-width: 250px;
+      max-width: 350px;
+      min-height: 70px;
+      max-height: 90px;
+      z-index: 1;
+      float: left;
+      border: 5px solid black;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001-ref.xht
new file mode 100644
index 000000000..ca3ff0f7e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001-ref.xht
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reference: Box Sizing - Content-Box with specified width/height</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <style type="text/css"><![CDATA[
+    .container {
+      width: 300px;
+      height: 110px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      width: 150px;
+      height: 110px;
+      z-index: 1;
+      float: left;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001.xht
new file mode 100644
index 000000000..8a0769239
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001.xht
@@ -0,0 +1,45 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: Box Sizing - Content-Box with specified width/height</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+  <link rel="match" href="box-sizing-content-box-001-ref.xht" />
+  <meta name="assert" content="box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
+  <style type="text/css"><![CDATA[
+    .container {
+      width: 300px;
+      height: 110px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      box-sizing: content-box;
+      width: 50%;
+      height: 100%;
+      z-index: 1;
+      float: left;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002-ref.xht
new file mode 100644
index 000000000..b280e5769
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002-ref.xht
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reference: Box Sizing - Content-Box with specified width/height</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <style type="text/css"><![CDATA[
+    .container {
+      width: 300px;
+      height: 100px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      width: 140px;
+      height: 90px;
+      z-index: 1;
+      float: left;
+      padding: 5px 5px;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002.xht
new file mode 100644
index 000000000..83853e6a7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: Box Sizing - Content-Box with specified width/height</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+  <link rel="match" href="box-sizing-content-box-002-ref.xht" />
+  <meta name="assert" content="box-sizing: content-box should make the element's (calc) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
+  <style type="text/css"><![CDATA[
+    .container {
+      width: 300px;
+      height: 100px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      box-sizing: content-box;
+      width: calc(50% - 10px);
+      height: calc(100% - 10px);
+      z-index: 1;
+      float: left;
+      padding: 5px 5px;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003-ref.xht
new file mode 100644
index 000000000..042b5628a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003-ref.xht
@@ -0,0 +1,43 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Reference: Box Sizing - Content-Box with min/max width/height</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <style type="text/css"><![CDATA[
+    .container {
+      min-width: 500px;
+      max-width: 700px;
+      height: 90px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      min-width: 250px;
+      max-width: 350px;
+      height: 100%;
+      z-index: 1;
+      float: left;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003.xht
new file mode 100644
index 000000000..a6cee3c4c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003.xht
@@ -0,0 +1,46 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>CSS Test: Box Sizing - Content-Box with min/max width/height</title>
+  <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+  <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+  <link rel="match" href="box-sizing-content-box-003-ref.xht" />
+  <meta name="assert" content="box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
+  <style type="text/css"><![CDATA[
+    .container {
+      min-width: 500px;
+      max-width: 700px;
+      height: 90px;
+      border: 2px solid black;
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      background-color: red;
+    }
+
+    .box-sized {
+      box-sizing: content-box;
+      width: 50%;
+      height: 100%;
+      z-index: 1;
+      float: left;
+    }
+
+    #one {
+      background-color: green;
+    }
+
+    #two {
+      background-color: blue;
+    }
+  ]]></style>
+ </head>
+ <body>
+   The two divs should be side-by-side, not one on top of another. No red should be visible.
+   <br />
+   <div class="container">
+     <div class="box-sized" id="one">LEFT HALF</div>
+     <div class="box-sized" id="two">RIGHT HALF</div>
+   </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001-ref.xht
new file mode 100644
index 000000000..815813c51
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001-ref.xht
@@ -0,0 +1,52 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+    <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+    <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+    <meta content="image" name="flags"></meta>
+    <!--
+      <link rel="help" href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#box-sizing">
+    -->
+    <style type="text/css">
+      p {
+        display: inline-block;
+        background-color: white;
+        margin: 0px 0px;
+        padding: 0px 0px;
+      }
+
+      .with-padding {
+        padding: 5px 5px;
+      }
+
+      #img {
+        width: 75px;
+        height: 75px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>All rectangles should be the same size.</div>
+    <p><img class="with-padding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+    <p><img id="img" class="with-padding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+    <p><img id="img" class="with-padding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht
new file mode 100644
index 000000000..003556b36
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht
@@ -0,0 +1,157 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+    <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+    <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+    <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+    <link rel="match" href="box-sizing-replaced-001-ref.xht" />
+    <meta content="image" name="flags"></meta>
+    <meta name="assert" content="All images should be sized at 75px x 75px, with 5px of padding around each." />
+    <!--
+      This test is derived from replaced-min-max-001, part of the W3C CSS 2.1
+      test suite.
+    -->
+    <style type="text/css">
+      p {
+        display: inline-block;
+        background-color: white;
+        padding: 0px 0px;
+        margin: 0px 0px;
+      }
+
+      .with-padding {
+        padding: 5px 5px;
+        box-sizing: border-box;
+      }
+
+      #img1 {
+        min-width:   70px;
+        max-width:  115px;
+        min-height:  55px;
+        max-height: 130px;
+      }
+
+      #img2 {
+        max-width:  85px;
+        min-height: 70px;
+      }
+
+      #img3 {
+        max-width:  85px;
+        min-height: 85px;
+      }
+
+      #img4 {
+        min-width:   85px;
+        max-height: 110px;
+      }
+
+      #img5 {
+        min-width:   85px;
+        max-height:  85px;
+      }
+
+      #img6 {
+        min-width:  70px;
+        max-height: 85px;
+      }
+
+      #img7 {
+        min-width:  85px;
+        max-height: 85px;
+      }
+
+      #img8 {
+        max-width: 110px;
+        min-height: 85px;
+      }
+
+      #img9 {
+        max-width:  85px;
+        min-height: 85px;
+      }
+
+      #img10 {
+        min-width:  85px;
+        max-width: 160px;
+        max-height: 85px;
+      }
+
+      #img11 {
+        min-width:  35px;
+        max-width: 235px;
+        max-height: 85px;
+      }
+
+      #img12 {
+        max-width:   85px;
+        min-height:  85px;
+        max-height: 160px;
+      }
+
+      #img13 {
+        max-width:   85px;
+        min-height:  35px;
+        max-height: 235px;
+      }
+
+      #img14 {
+        min-width:   60px;
+        max-width:  110px;
+        min-height:  85px;
+      }
+
+      #img15 {
+        min-width:   65px;
+        max-width:   85px;
+        min-height:  85px;
+      }
+
+      #img16 {
+        min-width:   85px;
+        min-height:  60px;
+        max-height: 110px;
+      }
+
+      #img17 {
+        min-width:  85px;
+        min-height: 65px;
+        max-height: 85px;
+      }
+
+      #img18 {
+        min-width:  85px;
+        max-height: 85px;
+      }
+
+      #img19 {
+        max-width:  85px;
+        min-height: 85px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>All rectangles should be the same size.</div>
+    <p><img id="img0" class="with-padding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+    <p><img id="img1" class="with-padding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+    <p><img id="img2" class="with-padding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+    <p><img id="img3" class="with-padding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+    <p><img id="img4" class="with-padding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+    <p><img id="img5" class="with-padding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+    <p><img id="img6" class="with-padding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+    <p><img id="img7" class="with-padding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+    <p><img id="img8" class="with-padding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+    <p><img id="img9" class="with-padding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+    <p><img id="img10" class="with-padding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+    <p><img id="img11" class="with-padding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+    <p><img id="img12" class="with-padding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+    <p><img id="img13" class="with-padding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+    <p><img id="img14" class="with-padding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+    <p><img id="img15" class="with-padding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+    <p><img id="img16" class="with-padding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+    <p><img id="img17" class="with-padding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+    <p><img id="img18" class="with-padding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+    <p><img id="img19" class="with-padding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002-ref.xht
new file mode 100644
index 000000000..64204a68a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002-ref.xht
@@ -0,0 +1,53 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+    <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+    <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+    <meta content="image" name="flags"></meta>
+    <!--
+      <link rel="help" href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#box-sizing">
+    -->
+    <style type="text/css">
+      p {
+        display: inline-block;
+        background-color: white;
+        margin: 0px 0px;
+        padding: 0px 0px;
+      }
+
+      .with-borderpadding {
+        padding: 5px 5px;
+        border: 5px solid blue;
+      }
+
+      #img {
+        width: 75px;
+        height: 75px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>All rectangles should be the same size.</div>
+    <p><img class="with-borderpadding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+    <p><img id="img" class="with-borderpadding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002.xht
new file mode 100644
index 000000000..fc062f4eb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002.xht
@@ -0,0 +1,158 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+    <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+    <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+    <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+    <link rel="match" href="box-sizing-replaced-002-ref.xht" />
+    <meta content="image" name="flags"></meta>
+    <meta name="assert" content="All images should be sized at 75px x 75px, with 5px of padding and 5px of blue border around each." />
+    <!--
+      This test is derived from replaced-min-max-001, part of the W3C CSS 2.1
+      test suite.
+    -->
+    <style type="text/css">
+      p {
+        display: inline-block;
+        background-color: white;
+        padding: 0px 0px;
+        margin: 0px 0px;
+      }
+
+      .with-borderpadding {
+        padding: 5px 5px;
+        border: 5px solid blue;
+        box-sizing: border-box;
+      }
+
+      #img1 {
+        min-width:   80px;
+        max-width:  125px;
+        min-height:  65px;
+        max-height: 140px;
+      }
+
+      #img2 {
+        max-width:  95px;
+        min-height: 80px;
+      }
+
+      #img3 {
+        max-width:  95px;
+        min-height: 95px;
+      }
+
+      #img4 {
+        min-width:   95px;
+        max-height: 120px;
+      }
+
+      #img5 {
+        min-width:   95px;
+        max-height:  95px;
+      }
+
+      #img6 {
+        min-width:  80px;
+        max-height: 95px;
+      }
+
+      #img7 {
+        min-width:  95px;
+        max-height: 95px;
+      }
+
+      #img8 {
+        max-width: 120px;
+        min-height: 95px;
+      }
+
+      #img9 {
+        max-width:  95px;
+        min-height: 95px;
+      }
+
+      #img10 {
+        min-width:  95px;
+        max-width: 170px;
+        max-height: 95px;
+      }
+
+      #img11 {
+        min-width:  45px;
+        max-width: 245px;
+        max-height: 95px;
+      }
+
+      #img12 {
+        max-width:  95px;
+        min-height: 95px;
+        max-height: 170px;
+      }
+
+      #img13 {
+        max-width:   95px;
+        min-height:  45px;
+        max-height: 245px;
+      }
+
+      #img14 {
+        min-width:   70px;
+        max-width:  120px;
+        min-height:  95px;
+      }
+
+      #img15 {
+        min-width:   75px;
+        max-width:   95px;
+        min-height:  95px;
+      }
+
+      #img16 {
+        min-width:   95px;
+        min-height:  70px;
+        max-height: 120px;
+      }
+
+      #img17 {
+        min-width:  95px;
+        min-height: 75px;
+        max-height: 95px;
+      }
+
+      #img18 {
+        min-width:  95px;
+        max-height: 95px;
+      }
+
+      #img19 {
+        max-width:  95px;
+        min-height: 95px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>All rectangles should be the same size.</div>
+    <p><img id="img0" class="with-borderpadding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+    <p><img id="img1" class="with-borderpadding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+    <p><img id="img2" class="with-borderpadding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+    <p><img id="img3" class="with-borderpadding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+    <p><img id="img4" class="with-borderpadding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+    <p><img id="img5" class="with-borderpadding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+    <p><img id="img6" class="with-borderpadding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+    <p><img id="img7" class="with-borderpadding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+    <p><img id="img8" class="with-borderpadding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+    <p><img id="img9" class="with-borderpadding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+    <p><img id="img10" class="with-borderpadding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+    <p><img id="img11" class="with-borderpadding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+    <p><img id="img12" class="with-borderpadding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+    <p><img id="img13" class="with-borderpadding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+    <p><img id="img14" class="with-borderpadding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+    <p><img id="img15" class="with-borderpadding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+    <p><img id="img16" class="with-borderpadding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+    <p><img id="img17" class="with-borderpadding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+    <p><img id="img18" class="with-borderpadding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+    <p><img id="img19" class="with-borderpadding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003-ref.xht
new file mode 100644
index 000000000..85524daf4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003-ref.xht
@@ -0,0 +1,48 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+    <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+    <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+    <meta content="image" name="flags"></meta>
+    <!--
+      <link rel="help" href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#box-sizing">
+    -->
+    <style type="text/css">
+      p {
+        display: inline-block;
+        background-color: white;
+        margin: 0px 0px;
+        padding: 0px 0px;
+      }
+
+      #img {
+        width: 75px;
+        height: 75px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>All rectangles should be the same size.</div>
+    <p><img src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+    <p><img id="img" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+    <p><img id="img" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+    <p><img id="img" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+    <p><img id="img" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+    <p><img id="img" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+    <p><img id="img" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+    <p><img id="img" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+    <p><img id="img" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+    <p><img id="img" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+    <p><img id="img" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+    <p><img id="img" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+    <p><img id="img" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+    <p><img id="img" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+    <p><img id="img" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+    <p><img id="img" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+    <p><img id="img" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+    <p><img id="img" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+    <p><img id="img" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+    <p><img id="img" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003.xht
new file mode 100644
index 000000000..ed75c02d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003.xht
@@ -0,0 +1,156 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+    <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+    <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+    <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+    <link rel="match" href="box-sizing-replaced-003-ref.xht" />
+    <meta content="image" name="flags"></meta>
+    <meta name="assert" content="All images should be sized at 75px x 75px." />
+    <!--
+      This test is derived from replaced-min-max-001, part of the W3C CSS 2.1
+      test suite.
+    -->
+    <style type="text/css">
+      p {
+        display: inline-block;
+        background-color: white;
+        padding: 0px 0px;
+        margin: 0px 0px;
+      }
+
+      .content-box {
+        box-sizing: content-box;
+      }
+
+      #img1 {
+        min-width:   60px;
+        max-width:  125px;
+        min-height:  45px;
+        max-height: 120px;
+      }
+
+      #img2 {
+        max-width:  75px;
+        min-height: 60px;
+      }
+
+      #img3 {
+        max-width:  75px;
+        min-height: 75px;
+      }
+
+      #img4 {
+        min-width:   75px;
+        max-height: 100px;
+      }
+
+      #img5 {
+        min-width:   75px;
+        max-height:  75px;
+      }
+
+      #img6 {
+        min-width:  60px;
+        max-height: 75px;
+      }
+
+      #img7 {
+        min-width:  75px;
+        max-height: 75px;
+      }
+
+      #img8 {
+        max-width: 100px;
+        min-height: 75px;
+      }
+
+      #img9 {
+        max-width:  75px;
+        min-height: 75px;
+      }
+
+      #img10 {
+        min-width:  75px;
+        max-width: 150px;
+        max-height: 75px;
+      }
+
+      #img11 {
+        min-width:  25px;
+        max-width: 225px;
+        max-height: 75px;
+      }
+
+      #img12 {
+        max-width:   75px;
+        min-height:  75px;
+        max-height: 150px;
+      }
+
+      #img13 {
+        max-width:   75px;
+        min-height:  25px;
+        max-height: 225px;
+      }
+
+      #img14 {
+        min-width:   50px;
+        max-width:  100px;
+        min-height:  75px;
+      }
+
+      #img15 {
+        min-width:   55px;
+        max-width:   75px;
+        min-height:  75px;
+      }
+
+      #img16 {
+        min-width:   75px;
+        min-height:  50px;
+        max-height: 100px;
+      }
+
+      #img17 {
+        min-width:  75px;
+        min-height: 55px;
+        max-height: 75px;
+      }
+
+      #img18 {
+        min-width:  75px;
+        max-height: 75px;
+      }
+
+      #img19 {
+        max-width:  75px;
+        min-height: 75px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>All rectangles should be the same size.</div>
+    <p><img id="img0" class="content-box" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+    <p><img id="img1" class="content-box" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+    <p><img id="img2" class="content-box" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+    <p><img id="img3" class="content-box" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+    <p><img id="img4" class="content-box" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+    <p><img id="img5" class="content-box" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+    <p><img id="img6" class="content-box" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+    <p><img id="img7" class="content-box" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+    <p><img id="img8" class="content-box" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+    <p><img id="img9" class="content-box" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+    <p><img id="img10" class="content-box" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+    <p><img id="img11" class="content-box" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+    <p><img id="img12" class="content-box" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+    <p><img id="img13" class="content-box" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+    <p><img id="img14" class="content-box" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+    <p><img id="img15" class="content-box" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+    <p><img id="img16" class="content-box" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+    <p><img id="img17" class="content-box" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+    <p><img id="img18" class="content-box" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+    <p><img id="img19" class="content-box" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/ui3/reftest-stylo.list
new file mode 100644
index 000000000..cba070397
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/reftest-stylo.list
@@ -0,0 +1,16 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== box-sizing-border-box-001.xht box-sizing-border-box-001.xht
+== box-sizing-border-box-002.xht box-sizing-border-box-002.xht
+== box-sizing-border-box-003.xht box-sizing-border-box-003.xht
+== box-sizing-border-box-004.xht box-sizing-border-box-004.xht
+== box-sizing-content-box-001.xht box-sizing-content-box-001.xht
+== box-sizing-content-box-002.xht box-sizing-content-box-002.xht
+== box-sizing-content-box-003.xht box-sizing-content-box-003.xht
+fails == box-sizing-replaced-001.xht box-sizing-replaced-001-ref.xht #bug #bug
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(Android,27,874) random-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-002.xht box-sizing-replaced-002.xht
+# Bug 1128229
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(Android,27,925) random-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-003.xht box-sizing-replaced-003.xht
+# Bug 1128229
+# Initial mulet triage: parity with B2G/B2G Desktop
diff --git a/layout/reftests/w3c-css/submitted/ui3/reftest.list b/layout/reftests/w3c-css/submitted/ui3/reftest.list
new file mode 100644
index 000000000..bb33f595c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/reftest.list
@@ -0,0 +1,10 @@
+== box-sizing-border-box-001.xht box-sizing-border-box-001-ref.xht
+== box-sizing-border-box-002.xht box-sizing-border-box-002-ref.xht
+== box-sizing-border-box-003.xht box-sizing-border-box-003-ref.xht
+== box-sizing-border-box-004.xht box-sizing-border-box-004-ref.xht
+== box-sizing-content-box-001.xht box-sizing-content-box-001-ref.xht
+== box-sizing-content-box-002.xht box-sizing-content-box-002-ref.xht
+== box-sizing-content-box-003.xht box-sizing-content-box-003-ref.xht
+fuzzy-if(skiaContent,15,50) fuzzy-if(OSX,255,1575) skip-if(Android||gtkWidget) == box-sizing-replaced-001.xht box-sizing-replaced-001-ref.xht # bug 982547, Bug 1295466, Bug 1321707
+fuzzy-if(Android,27,874) fuzzy-if(gtkWidget,255,2775) == box-sizing-replaced-002.xht box-sizing-replaced-002-ref.xht # Bug 1128229, Bug 1313772
+fuzzy-if(Android,27,925) fuzzy-if(gtkWidget,14,43) == box-sizing-replaced-003.xht box-sizing-replaced-003-ref.xht # Bug 1128229
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-1.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-1.png
new file mode 100644
index 000000000..d6946724d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-1.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-10.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-10.png
new file mode 100644
index 000000000..bfdca3e6f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-10.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-11.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-11.png
new file mode 100644
index 000000000..38ee90dda
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-11.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-12.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-12.png
new file mode 100644
index 000000000..87433d4d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-12.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-13.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-13.png
new file mode 100644
index 000000000..c07d66e78
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-13.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-14.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-14.png
new file mode 100644
index 000000000..e89dbe975
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-14.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-15.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-15.png
new file mode 100644
index 000000000..717ea111b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-15.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-16.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-16.png
new file mode 100644
index 000000000..0a49bbf1c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-16.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-17.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-17.png
new file mode 100644
index 000000000..a2ee273d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-17.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-18.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-18.png
new file mode 100644
index 000000000..d18f45341
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-18.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-19.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-19.png
new file mode 100644
index 000000000..8900f36c4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-19.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-2.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-2.png
new file mode 100644
index 000000000..58338097f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-2.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-3.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-3.png
new file mode 100644
index 000000000..e5e7d6e8a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-3.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-4.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-4.png
new file mode 100644
index 000000000..c099ae427
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-4.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-5.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-5.png
new file mode 100644
index 000000000..9d9d8105f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-5.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-6.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-6.png
new file mode 100644
index 000000000..781f894a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-6.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-7.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-7.png
new file mode 100644
index 000000000..3f91a11f8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-7.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-8.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-8.png
new file mode 100644
index 000000000..69951ec25
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-8.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-9.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-9.png
new file mode 100644
index 000000000..3ac586daa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-9.png
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max.png
new file mode 100644
index 000000000..3ef233005
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max.png
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-background-image-gradient-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-background-image-gradient-1-ref.html
new file mode 100644
index 000000000..3fefef23f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-background-image-gradient-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test for calc() on background-image gradients</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+
+p {
+    height: 50px; width: 200px;
+    border: thin solid;
+}
+
+#one { background-image: radial-gradient(circle farthest-side at 150px 20px, red, green); }
+
+</style>
+</head>
+<body>
+<p id="one"></p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-background-image-gradient-1.html b/layout/reftests/w3c-css/submitted/values3/calc-background-image-gradient-1.html
new file mode 100644
index 000000000..b2c028974
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-background-image-gradient-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for calc() on background-image gradients</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-background-image-gradient-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+p {
+    height: 50px; width: 200px;
+    border: thin solid;
+}
+
+#one { background-image: radial-gradient(circle farthest-side at calc(50px + 50%) calc(100% - 30px), red, green); }
+
+</style>
+</head>
+<body>
+<p id="one"></p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-background-linear-gradient-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-background-linear-gradient-1-ref.html
new file mode 100644
index 000000000..5c8a60412
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-background-linear-gradient-1-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<head>
+  <title>CSS Reference: Support calc() on gradient stop positions</title>
+  <link rel="author" title="Yu-Sian (Thomasy) Liu" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594935">
+  <meta name="flags" content="">
+<style type="text/css">
+div {
+ width:100px;
+ height:100px;
+ background:red;
+ margin:5px 0 0 5px;
+ float:left;
+}
+div#one {
+ background: linear-gradient(lime 0px, lime 90px, blue 90px, blue 100%);
+}
+div#two {
+ background: linear-gradient(blue 0px ,green 30px ,red 40px ,white 60px , lime  80px);
+}
+div#three {
+ background: linear-gradient(blue 0px ,purple 20px ,red 40px ,blue 60px , lime  80px);
+}
+div#four {
+ background: linear-gradient(blue 0px ,green 30px ,red 40px ,blue 60px , yellow  80px);
+}
+div#five {
+ background: linear-gradient(red 0px ,green 30px);
+}
+</style>
+</head>
+<body>
+<div id="one">1</div>
+<div id="two">2</div>
+<div id="three">3</div>
+<div id="four">4</div>
+<div id="five">5</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-background-linear-gradient-1.html b/layout/reftests/w3c-css/submitted/values3/calc-background-linear-gradient-1.html
new file mode 100644
index 000000000..6d60e8dd9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-background-linear-gradient-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<head>
+  <title>CSS Test: Support calc() on gradient stop positions</title>
+  <link rel="author" title="Yu-Sian (Thomasy) Liu" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594935">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-background-linear-gradient-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+div {
+ width:100px;
+ height:100px;
+ background:red;
+ margin:5px 0 0 5px;
+ float:left;
+}
+div#one {
+ background: linear-gradient(lime 0px, lime calc(100% - 10px), blue calc(100% - 10px), blue 100%);
+}
+div#two {
+ background: linear-gradient(blue calc(100% - 100px) ,green calc(10% + 20px) ,red 40px ,white calc(100% - 40px) , lime  80px);
+}
+div#three {
+ background: linear-gradient(blue calc(0px) ,purple calc(20%) ,red calc(10px + 10px + 20px) ,blue calc(30% + 30px) , lime  calc(180% - 100px));
+}
+div#four {
+ background: linear-gradient(blue calc(0% + 0px) ,green calc(10% + 20px) ,red 40px ,blue calc(200% / 2 - 40px) , yellow  80px);
+}
+div#five {
+ background: linear-gradient(red calc(100% - 100px) ,green calc(10% + 20px));
+}
+
+</style>
+</head>
+<body>
+<div id="one">1</div>
+<div id="two">2</div>
+<div id="three">3</div>
+<div id="four">4</div>
+<div id="five">5</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-background-position-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-background-position-1-ref.html
new file mode 100644
index 000000000..a9d8056cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-background-position-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test for calc() on background-position</title>
+  <link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
+  <meta name="flags" content="">
+<style type="text/css">
+
+p {
+    height: 50px; width: 200px;
+    border: thin solid;
+    background-image: url(../backgrounds/blue-32x32.png);
+    background-repeat: no-repeat;
+}
+
+#one { background-position: 134px -12px }
+#two { background-position: -18px -19px }
+
+</style>
+</head>
+<body>
+<p id="one"></p>
+<p id="two"></p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-background-position-1.html b/layout/reftests/w3c-css/submitted/values3/calc-background-position-1.html
new file mode 100644
index 000000000..2a8bfdf65
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-background-position-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for calc() on background-position</title>
+  <link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-background-position-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+p {
+    height: 50px; width: 200px;
+    border: thin solid;
+    background-image: url(../backgrounds/blue-32x32.png);
+    background-repeat: no-repeat;
+}
+
+#one { background-position: calc(50px + 50%) calc(100% - 30px) }
+#two { background-position: calc(-12.5% + 3px) calc(-10px - 50%) }
+
+</style>
+</head>
+<body>
+<p id="one"></p>
+<p id="two"></p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-background-size-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-background-size-1-ref.html
new file mode 100644
index 000000000..16b89c1d8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-background-size-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test for calc() on background-size</title>
+  <link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
+  <meta name="flags" content="">
+<style type="text/css">
+
+p {
+    height: 50px; width: 200px;
+    border: thin solid;
+    background-image: url(../backgrounds/blue-32x32.png);
+    background-repeat: no-repeat;
+}
+
+#one { background-size: 150px 20px; }
+#two { background-image: none }
+
+</style>
+</head>
+<body>
+<p id="one"></p>
+<p id="two"></p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-background-size-1.html b/layout/reftests/w3c-css/submitted/values3/calc-background-size-1.html
new file mode 100644
index 000000000..e91f8c26c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-background-size-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for calc() on background-size</title>
+  <link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-background-size-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+p {
+    height: 50px; width: 200px;
+    border: thin solid;
+    background-image: url(../backgrounds/blue-32x32.png);
+    background-repeat: no-repeat;
+}
+
+#one { background-size: calc(50px + 50%) calc(100% - 30px) }
+#two { background-size: calc(50px + 50%) calc(10px - 50%) }
+
+</style>
+</head>
+<body>
+<p id="one"></p>
+<p id="two"></p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-border-radius-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-border-radius-1-ref.html
new file mode 100644
index 000000000..24681d08a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-border-radius-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: test for border-radius: calc()</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+
+p {
+  height: 256px;
+  width: 512px;
+  background: blue;
+  border-radius: 21px 6px 12px 29px / 5px 16px 10px 3px;
+}
+
+</style>
+</head>
+<body>
+<p></p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-border-radius-1.html b/layout/reftests/w3c-css/submitted/values3/calc-border-radius-1.html
new file mode 100644
index 000000000..ad36d3649
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-border-radius-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: test for border-radius: calc()</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-border-radius-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+p {
+  /* We use powers of two here to avoid floating-point issues.
+     See bug 590181. */
+
+  height: 256px;
+  width: 512px;
+  background: blue;
+  border-radius: calc((1/32 * 100%) + 5px)
+                 calc((1/64 * 100%) - 2px)
+                 calc(10px + (1/256 * 100%))
+                 calc((1/16 * 100%) - 3px) /
+                 calc((1/32 * 100%) - (1px + (1/128 * 100%)))
+                 calc(1/16 * 100%)
+                 calc(10px)
+                 3px;
+}
+
+</style>
+</head>
+<body>
+<p></p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-height-block-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-height-block-1-ref.html
new file mode 100644
index 000000000..be75d5d6a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-height-block-1-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test for height:calc() or min-height:calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 }
+body > div { float: left; width: 1px; background: blue; }
+</style>
+</head>
+<body>
+
+<!-- tests with a fixed-height container -->
+<div style="height: 50px"></div>
+<div style="height: 50px"></div>
+<div style="height: 75px"></div>
+<div style="height: 45px"></div>
+<div style="height: 40px"></div>
+<div style="height: 30px"></div>
+
+<!-- tests with an auto-height container -->
+<div style="height: 50px"></div>
+<div style="height: 10px"></div>
+<div style="height: 10px"></div>
+<div style="height: 10px"></div>
+<div style="height: 10px"></div>
+<div style="height: 10px"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-height-block-1.html b/layout/reftests/w3c-css/submitted/values3/calc-height-block-1.html
new file mode 100644
index 000000000..9525c87de
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-height-block-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for height:calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-height-block-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 }
+body > div { float: left; height: 100px; width: 1px; }
+body > div > div { background: blue }
+
+/* for auto-height tests */
+body > div > div > div > div { height: 10px }
+</style>
+</head>
+<body>
+
+<!-- tests with a fixed-height container -->
+<div><div style="height: calc(50px)"></div></div>
+<div><div style="height: calc(50%)"></div></div>
+<div><div style="height: calc(25px + 50%)"></div></div>
+<div><div style="height: calc(150% / 2 - 30px)"></div></div>
+<div><div style="height: calc(40px + 10% - 20% / 2)"></div></div>
+<div><div style="height: calc(40px - 10%)"></div></div>
+
+<!-- tests with an auto-height container -->
+<div><div><div style="height: calc(50px)"><div></div></div></div></div>
+<div><div><div style="height: calc(50%)"><div></div></div></div></div>
+<div><div><div style="height: calc(25px + 50%)"><div></div></div></div></div>
+<div><div><div style="height: calc(150% / 2 - 30px)"><div></div></div></div></div>
+<div><div><div style="height: calc(40px + 10% - 20% / 2)"><div></div></div></div></div>
+<div><div><div style="height: calc(40px - 10%)"><div></div></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-height-table-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-height-table-1-ref.html
new file mode 100644
index 000000000..d936f69ed
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-height-table-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test that height:calc() with no percentages has an effect on inner table elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+tbody, tr, td {
+  height: 500px;
+  min-height: 700px;
+  max-height: 2px;
+}
+</style>
+</head>
+<body>
+<table border>
+  <tbody>
+    <tr>
+      <td>cell</td>
+      <td>cell</td>
+    </tr>
+    <tr>
+      <td>cell</td>
+      <td>cell</td>
+    </tr>
+  </tbody>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-height-table-1.html b/layout/reftests/w3c-css/submitted/values3/calc-height-table-1.html
new file mode 100644
index 000000000..64b7b5dc3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-height-table-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test that height:calc() with no percentages has an effect on inner table elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-height-table-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+tbody, tr, td {
+  height: calc(500px);
+  min-height: calc(700px);
+  max-height: calc(2px);
+}
+</style>
+</head>
+<body>
+<table border>
+  <tbody>
+    <tr>
+      <td>cell</td>
+      <td>cell</td>
+    </tr>
+    <tr>
+      <td>cell</td>
+      <td>cell</td>
+    </tr>
+  </tbody>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-margin-block-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-margin-block-1-ref.html
new file mode 100644
index 000000000..acfc08892
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-margin-block-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test of margin-*: calc()</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+
+div { border: medium solid green; width: 500px }
+p { background: yellow }
+
+</style>
+</head>
+<body>
+
+<div><p style="margin: 15px 0 0 0">paragraph with margin</p></div>
+<div><p style="margin: 0 15px 0 0">paragraph with margin</p></div>
+<div><p style="margin: 0 0 15px 0">paragraph with margin</p></div>
+<div><p style="margin: 0 0 0 15px">paragraph with margin</p></div>
+<div><p style="margin: 25px 25px 25px 25px">paragraph with margin</p></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-margin-block-1.html b/layout/reftests/w3c-css/submitted/values3/calc-margin-block-1.html
new file mode 100644
index 000000000..7372bd2ae
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-margin-block-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test of margin-*: calc()</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-margin-block-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+div { border: medium solid green; width: 500px }
+p { background: yellow }
+
+</style>
+</head>
+<body>
+
+<div><p style="margin: calc(10px + 1%) 0 0 0">paragraph with margin</p></div>
+<div><p style="margin: 0 calc(10px + 1%) 0 0">paragraph with margin</p></div>
+<div><p style="margin: 0 0 calc(10px + 1%) 0">paragraph with margin</p></div>
+<div><p style="margin: 0 0 0 calc(10px + 1%)">paragraph with margin</p></div>
+<div><p style="margin: calc(30px - 1%)">paragraph with margin</p></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-max-height-block-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-max-height-block-1-ref.html
new file mode 100644
index 000000000..9907c9984
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-max-height-block-1-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test for max-height:calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 }
+body > div { float: left; width: 1px; background: blue; }
+</style>
+</head>
+<body>
+
+<!-- tests with a fixed-height container -->
+<div style="height: 50px"></div>
+<div style="height: 50px"></div>
+<div style="height: 75px"></div>
+<div style="height: 45px"></div>
+<div style="height: 40px"></div>
+<div style="height: 30px"></div>
+
+<!-- tests with an auto-height container -->
+<div style="height: 50px"></div>
+<div style="height: 300px"></div>
+<div style="height: 300px"></div>
+<div style="height: 300px"></div>
+<div style="height: 300px"></div>
+<div style="height: 300px"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-max-height-block-1.html b/layout/reftests/w3c-css/submitted/values3/calc-max-height-block-1.html
new file mode 100644
index 000000000..d0f978a2b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-max-height-block-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for max-height:calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-max-height-block-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 }
+body > div { float: left; height: 100px; width: 1px; }
+body > div > div { background: blue }
+
+/* to give the max-height something to restrict */
+span { display: block; height: 300px }
+</style>
+</head>
+<body>
+
+<!-- tests with a fixed-height container -->
+<div><div style="max-height: calc(50px)"><span></span></div></div>
+<div><div style="max-height: calc(50%)"><span></span></div></div>
+<div><div style="max-height: calc(25px + 50%)"><span></span></div></div>
+<div><div style="max-height: calc(150% / 2 - 30px)"><span></span></div></div>
+<div><div style="max-height: calc(40px + 10% - 20% / 2)"><span></span></div></div>
+<div><div style="max-height: calc(40px - 10%)"><span></span></div></div>
+
+<!-- tests with an auto-height container -->
+<div><div><div style="max-height: calc(50px)"><span></span></div></div></div>
+<div><div><div style="max-height: calc(50%)"><span></span></div></div></div>
+<div><div><div style="max-height: calc(25px + 50%)"><span></span></div></div></div>
+<div><div><div style="max-height: calc(150% / 2 - 30px)"><span></span></div></div></div>
+<div><div><div style="max-height: calc(40px + 10% - 20% / 2)"><span></span></div></div></div>
+<div><div><div style="max-height: calc(40px - 10%)"><span></span></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-max-width-block-1.html b/layout/reftests/w3c-css/submitted/values3/calc-max-width-block-1.html
new file mode 100644
index 000000000..c6a31d229
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-max-width-block-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: max-width: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-width-block-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { width: 500px }
+p { background: green; color: white; margin: 1px 0; font-size: 10px; width: 1000px; }
+
+</style>
+</head>
+<body>
+
+<p style="max-width: calc(50% - 3px)">50% - 3px</p>
+<p style="max-width: calc(25% - 3px + 25%)">25% - 3px + 25%</p>
+<p style="max-width: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p>
+<p style="max-width: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p>
+<p style="max-width: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p>
+<p style="max-width: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p>
+<p style="max-width: calc(30% + 20%)">30% + 20%</p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-max-width-block-intrinsic-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-max-width-block-intrinsic-1-ref.html
new file mode 100644
index 000000000..8cb693160
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-max-width-block-intrinsic-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: intrinsic width of max-width: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
+
+</style>
+</head>
+<body>
+
+<div style="width: 400px"></div>
+<div style="width: 47px"></div>
+<div style="width: 400px"></div>
+<div style="width: 400px"></div>
+<div style="width: 50px"></div>
+<div style="width: 400px"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-max-width-block-intrinsic-1.html b/layout/reftests/w3c-css/submitted/values3/calc-max-width-block-intrinsic-1.html
new file mode 100644
index 000000000..433c1950c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-max-width-block-intrinsic-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: intrinsic width of max-width: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-max-width-block-intrinsic-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { font-size: 10px }
+body > div { float: left; clear: left;
+             margin: 0 0 1px 0; background: blue; color: white; height: 5px }
+body > div > div { width: 400px }
+body > div > div > div { width: 200px }
+
+</style>
+</head>
+<body>
+
+<div><div style="max-width: calc(50% - 3px)"><div></div></div></div>
+<div><div style="max-width: calc(5em - 3px)"><div></div></div></div>
+<div><div style="max-width: calc(5em - 0%)"><div></div></div></div>
+<div><div style="max-width: calc(50%)"><div></div></div></div>
+<div><div style="max-width: calc(50px)"><div></div></div></div>
+<div><div style="max-width: calc(25% + 25%)"><div></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-min-height-block-1.html b/layout/reftests/w3c-css/submitted/values3/calc-min-height-block-1.html
new file mode 100644
index 000000000..ed60d9a03
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-min-height-block-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for min-height:calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-height-block-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 }
+body > div { float: left; height: 100px; width: 1px; }
+body > div > div { background: blue }
+
+/* for auto-height tests */
+body > div > div > div > div { height: 10px }
+</style>
+</head>
+<body>
+
+<!-- tests with a fixed-height container -->
+<div><div style="min-height: calc(50px)"></div></div>
+<div><div style="min-height: calc(50%)"></div></div>
+<div><div style="min-height: calc(25px + 50%)"></div></div>
+<div><div style="min-height: calc(150% / 2 - 30px)"></div></div>
+<div><div style="min-height: calc(40px + 10% - 20% / 2)"></div></div>
+<div><div style="min-height: calc(40px - 10%)"></div></div>
+
+<!-- tests with an auto-height container -->
+<div><div><div style="min-height: calc(50px)"><div></div></div></div></div>
+<div><div><div style="min-height: calc(50%)"><div></div></div></div></div>
+<div><div><div style="min-height: calc(25px + 50%)"><div></div></div></div></div>
+<div><div><div style="min-height: calc(150% / 2 - 30px)"><div></div></div></div></div>
+<div><div><div style="min-height: calc(40px + 10% - 20% / 2)"><div></div></div></div></div>
+<div><div><div style="min-height: calc(40px - 10%)"><div></div></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-min-width-block-1.html b/layout/reftests/w3c-css/submitted/values3/calc-min-width-block-1.html
new file mode 100644
index 000000000..8195f6859
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-min-width-block-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: min-width: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-width-block-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { width: 500px }
+p { background: green; color: white; margin: 1px 0; font-size: 10px; width: 0 }
+
+</style>
+</head>
+<body>
+
+<p style="min-width: calc(50% - 3px)">50% - 3px</p>
+<p style="min-width: calc(25% - 3px + 25%)">25% - 3px + 25%</p>
+<p style="min-width: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p>
+<p style="min-width: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p>
+<p style="min-width: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p>
+<p style="min-width: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p>
+<p style="min-width: calc(30% + 20%)">30% + 20%</p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-min-width-block-intrinsic-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-min-width-block-intrinsic-1-ref.html
new file mode 100644
index 000000000..82fae9717
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-min-width-block-intrinsic-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: intrinsic width of min-width: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
+
+</style>
+</head>
+<body>
+
+<div style="width: 1px"></div>
+<div style="width: 47px"></div>
+<div style="width: 1px"></div>
+<div style="width: 1px"></div>
+<div style="width: 50px"></div>
+<div style="width: 1px"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-min-width-block-intrinsic-1.html b/layout/reftests/w3c-css/submitted/values3/calc-min-width-block-intrinsic-1.html
new file mode 100644
index 000000000..edc564331
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-min-width-block-intrinsic-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: intrinsic width of min-width: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-min-width-block-intrinsic-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { font-size: 10px }
+body > div { float: left; clear: left;
+             margin: 0 0 1px 0; background: blue; color: white; height: 5px }
+body > div > div { width: 1px }
+body > div > div > div { width: 200px }
+
+</style>
+</head>
+<body>
+
+<div><div style="min-width: calc(50% - 3px)"><div></div></div></div>
+<div><div style="min-width: calc(5em - 3px)"><div></div></div></div>
+<div><div style="min-width: calc(5em - 0%)"><div></div></div></div>
+<div><div style="min-width: calc(50%)"><div></div></div></div>
+<div><div style="min-width: calc(50px)"><div></div></div></div>
+<div><div style="min-width: calc(25% + 25%)"><div></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-bottom-1.html b/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-bottom-1.html
new file mode 100644
index 000000000..b3bf1ccb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-bottom-1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for bottom:calc() on absolutely positioned elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-offsets-absolute-top-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 }
+body > div { float: left; margin-top: -90px; height: 100px; margin-bottom: 90px; width: 3px; position: relative }
+div[style] { background: blue; position: absolute; height: 10px; width: 3px }
+div.space { height: 100px }
+</style>
+</head>
+<body>
+
+<!-- tests with a fixed-height container -->
+<div><div style="bottom: calc(-50px)"></div></div>
+<div><div style="bottom: calc(-50%)"></div></div>
+<div><div style="bottom: calc(-25px - 50%)"></div></div>
+<div><div style="bottom: calc(-150% / 2 + 30px)"></div></div>
+<div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div></div>
+<div><div style="bottom: calc(-40px + 10%)"></div></div>
+
+<!-- tests with an auto-bottom container -->
+<div><div><div style="bottom: calc(-50px)"></div><div class="space"></div></div></div>
+<div><div><div style="bottom: calc(-50%)"></div><div class="space"></div></div></div>
+<div><div><div style="bottom: calc(-25px - 50%)"></div><div class="space"></div></div></div>
+<div><div><div style="bottom: calc(-150% / 2 + 30px)"></div><div class="space"></div></div></div>
+<div><div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div><div class="space"></div></div></div>
+<div><div><div style="bottom: calc(-40px + 10%)"></div><div class="space"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-left-1.html b/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-left-1.html
new file mode 100644
index 000000000..8ee19c7a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-left-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for left:calc() on absolutely positioned elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-offsets-relative-left-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 100px; width: 200px }
+body > div { height: 3px; position: relative }
+div[style] { background: blue; position: absolute; height: 3px; width: 100px }
+</style>
+</head>
+<body>
+
+<div><div style="left: calc(50px)"></div></div>
+<div><div style="left: calc(-25%)"></div></div>
+<div><div style="left: calc(25px + 25%)"></div></div>
+<div><div style="left: calc(-75% / 2 + 30px)"></div></div>
+<div><div style="left: calc(40px + 5% - 10% / 2)"></div></div>
+<div><div style="left: calc(5% - 40px)"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-right-1.html b/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-right-1.html
new file mode 100644
index 000000000..3fcdba055
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-right-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for right:calc() on absolutely positioned elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-offsets-relative-left-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0; width: 200px }
+body > div { height: 3px; position: relative }
+div[style] { background: blue; position: absolute; height: 3px; width: 100px }
+</style>
+</head>
+<body>
+
+<div><div style="right: calc(-50px)"></div></div>
+<div><div style="right: calc(25%)"></div></div>
+<div><div style="right: calc(-25px - 25%)"></div></div>
+<div><div style="right: calc(75% / 2 - 30px)"></div></div>
+<div><div style="right: calc(-40px - 5% + 10% / 2)"></div></div>
+<div><div style="right: calc(-5% + 40px)"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-top-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-top-1-ref.html
new file mode 100644
index 000000000..5c6c06364
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-top-1-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test for top:calc() on absolutely positioned elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 }
+body > div { float: left; height: 100px; width: 3px; }
+div[style] { background: blue; position: relative; height: 10px; }
+</style>
+</head>
+<body>
+
+<!-- tests with a fixed-height container -->
+<div><div style="top: 50px"></div></div>
+<div><div style="top: 50px"></div></div>
+<div><div style="top: 75px"></div></div>
+<div><div style="top: 45px"></div></div>
+<div><div style="top: 40px"></div></div>
+<div><div style="top: 30px"></div></div>
+
+<!-- tests with an auto-top container -->
+<div><div style="top: 50px"></div></div>
+<div><div style="top: 50px"></div></div>
+<div><div style="top: 75px"></div></div>
+<div><div style="top: 45px"></div></div>
+<div><div style="top: 40px"></div></div>
+<div><div style="top: 30px"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-top-1.html b/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-top-1.html
new file mode 100644
index 000000000..7ac2dfe2a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-offsets-absolute-top-1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for top:calc() on absolutely positioned elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-offsets-absolute-top-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 }
+body > div { float: left; height: 100px; width: 3px; position: relative }
+div[style] { background: blue; position: absolute; height: 10px; width: 3px }
+div.space { height: 100px }
+</style>
+</head>
+<body>
+
+<!-- tests with a fixed-height container -->
+<div><div style="top: calc(50px)"></div></div>
+<div><div style="top: calc(50%)"></div></div>
+<div><div style="top: calc(25px + 50%)"></div></div>
+<div><div style="top: calc(150% / 2 - 30px)"></div></div>
+<div><div style="top: calc(40px + 10% - 20% / 2)"></div></div>
+<div><div style="top: calc(40px - 10%)"></div></div>
+
+<!-- tests with an auto-top container -->
+<div><div><div style="top: calc(50px)"></div><div class="space"></div></div></div>
+<div><div><div style="top: calc(50%)"></div><div class="space"></div></div></div>
+<div><div><div style="top: calc(25px + 50%)"></div><div class="space"></div></div></div>
+<div><div><div style="top: calc(150% / 2 - 30px)"></div><div class="space"></div></div></div>
+<div><div><div style="top: calc(40px + 10% - 20% / 2)"></div><div class="space"></div></div></div>
+<div><div><div style="top: calc(40px - 10%)"></div><div class="space"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-bottom-1.html b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-bottom-1.html
new file mode 100644
index 000000000..1f121ac54
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-bottom-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for bottom:calc() on relatively positioned elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-offsets-relative-top-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 }
+body > div { float: left; height: 100px; width: 3px; }
+div[style] { background: blue; position: relative; height: 10px; }
+</style>
+</head>
+<body>
+
+<!-- tests with a fixed-height container -->
+<div><div style="bottom: calc(-50px)"></div></div>
+<div><div style="bottom: calc(-50%)"></div></div>
+<div><div style="bottom: calc(-25px - 50%)"></div></div>
+<div><div style="bottom: calc(-150% / 2 + 30px)"></div></div>
+<div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div></div>
+<div><div style="bottom: calc(-40px + 10%)"></div></div>
+
+<!-- tests with an auto-top container -->
+<div><div><div style="bottom: calc(-50px)"></div></div></div>
+<div><div><div style="bottom: calc(-50%)"></div></div></div>
+<div><div><div style="bottom: calc(-25px - 50%)"></div></div></div>
+<div><div><div style="bottom: calc(-150% / 2 + 30px)"></div></div></div>
+<div><div><div style="bottom: calc(-40px - 10% + 20% / 2)"></div></div></div>
+<div><div><div style="bottom: calc(-40px + 10%)"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-left-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-left-1-ref.html
new file mode 100644
index 000000000..82ab51df0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-left-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test for left:calc() on relatively positioned elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 100px; width: 100px }
+div[style] { background: blue; position: relative; height: 3px; }
+</style>
+</head>
+<body>
+
+<div style="left: 50px"></div>
+<div style="left: -50px"></div>
+<div style="left: 75px"></div>
+<div style="left: -45px"></div>
+<div style="left: 40px"></div>
+<div style="left: -30px"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-left-1.html b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-left-1.html
new file mode 100644
index 000000000..b091ca550
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-left-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for left:calc() on relatively positioned elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-offsets-relative-left-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 100px; width: 100px }
+div[style] { background: blue; position: relative; height: 3px; }
+</style>
+</head>
+<body>
+
+<div style="left: calc(50px)"></div>
+<div style="left: calc(-50%)"></div>
+<div style="left: calc(25px + 50%)"></div>
+<div style="left: calc(-150% / 2 + 30px)"></div>
+<div style="left: calc(40px + 10% - 20% / 2)"></div>
+<div style="left: calc(10% - 40px)"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-right-1.html b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-right-1.html
new file mode 100644
index 000000000..28e154777
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-right-1.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for right:calc() on relatively positioned elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-offsets-relative-left-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 100px; width: 100px }
+div[style] { background: blue; position: relative; height: 3px; }
+</style>
+</head>
+<body>
+
+<div style="right: calc(-50px)"></div>
+<div style="right: calc(50%)"></div>
+<div style="right: calc(-25px - 50%)"></div>
+<div style="right: calc(150% / 2 - 30px)"></div>
+<div style="right: calc(-40px - 10% + 20% / 2)"></div>
+<div style="right: calc(-10% + 40px)"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-top-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-top-1-ref.html
new file mode 100644
index 000000000..db6785b29
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-top-1-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test for top:calc() on relatively positioned elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 }
+body > div { float: left; height: 100px; width: 3px; }
+div[style] { background: blue; position: relative; height: 10px; }
+</style>
+</head>
+<body>
+
+<!-- tests with a fixed-height container -->
+<div><div style="top: 50px"></div></div>
+<div><div style="top: 50px"></div></div>
+<div><div style="top: 75px"></div></div>
+<div><div style="top: 45px"></div></div>
+<div><div style="top: 40px"></div></div>
+<div><div style="top: 30px"></div></div>
+
+<!-- tests with an auto-top container -->
+<div><div style="top: 50px"></div></div>
+<div><div style="top: 0px"></div></div>
+<div><div style="top: 0px"></div></div>
+<div><div style="top: 0px"></div></div>
+<div><div style="top: 0px"></div></div>
+<div><div style="top: 0px"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-top-1.html b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-top-1.html
new file mode 100644
index 000000000..f2e9e4d9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-offsets-relative-top-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for top:calc() on relatively positioned elements</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-offsets-relative-top-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+body { margin: 0 }
+body > div { float: left; height: 100px; width: 3px; }
+div[style] { background: blue; position: relative; height: 10px; }
+</style>
+</head>
+<body>
+
+<!-- tests with a fixed-height container -->
+<div><div style="top: calc(50px)"></div></div>
+<div><div style="top: calc(50%)"></div></div>
+<div><div style="top: calc(25px + 50%)"></div></div>
+<div><div style="top: calc(150% / 2 - 30px)"></div></div>
+<div><div style="top: calc(40px + 10% - 20% / 2)"></div></div>
+<div><div style="top: calc(40px - 10%)"></div></div>
+
+<!-- tests with an auto-top container -->
+<div><div><div style="top: calc(50px)"></div></div></div>
+<div><div><div style="top: calc(50%)"></div></div></div>
+<div><div><div style="top: calc(25px + 50%)"></div></div></div>
+<div><div><div style="top: calc(150% / 2 - 30px)"></div></div></div>
+<div><div><div style="top: calc(40px + 10% - 20% / 2)"></div></div></div>
+<div><div><div style="top: calc(40px - 10%)"></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-padding-block-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-padding-block-1-ref.html
new file mode 100644
index 000000000..ca472b38e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-padding-block-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test of padding-*: calc()</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { width: 500px }
+div { border: medium solid green }
+p { background: yellow; margin: 0 }
+
+</style>
+</head>
+<body>
+
+<div style="padding: 15px 0 0 0"><p>paragraph with padding</p></div>
+<div style="padding: 0 15px 0 0"><p>paragraph with padding</p></div>
+<div style="padding: 0 0 15px 0"><p>paragraph with padding</p></div>
+<div style="padding: 0 0 0 15px"><p>paragraph with padding</p></div>
+<div style="padding: 25px 25px 25px 25px"><p>paragraph with padding</p></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-padding-block-1.html b/layout/reftests/w3c-css/submitted/values3/calc-padding-block-1.html
new file mode 100644
index 000000000..97dbaeb2f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-padding-block-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test of padding-*: calc()</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-padding-block-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { width: 500px }
+div { border: medium solid green }
+p { background: yellow; margin: 0 }
+
+</style>
+</head>
+<body>
+
+<div style="padding: calc(10px + 1%) 0 0 0"><p>paragraph with padding</p></div>
+<div style="padding: 0 calc(10px + 1%) 0 0"><p>paragraph with padding</p></div>
+<div style="padding: 0 0 calc(10px + 1%) 0"><p>paragraph with padding</p></div>
+<div style="padding: 0 0 0 calc(10px + 1%)"><p>paragraph with padding</p></div>
+<div style="padding: calc(30px - 1%)"><p>paragraph with padding</p></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-text-indent-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-text-indent-1-ref.html
new file mode 100644
index 000000000..4631c0021
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-text-indent-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: text-indent: calc()</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { width: 500px }
+p { font-size: 10px }
+
+</style>
+</head>
+<body>
+
+<p style="text-indent: 247px">50% - 3px</p>
+<p style="text-indent: 247px">25% - 3px + 25%</p>
+<p style="text-indent: 247px">25% - 3px + 12.5% * 2</p>
+<p style="text-indent: 247px">25% - 3px + 12.5%*2</p>
+<p style="text-indent: 247px">25% - 3px + 2*12.5%</p>
+<p style="text-indent: 247px">25% - 3px + 2 * 12.5%</p>
+<p style="text-indent: 250px">30% + 20%</p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-text-indent-1.html b/layout/reftests/w3c-css/submitted/values3/calc-text-indent-1.html
new file mode 100644
index 000000000..dec795b2d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-text-indent-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: text-indent: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-text-indent-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { width: 500px }
+p { font-size: 10px }
+
+</style>
+</head>
+<body>
+
+<p style="text-indent: calc(50% - 3px)">50% - 3px</p>
+<p style="text-indent: calc(25% - 3px + 25%)">25% - 3px + 25%</p>
+<p style="text-indent: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p>
+<p style="text-indent: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p>
+<p style="text-indent: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p>
+<p style="text-indent: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p>
+<p style="text-indent: calc(30% + 20%)">30% + 20%</p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-text-indent-intrinsic-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-text-indent-intrinsic-1-ref.html
new file mode 100644
index 000000000..93c8c8997
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-text-indent-intrinsic-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: intrinsic width of text-indent: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
+
+</style>
+</head>
+<body>
+
+<div style="width: 10px"></div>
+<div style="width: 57px"></div>
+<div style="width: 10px"></div>
+<div style="width: 10px"></div>
+<div style="width: 60px"></div>
+<div style="width: 10px"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-text-indent-intrinsic-1.html b/layout/reftests/w3c-css/submitted/values3/calc-text-indent-intrinsic-1.html
new file mode 100644
index 000000000..b60a7e949
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-text-indent-intrinsic-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: intrinsic width of text-indent: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-text-indent-intrinsic-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { font-size: 10px }
+div { float: left; clear: left;
+       margin: 0 0 1px 0; background: blue; color: white; height: 5px }
+span { display: inline-block; width: 10px }
+
+</style>
+</head>
+<body>
+
+<div style="text-indent: calc(50% - 3px)"><span></span></div>
+<div style="text-indent: calc(5em - 3px)"><span></span></div>
+<div style="text-indent: calc(5em - 0%)"><span></span></div>
+<div style="text-indent: calc(50%)"><span></span></div>
+<div style="text-indent: calc(50px)"><span></span></div>
+<div style="text-indent: calc(25% + 25%)"><span></span></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-transform-origin-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-transform-origin-1-ref.html
new file mode 100644
index 000000000..d27da3efe
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-transform-origin-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test for calc() on transform-origin</title>
+  <link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { margin: 100px }
+
+p {
+    height: 50px; width: 200px;
+    background: yellow;
+    transform: rotate(15deg);
+}
+
+#one { transform-origin: 150px 20px; }
+#two { transform-origin: -22px -35px; }
+
+</style>
+</head>
+<body>
+<p id="one">hello</p>
+<p id="two">hello</p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-transform-origin-1.html b/layout/reftests/w3c-css/submitted/values3/calc-transform-origin-1.html
new file mode 100644
index 000000000..bbe70749d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-transform-origin-1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for calc() on transform-origin</title>
+  <link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-transform-origin-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { margin: 100px }
+
+p {
+    height: 50px; width: 200px;
+    background: yellow;
+    transform: rotate(15deg);
+}
+
+#one { transform-origin: calc(50px + 50%) calc(100% - 30px); }
+#two { transform-origin: calc(-12.5% + 3px) calc(-10px - 50%); }
+
+</style>
+</head>
+<body>
+<p id="one">hello</p>
+<p id="two">hello</p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-vertical-align-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-vertical-align-1-ref.html
new file mode 100644
index 000000000..8e6d42425
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-vertical-align-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: Test for vertical-align:calc()</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+
+<div style="line-height: 100px; margin-top: 100px">
+  <span>x</span>
+  <span style="vertical-align: 50px">x</span>
+  <span style="vertical-align: 50px">x</span>
+  <span style="vertical-align: 75px">x</span>
+  <span style="vertical-align: 45px">x</span>
+  <span style="vertical-align: 40px">x</span>
+  <span style="vertical-align: 30px">x</span>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-vertical-align-1.html b/layout/reftests/w3c-css/submitted/values3/calc-vertical-align-1.html
new file mode 100644
index 000000000..f612b962e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-vertical-align-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: Test for vertical-align:calc()</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-vertical-align-1-ref.html">
+  <meta name="flags" content="">
+
+<div style="line-height: 100px; margin-top: 100px">
+  <span>x</span>
+  <span style="vertical-align: calc(50px)">x</span>
+  <span style="vertical-align: calc(50%)">x</span>
+  <span style="vertical-align: calc(25px + 50%)">x</span>
+  <span style="vertical-align: calc(150% / 2 - 30px)">x</span>
+  <span style="vertical-align: calc(40px + 10% - 20% / 2)">x</span>
+  <span style="vertical-align: calc(40px - 10%)">x</span>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-width-block-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-width-block-1-ref.html
new file mode 100644
index 000000000..d62da1ad3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-width-block-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: width: calc() and min-width: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { width: 500px }
+p { background: green; color: white; margin: 1px 0; font-size: 10px }
+
+</style>
+</head>
+<body>
+
+<p style="width: 247px">50% - 3px</p>
+<p style="width: 247px">25% - 3px + 25%</p>
+<p style="width: 247px">25% - 3px + 12.5% * 2</p>
+<p style="width: 247px">25% - 3px + 12.5%*2</p>
+<p style="width: 247px">25% - 3px + 2*12.5%</p>
+<p style="width: 247px">25% - 3px + 2 * 12.5%</p>
+<p style="width: 250px">30% + 20%</p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-width-block-1.html b/layout/reftests/w3c-css/submitted/values3/calc-width-block-1.html
new file mode 100644
index 000000000..d261d0398
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-width-block-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: width: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-width-block-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { width: 500px }
+p { background: green; color: white; margin: 1px 0; font-size: 10px }
+
+</style>
+</head>
+<body>
+
+<p style="width: calc(50% - 3px)">50% - 3px</p>
+<p style="width: calc(25% - 3px + 25%)">25% - 3px + 25%</p>
+<p style="width: calc(25% - 3px + 12.5% * 2)">25% - 3px + 12.5% * 2</p>
+<p style="width: calc(25% - 3px + 12.5%*2)">25% - 3px + 12.5%*2</p>
+<p style="width: calc(25% - 3px + 2*12.5%)">25% - 3px + 2*12.5%</p>
+<p style="width: calc(25% - 3px + 2 * 12.5%)">25% - 3px + 2 * 12.5%</p>
+<p style="width: calc(30% + 20%)">30% + 20%</p>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-width-block-intrinsic-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-width-block-intrinsic-1-ref.html
new file mode 100644
index 000000000..e381bbab5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-width-block-intrinsic-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: intrinsic width of width: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body > div { margin: 0 0 1px 0; background: blue; color: white; height: 5px }
+
+</style>
+</head>
+<body>
+
+<div style="width: 200px"></div>
+<div style="width: 47px"></div>
+<div style="width: 200px"></div>
+<div style="width: 200px"></div>
+<div style="width: 50px"></div>
+<div style="width: 200px"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-width-block-intrinsic-1.html b/layout/reftests/w3c-css/submitted/values3/calc-width-block-intrinsic-1.html
new file mode 100644
index 000000000..0c80b960d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-width-block-intrinsic-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: intrinsic width of width: calc() on blocks</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-width-block-intrinsic-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+
+body { font-size: 10px }
+body > div { float: left; clear: left;
+             margin: 0 0 1px 0; background: blue; color: white; height: 5px }
+body > div > div > div { width: 200px }
+
+</style>
+</head>
+<body>
+
+<div><div style="width: calc(50% - 3px)"><div></div></div></div>
+<div><div style="width: calc(5em - 3px)"><div></div></div></div>
+<div><div style="width: calc(5em - 0%)"><div></div></div></div>
+<div><div style="width: calc(50%)"><div></div></div></div>
+<div><div style="width: calc(50px)"><div></div></div></div>
+<div><div style="width: calc(25% + 25%)"><div></div></div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-width-table-auto-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-width-table-auto-1-ref.html
new file mode 100644
index 000000000..62ebd5665
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-width-table-auto-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: width: calc() on table-layout: auto tables</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<table border>
+  <tr>
+    <td style="width: 500px">x</td>
+    <td style="width: 100px">y</td>
+</table>
+<table border>
+  <tr>
+    <td>x</td>
+    <td style="width: 100px">y</td>
+</table>
+<table border>
+  <tr>
+    <td>x</td>
+    <td style="width: 100px">y</td>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-width-table-auto-1.html b/layout/reftests/w3c-css/submitted/values3/calc-width-table-auto-1.html
new file mode 100644
index 000000000..b37c94ec5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-width-table-auto-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: width: calc() on table-layout: auto tables</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-width-table-auto-1-ref.html">
+  <meta name="flags" content="">
+<table border>
+  <tr>
+    <td style="width: calc(500px)">x</td>
+    <td style="width: 100px">y</td>
+</table>
+<table border>
+  <tr>
+    <td style="width: calc(50%)">x</td>
+    <td style="width: 100px">y</td>
+</table>
+<table border>
+  <tr>
+    <td style="width: calc(2 * 10% + 0.5 * 500px)">x</td>
+    <td style="width: 100px">y</td>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-width-table-fixed-1-ref.html b/layout/reftests/w3c-css/submitted/values3/calc-width-table-fixed-1-ref.html
new file mode 100644
index 000000000..1aad9eb16
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-width-table-fixed-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Reference: width: calc() on table-layout: auto tables</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <meta name="flags" content="">
+<style type="text/css">
+table { table-layout: fixed; width: 500px; border-spacing: 0 }
+</style>
+</head>
+<body>
+<table border>
+  <tr>
+    <td style="width: 500px">x</td>
+    <td style="width: 100px">y</td>
+</table>
+<table border>
+  <tr>
+    <td>x</td>
+    <td style="width: 100px">y</td>
+</table>
+<table border>
+  <tr>
+    <td>x</td>
+    <td style="width: 100px">y</td>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/calc-width-table-fixed-1.html b/layout/reftests/w3c-css/submitted/values3/calc-width-table-fixed-1.html
new file mode 100644
index 000000000..05a902217
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/calc-width-table-fixed-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Test: width: calc() on table-layout: auto tables</title>
+  <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+  <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation">
+  <link rel="match" href="calc-width-table-fixed-1-ref.html">
+  <meta name="flags" content="">
+<style type="text/css">
+table { table-layout: fixed; width: 500px; border-spacing: 0 }
+</style>
+</head>
+<body>
+<table border>
+  <tr>
+    <td style="width: calc(500px)">x</td>
+    <td style="width: 100px">y</td>
+</table>
+<table border>
+  <tr>
+    <td style="width: calc(50%)">x</td>
+    <td style="width: 100px">y</td>
+</table>
+<table border>
+  <tr>
+    <td style="width: calc(2 * 10% + 0.5 * 500px)">x</td>
+    <td style="width: 100px">y</td>
+</table>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/values3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/values3/reftest-stylo.list
new file mode 100644
index 000000000..9535b43e9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/reftest-stylo.list
@@ -0,0 +1,33 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== calc-background-linear-gradient-1.html calc-background-linear-gradient-1.html
+== calc-background-image-gradient-1.html calc-background-image-gradient-1.html
+== calc-background-position-1.html calc-background-position-1.html
+== calc-background-size-1.html calc-background-size-1.html
+== calc-border-radius-1.html calc-border-radius-1.html
+== calc-height-block-1.html calc-height-block-1.html
+skip-if(B2G||Mulet) == calc-height-table-1.html calc-height-table-1.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+== calc-margin-block-1.html calc-margin-block-1.html
+== calc-max-height-block-1.html calc-max-height-block-1.html
+== calc-max-width-block-1.html calc-max-width-block-1.html
+== calc-max-width-block-intrinsic-1.html calc-max-width-block-intrinsic-1.html
+== calc-min-height-block-1.html calc-min-height-block-1.html
+== calc-min-width-block-1.html calc-min-width-block-1.html
+== calc-min-width-block-intrinsic-1.html calc-min-width-block-intrinsic-1.html
+== calc-offsets-absolute-bottom-1.html calc-offsets-absolute-bottom-1.html
+== calc-offsets-absolute-left-1.html calc-offsets-absolute-left-1.html
+== calc-offsets-absolute-right-1.html calc-offsets-absolute-right-1.html
+== calc-offsets-absolute-top-1.html calc-offsets-absolute-top-1.html
+== calc-offsets-relative-bottom-1.html calc-offsets-relative-bottom-1.html
+== calc-offsets-relative-left-1.html calc-offsets-relative-left-1.html
+== calc-offsets-relative-right-1.html calc-offsets-relative-right-1.html
+== calc-offsets-relative-top-1.html calc-offsets-relative-top-1.html
+== calc-padding-block-1.html calc-padding-block-1.html
+== calc-text-indent-1.html calc-text-indent-1.html
+== calc-text-indent-intrinsic-1.html calc-text-indent-intrinsic-1.html
+fuzzy-if(skiaContent,1,11) == calc-transform-origin-1.html calc-transform-origin-1.html
+== calc-vertical-align-1.html calc-vertical-align-1.html
+== calc-width-block-1.html calc-width-block-1.html
+== calc-width-block-intrinsic-1.html calc-width-block-intrinsic-1.html
+== calc-width-table-auto-1.html calc-width-table-auto-1.html
+== calc-width-table-fixed-1.html calc-width-table-fixed-1.html
diff --git a/layout/reftests/w3c-css/submitted/values3/reftest.list b/layout/reftests/w3c-css/submitted/values3/reftest.list
new file mode 100644
index 000000000..fb9fa6f27
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/values3/reftest.list
@@ -0,0 +1,31 @@
+== calc-background-linear-gradient-1.html calc-background-linear-gradient-1-ref.html
+== calc-background-image-gradient-1.html calc-background-image-gradient-1-ref.html
+== calc-background-position-1.html calc-background-position-1-ref.html
+== calc-background-size-1.html calc-background-size-1-ref.html
+== calc-border-radius-1.html calc-border-radius-1-ref.html
+== calc-height-block-1.html calc-height-block-1-ref.html
+== calc-height-table-1.html calc-height-table-1-ref.html
+== calc-margin-block-1.html calc-margin-block-1-ref.html
+== calc-max-height-block-1.html calc-max-height-block-1-ref.html
+== calc-max-width-block-1.html calc-width-block-1-ref.html
+== calc-max-width-block-intrinsic-1.html calc-max-width-block-intrinsic-1-ref.html
+== calc-min-height-block-1.html calc-height-block-1-ref.html
+== calc-min-width-block-1.html calc-width-block-1-ref.html
+== calc-min-width-block-intrinsic-1.html calc-min-width-block-intrinsic-1-ref.html
+== calc-offsets-absolute-bottom-1.html calc-offsets-absolute-top-1-ref.html
+== calc-offsets-absolute-left-1.html calc-offsets-relative-left-1-ref.html
+== calc-offsets-absolute-right-1.html calc-offsets-relative-left-1-ref.html
+== calc-offsets-absolute-top-1.html calc-offsets-absolute-top-1-ref.html
+== calc-offsets-relative-bottom-1.html calc-offsets-relative-top-1-ref.html
+== calc-offsets-relative-left-1.html calc-offsets-relative-left-1-ref.html
+== calc-offsets-relative-right-1.html calc-offsets-relative-left-1-ref.html
+== calc-offsets-relative-top-1.html calc-offsets-relative-top-1-ref.html
+== calc-padding-block-1.html calc-padding-block-1-ref.html
+== calc-text-indent-1.html calc-text-indent-1-ref.html
+== calc-text-indent-intrinsic-1.html calc-text-indent-intrinsic-1-ref.html
+fuzzy-if(skiaContent,1,11) == calc-transform-origin-1.html calc-transform-origin-1-ref.html
+== calc-vertical-align-1.html calc-vertical-align-1-ref.html
+== calc-width-block-1.html calc-width-block-1-ref.html
+== calc-width-block-intrinsic-1.html calc-width-block-intrinsic-1-ref.html
+== calc-width-table-auto-1.html calc-width-table-auto-1-ref.html
+== calc-width-table-fixed-1.html calc-width-table-fixed-1-ref.html
diff --git a/layout/reftests/w3c-css/submitted/variables/reftest-stylo.list b/layout/reftests/w3c-css/submitted/variables/reftest-stylo.list
new file mode 100644
index 000000000..20f4dc7d9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/reftest-stylo.list
@@ -0,0 +1,175 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+default-preferences pref(layout.css.variables.enabled,true)
+
+== variable-declaration-01.html variable-declaration-01.html
+== variable-declaration-02.html variable-declaration-02.html
+== variable-declaration-03.html variable-declaration-03.html
+== variable-declaration-04.html variable-declaration-04.html
+== variable-declaration-05.html variable-declaration-05.html
+== variable-declaration-06.html variable-declaration-06.html
+== variable-declaration-07.html variable-declaration-07.html
+== variable-declaration-08.html variable-declaration-08.html
+== variable-declaration-09.html variable-declaration-09.html
+== variable-declaration-10.html variable-declaration-10.html
+== variable-declaration-11.html variable-declaration-11.html
+== variable-declaration-12.html variable-declaration-12.html
+== variable-declaration-13.html variable-declaration-13.html
+== variable-declaration-14.html variable-declaration-14.html
+== variable-declaration-15.html variable-declaration-15.html
+== variable-declaration-16.html variable-declaration-16.html
+== variable-declaration-17.html variable-declaration-17.html
+== variable-declaration-18.html variable-declaration-18.html
+== variable-declaration-19.html variable-declaration-19.html
+== variable-declaration-20.html variable-declaration-20.html
+== variable-declaration-21.html variable-declaration-21.html
+== variable-declaration-22.html variable-declaration-22.html
+== variable-declaration-23.html variable-declaration-23.html
+== variable-declaration-24.html variable-declaration-24.html
+== variable-declaration-25.html variable-declaration-25.html
+== variable-declaration-26.html variable-declaration-26.html
+== variable-declaration-28.html variable-declaration-28.html
+== variable-declaration-29.html variable-declaration-29.html
+== variable-declaration-30.html variable-declaration-30.html
+== variable-declaration-31.html variable-declaration-31.html
+== variable-declaration-32.html variable-declaration-32.html
+== variable-declaration-33.html variable-declaration-33.html
+== variable-declaration-34.html variable-declaration-34.html
+== variable-declaration-35.html variable-declaration-35.html
+== variable-declaration-36.html variable-declaration-36.html
+== variable-declaration-37.html variable-declaration-37.html
+== variable-declaration-38.html variable-declaration-38.html
+== variable-declaration-39.html variable-declaration-39.html
+== variable-declaration-40.html variable-declaration-40.html
+== variable-declaration-41.html variable-declaration-41.html
+== variable-declaration-42.html variable-declaration-42.html
+== variable-declaration-43.html variable-declaration-43.html
+== variable-declaration-44.html variable-declaration-44.html
+== variable-declaration-45.html variable-declaration-45.html
+== variable-declaration-46.html variable-declaration-46.html
+== variable-declaration-47.html variable-declaration-47.html
+== variable-declaration-48.html variable-declaration-48.html
+== variable-declaration-49.html variable-declaration-49.html
+== variable-declaration-50.html variable-declaration-50.html
+== variable-declaration-51.html variable-declaration-51.html
+== variable-declaration-52.html variable-declaration-52.html
+== variable-declaration-53.html variable-declaration-53.html
+== variable-declaration-54.html variable-declaration-54.html
+== variable-declaration-55.html variable-declaration-55.html
+== variable-declaration-56.html variable-declaration-56.html
+== variable-declaration-57.html variable-declaration-57.html
+== variable-declaration-58.html variable-declaration-58.html
+== variable-declaration-59.html variable-declaration-59.html
+== variable-declaration-60.html variable-declaration-60.html
+== variable-external-declaration-01.html variable-external-declaration-01.html
+== variable-external-font-face-01.html variable-external-font-face-01.html
+== variable-external-reference-01.html variable-external-reference-01.html
+== variable-external-supports-01.html variable-external-supports-01.html
+== variable-font-face-01.html variable-font-face-01.html
+== variable-font-face-02.html variable-font-face-02.html
+== variable-reference-01.html variable-reference-01.html
+== variable-reference-02.html variable-reference-02.html
+== variable-reference-03.html variable-reference-03.html
+== variable-reference-04.html variable-reference-04.html
+== variable-reference-05.html variable-reference-05.html
+== variable-reference-06.html variable-reference-06.html
+== variable-reference-07.html variable-reference-07.html
+== variable-reference-08.html variable-reference-08.html
+== variable-reference-09.html variable-reference-09.html
+== variable-reference-10.html variable-reference-10.html
+== variable-reference-11.html variable-reference-11.html
+== variable-reference-12.html variable-reference-12.html
+== variable-reference-13.html variable-reference-13.html
+== variable-reference-14.html variable-reference-14.html
+== variable-reference-15.html variable-reference-15.html
+== variable-reference-16.html variable-reference-16.html
+== variable-reference-17.html variable-reference-17.html
+== variable-reference-18.html variable-reference-18.html
+== variable-reference-19.html variable-reference-19.html
+== variable-reference-20.html variable-reference-20.html
+== variable-reference-21.html variable-reference-21.html
+== variable-reference-22.html variable-reference-22.html
+== variable-reference-23.html variable-reference-23.html
+== variable-reference-24.html variable-reference-24.html
+== variable-reference-25.html variable-reference-25.html
+== variable-reference-26.html variable-reference-26.html
+== variable-reference-27.html variable-reference-27.html
+== variable-reference-28.html variable-reference-28.html
+== variable-reference-29.html variable-reference-29.html
+== variable-reference-30.html variable-reference-30.html
+== variable-reference-31.html variable-reference-31.html
+== variable-reference-32.html variable-reference-32.html
+== variable-reference-33.html variable-reference-33.html
+== variable-reference-34.html variable-reference-34.html
+== variable-reference-35.html variable-reference-35.html
+== variable-reference-36.html variable-reference-36.html
+== variable-reference-37.html variable-reference-37.html
+== variable-reference-38.html variable-reference-38.html
+== variable-reference-39.html variable-reference-39.html
+== variable-reference-40.html variable-reference-40.html
+== variable-supports-01.html variable-supports-01.html
+== variable-supports-02.html variable-supports-02.html
+== variable-supports-03.html variable-supports-03.html
+== variable-supports-04.html variable-supports-04.html
+== variable-supports-05.html variable-supports-05.html
+== variable-supports-06.html variable-supports-06.html
+== variable-supports-07.html variable-supports-07.html
+== variable-supports-08.html variable-supports-08.html
+== variable-supports-09.html variable-supports-09.html
+== variable-supports-10.html variable-supports-10.html
+== variable-supports-11.html variable-supports-11.html
+== variable-supports-12.html variable-supports-12.html
+== variable-supports-13.html variable-supports-13.html
+== variable-supports-14.html variable-supports-14.html
+== variable-supports-15.html variable-supports-15.html
+== variable-supports-16.html variable-supports-16.html
+== variable-supports-17.html variable-supports-17.html
+== variable-supports-18.html variable-supports-18.html
+== variable-supports-19.html variable-supports-19.html
+== variable-supports-20.html variable-supports-20.html
+== variable-supports-21.html variable-supports-21.html
+== variable-supports-22.html variable-supports-22.html
+== variable-supports-23.html variable-supports-23.html
+== variable-supports-24.html variable-supports-24.html
+== variable-supports-25.html variable-supports-25.html
+== variable-supports-26.html variable-supports-26.html
+== variable-supports-27.html variable-supports-27.html
+== variable-supports-28.html variable-supports-28.html
+== variable-supports-29.html variable-supports-29.html
+== variable-supports-30.html variable-supports-30.html
+== variable-supports-31.html variable-supports-31.html
+== variable-supports-32.html variable-supports-32.html
+== variable-supports-33.html variable-supports-33.html
+== variable-supports-34.html variable-supports-34.html
+== variable-supports-35.html variable-supports-35.html
+== variable-supports-36.html variable-supports-36.html
+== variable-supports-37.html variable-supports-37.html
+== variable-supports-38.html variable-supports-38.html
+== variable-supports-39.html variable-supports-39.html
+== variable-supports-40.html variable-supports-40.html
+== variable-supports-41.html variable-supports-41.html
+== variable-supports-42.html variable-supports-42.html
+== variable-supports-43.html variable-supports-43.html
+== variable-supports-44.html variable-supports-44.html
+== variable-supports-45.html variable-supports-45.html
+== variable-supports-46.html variable-supports-46.html
+== variable-supports-47.html variable-supports-47.html
+== variable-supports-48.html variable-supports-48.html
+== variable-supports-49.html variable-supports-49.html
+== variable-supports-50.html variable-supports-50.html
+== variable-supports-51.html variable-supports-51.html
+== variable-supports-52.html variable-supports-52.html
+== variable-supports-53.html variable-supports-53.html
+== variable-supports-54.html variable-supports-54.html
+== variable-supports-55.html variable-supports-55.html
+== variable-supports-56.html variable-supports-56.html
+== variable-supports-57.html variable-supports-57.html
+== variable-supports-58.html variable-supports-58.html
+== variable-supports-59.html variable-supports-59.html
+== variable-supports-60.html variable-supports-60.html
+== variable-supports-61.html variable-supports-61.html
+== variable-supports-62.html variable-supports-62.html
+== variable-supports-63.html variable-supports-63.html
+== variable-supports-64.html variable-supports-64.html
+== variable-supports-65.html variable-supports-65.html
+== variable-supports-66.html variable-supports-66.html
+== variable-supports-67.html variable-supports-67.html
diff --git a/layout/reftests/w3c-css/submitted/variables/reftest.list b/layout/reftests/w3c-css/submitted/variables/reftest.list
new file mode 100644
index 000000000..7c07a7c71
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/reftest.list
@@ -0,0 +1,174 @@
+default-preferences pref(layout.css.variables.enabled,true)
+
+== variable-declaration-01.html support/color-green-ref.html
+== variable-declaration-02.html support/color-green-ref.html
+== variable-declaration-03.html support/color-green-ref.html
+== variable-declaration-04.html support/color-green-ref.html
+== variable-declaration-05.html support/color-green-ref.html
+== variable-declaration-06.html support/color-green-ref.html
+== variable-declaration-07.html support/color-green-ref.html
+== variable-declaration-08.html support/color-green-ref.html
+== variable-declaration-09.html support/color-green-ref.html
+== variable-declaration-10.html support/color-green-ref.html
+== variable-declaration-11.html support/color-green-ref.html
+== variable-declaration-12.html support/color-green-ref.html
+== variable-declaration-13.html support/color-green-ref.html
+== variable-declaration-14.html support/color-green-ref.html
+== variable-declaration-15.html variable-declaration-15-ref.html
+== variable-declaration-16.html variable-declaration-16-ref.html
+== variable-declaration-17.html variable-declaration-17-ref.html
+== variable-declaration-18.html variable-declaration-18-ref.html
+== variable-declaration-19.html support/color-green-ref.html
+== variable-declaration-20.html support/color-green-ref.html
+== variable-declaration-21.html support/color-green-ref.html
+== variable-declaration-22.html support/color-green-ref.html
+== variable-declaration-23.html support/color-green-ref.html
+== variable-declaration-24.html support/color-green-ref.html
+== variable-declaration-25.html support/color-green-ref.html
+== variable-declaration-26.html support/color-green-ref.html
+== variable-declaration-28.html support/color-green-ref.html
+== variable-declaration-29.html support/color-green-ref.html
+== variable-declaration-30.html support/color-green-ref.html
+== variable-declaration-31.html support/color-green-ref.html
+== variable-declaration-32.html support/color-green-ref.html
+== variable-declaration-33.html support/color-green-ref.html
+== variable-declaration-34.html support/color-green-ref.html
+== variable-declaration-35.html support/color-green-ref.html
+== variable-declaration-36.html support/color-green-ref.html
+== variable-declaration-37.html support/color-green-ref.html
+== variable-declaration-38.html support/color-green-ref.html
+== variable-declaration-39.html support/color-green-ref.html
+== variable-declaration-40.html support/color-green-ref.html
+== variable-declaration-41.html support/color-green-ref.html
+== variable-declaration-42.html support/color-green-ref.html
+== variable-declaration-43.html support/color-green-ref.html
+== variable-declaration-44.html support/color-green-ref.html
+== variable-declaration-45.html support/color-green-ref.html
+== variable-declaration-46.html support/color-green-ref.html
+== variable-declaration-47.html support/color-green-ref.html
+== variable-declaration-48.html support/color-green-ref.html
+== variable-declaration-49.html support/color-green-ref.html
+== variable-declaration-50.html support/color-green-ref.html
+== variable-declaration-51.html support/color-green-ref.html
+== variable-declaration-52.html support/color-green-ref.html
+== variable-declaration-53.html support/color-green-ref.html
+== variable-declaration-54.html support/color-green-ref.html
+== variable-declaration-55.html support/color-green-ref.html
+== variable-declaration-56.html support/color-green-ref.html
+== variable-declaration-57.html support/color-green-ref.html
+== variable-declaration-58.html support/color-green-ref.html
+== variable-declaration-59.html support/color-green-ref.html
+== variable-declaration-60.html support/color-green-ref.html
+== variable-external-declaration-01.html support/color-green-ref.html
+== variable-external-font-face-01.html variable-external-font-face-01-ref.html
+== variable-external-reference-01.html support/color-green-ref.html
+== variable-external-supports-01.html support/color-green-ref.html
+== variable-font-face-01.html variable-font-face-01-ref.html
+== variable-font-face-02.html variable-font-face-02-ref.html
+== variable-reference-01.html support/color-green-ref.html
+== variable-reference-02.html support/color-green-ref.html
+== variable-reference-03.html support/color-green-ref.html
+== variable-reference-04.html support/color-green-ref.html
+== variable-reference-05.html support/color-green-ref.html
+== variable-reference-06.html support/color-green-ref.html
+== variable-reference-07.html support/color-green-ref.html
+== variable-reference-08.html support/color-green-ref.html
+== variable-reference-09.html support/color-green-ref.html
+== variable-reference-10.html support/color-green-ref.html
+== variable-reference-11.html support/color-green-ref.html
+== variable-reference-12.html variable-reference-12-ref.html
+== variable-reference-13.html support/color-green-ref.html
+== variable-reference-14.html support/color-green-ref.html
+== variable-reference-15.html support/color-green-ref.html
+== variable-reference-16.html support/color-green-ref.html
+== variable-reference-17.html support/color-green-ref.html
+== variable-reference-18.html support/color-green-ref.html
+== variable-reference-19.html support/color-green-ref.html
+== variable-reference-20.html support/color-green-ref.html
+== variable-reference-21.html support/color-green-ref.html
+== variable-reference-22.html support/color-green-ref.html
+== variable-reference-23.html support/color-green-ref.html
+== variable-reference-24.html support/color-green-ref.html
+== variable-reference-25.html support/color-green-ref.html
+== variable-reference-26.html support/color-green-ref.html
+== variable-reference-27.html support/color-green-ref.html
+== variable-reference-28.html support/color-green-ref.html
+== variable-reference-29.html support/color-green-ref.html
+== variable-reference-30.html support/color-green-ref.html
+== variable-reference-31.html support/color-green-ref.html
+== variable-reference-32.html support/color-green-ref.html
+== variable-reference-33.html support/color-green-ref.html
+== variable-reference-34.html support/color-green-ref.html
+== variable-reference-35.html support/color-green-ref.html
+== variable-reference-36.html variable-reference-36-ref.html
+== variable-reference-37.html variable-reference-37-ref.html
+== variable-reference-38.html variable-reference-38-ref.html
+== variable-reference-39.html support/color-green-ref.html
+== variable-reference-40.html variable-reference-40-ref.html
+== variable-supports-01.html support/color-green-ref.html
+== variable-supports-02.html support/color-green-ref.html
+== variable-supports-03.html support/color-green-ref.html
+== variable-supports-04.html support/color-green-ref.html
+== variable-supports-05.html support/color-green-ref.html
+== variable-supports-06.html support/color-green-ref.html
+== variable-supports-07.html support/color-green-ref.html
+== variable-supports-08.html support/color-green-ref.html
+== variable-supports-09.html support/color-green-ref.html
+== variable-supports-10.html support/color-green-ref.html
+== variable-supports-11.html support/color-green-ref.html
+== variable-supports-12.html support/color-green-ref.html
+== variable-supports-13.html support/color-green-ref.html
+== variable-supports-14.html support/color-green-ref.html
+== variable-supports-15.html support/color-green-ref.html
+== variable-supports-16.html support/color-green-ref.html
+== variable-supports-17.html support/color-green-ref.html
+== variable-supports-18.html support/color-green-ref.html
+== variable-supports-19.html support/color-green-ref.html
+== variable-supports-20.html support/color-green-ref.html
+== variable-supports-21.html support/color-green-ref.html
+== variable-supports-22.html support/color-green-ref.html
+== variable-supports-23.html support/color-green-ref.html
+== variable-supports-24.html support/color-green-ref.html
+== variable-supports-25.html support/color-green-ref.html
+== variable-supports-26.html support/color-green-ref.html
+== variable-supports-27.html support/color-green-ref.html
+== variable-supports-28.html support/color-green-ref.html
+== variable-supports-29.html support/color-green-ref.html
+== variable-supports-30.html support/color-green-ref.html
+== variable-supports-31.html support/color-green-ref.html
+== variable-supports-32.html support/color-green-ref.html
+== variable-supports-33.html support/color-green-ref.html
+== variable-supports-34.html support/color-green-ref.html
+== variable-supports-35.html support/color-green-ref.html
+== variable-supports-36.html support/color-green-ref.html
+== variable-supports-37.html support/color-green-ref.html
+== variable-supports-38.html support/color-green-ref.html
+== variable-supports-39.html support/color-green-ref.html
+== variable-supports-40.html support/color-green-ref.html
+== variable-supports-41.html support/color-green-ref.html
+== variable-supports-42.html support/color-green-ref.html
+== variable-supports-43.html support/color-green-ref.html
+== variable-supports-44.html support/color-green-ref.html
+== variable-supports-45.html support/color-green-ref.html
+== variable-supports-46.html support/color-green-ref.html
+== variable-supports-47.html support/color-green-ref.html
+== variable-supports-48.html support/color-green-ref.html
+== variable-supports-49.html support/color-green-ref.html
+== variable-supports-50.html support/color-green-ref.html
+== variable-supports-51.html support/color-green-ref.html
+== variable-supports-52.html support/color-green-ref.html
+== variable-supports-53.html support/color-green-ref.html
+== variable-supports-54.html support/color-green-ref.html
+== variable-supports-55.html support/color-green-ref.html
+== variable-supports-56.html support/color-green-ref.html
+== variable-supports-57.html support/color-green-ref.html
+== variable-supports-58.html support/color-green-ref.html
+== variable-supports-59.html support/color-green-ref.html
+== variable-supports-60.html support/color-green-ref.html
+== variable-supports-61.html support/color-green-ref.html
+== variable-supports-62.html support/color-green-ref.html
+== variable-supports-63.html support/color-green-ref.html
+== variable-supports-64.html support/color-green-ref.html
+== variable-supports-65.html support/color-green-ref.html
+== variable-supports-66.html support/color-green-ref.html
+== variable-supports-67.html support/color-green-ref.html
diff --git a/layout/reftests/w3c-css/submitted/variables/support/Ahem.ttf b/layout/reftests/w3c-css/submitted/variables/support/Ahem.ttf
new file mode 100644
index 000000000..ac81cb031
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/Ahem.ttf
diff --git a/layout/reftests/w3c-css/submitted/variables/support/ahem.css b/layout/reftests/w3c-css/submitted/variables/support/ahem.css
new file mode 100644
index 000000000..82ee46679
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Ahem";
+  src: url(./Ahem.ttf);
+}
diff --git a/layout/reftests/w3c-css/submitted/variables/support/color-green-ref.html b/layout/reftests/w3c-css/submitted/variables/support/color-green-ref.html
new file mode 100644
index 000000000..0eabe58c8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/color-green-ref.html
@@ -0,0 +1,13 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<style>
+p {
+  color: green;
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/support/external-variable-declaration.css b/layout/reftests/w3c-css/submitted/variables/support/external-variable-declaration.css
new file mode 100644
index 000000000..9ba1b9d32
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-declaration.css
@@ -0,0 +1,5 @@
+p {
+  color: red;
+  --a: green;
+  color: var(--a);
+}
diff --git a/layout/reftests/w3c-css/submitted/variables/support/external-variable-font-face.css b/layout/reftests/w3c-css/submitted/variables/support/external-variable-font-face.css
new file mode 100644
index 000000000..87f0609ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-font-face.css
@@ -0,0 +1,15 @@
+@font-face {
+  --a: MyTestFontName;
+  font-family: var(--a);
+  src: url(./Ahem.ttf);
+}
+@font-face {
+  font-family: MyTestFontName2;
+  src: url(./Ahem.ttf);
+}
+#a {
+  font-family: MyTestFontName, serif;
+}
+#b {
+  font-family: MyTestFontName2, serif;
+}
diff --git a/layout/reftests/w3c-css/submitted/variables/support/external-variable-reference.css b/layout/reftests/w3c-css/submitted/variables/support/external-variable-reference.css
new file mode 100644
index 000000000..0c697fdcf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-reference.css
@@ -0,0 +1,6 @@
+:root {
+  --a: green;
+}
+p {
+  color: var(--a);
+}
diff --git a/layout/reftests/w3c-css/submitted/variables/support/external-variable-supports.css b/layout/reftests/w3c-css/submitted/variables/support/external-variable-supports.css
new file mode 100644
index 000000000..96582bfd8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/support/external-variable-supports.css
@@ -0,0 +1,4 @@
+body { color: red; }
+@supports (color:var(--a)) {
+  p { color: green; }
+}
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-01.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-01.html
new file mode 100644
index 000000000..8c3ff421c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-01.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable consisting of a single token preceded by white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-02.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-02.html
new file mode 100644
index 000000000..4ee52b586
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-02.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable consisting of a single token with no preceding white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a:green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-03.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-03.html
new file mode 100644
index 000000000..50aa2f358
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-03.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that references another variable.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: var(--b);
+  --b: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-04.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-04.html
new file mode 100644
index 000000000..52d5d3148
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-04.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable consisting of a variable reference followed by white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: var(--b) ;
+  --b: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-05.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-05.html
new file mode 100644
index 000000000..0403bcaec
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-05.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable consisting of a variable reference that includes white space around the variable name.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: var( --b ) ;
+  --b: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-06.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-06.html
new file mode 100644
index 000000000..bccb52da5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-06.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test overriding an existing variable declaration.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: orange;
+  --a: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-07.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-07.html
new file mode 100644
index 000000000..ecd74b2d4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-07.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having no tokens in its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  --b: crimson;
+  --a: var(--b,);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-08.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-08.html
new file mode 100644
index 000000000..e3cfd9c08
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-08.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a variable reference whose fallback is white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: orange;
+  --b: green;
+  --a: var(--b, );
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-09.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-09.html
new file mode 100644
index 000000000..898b973bf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-09.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having only a comment in its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  --b: crimson;
+  --a: var(--b,/**/);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-10.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-10.html
new file mode 100644
index 000000000..cfcfd32ea
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-10.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a variable reference with a fallback that includes a comment and an identifier.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: orange;
+  --b: green;
+  --a: var(--b,/**/a);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-11.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-11.html
new file mode 100644
index 000000000..ed011ad15
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-11.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having a '!' token at the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  --b: crimson;
+  --a: var(--b,!);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-12.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-12.html
new file mode 100644
index 000000000..3815754af
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-12.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having a ';' token at the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  --b: crimson;
+  --a: var(--b,;);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-13.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-13.html
new file mode 100644
index 000000000..5c262b813
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-13.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to a variable reference having "!important" the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  --b: crimson;
+  --a: var(--b,!important);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-14.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-14.html
new file mode 100644
index 000000000..153cfb994
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-14.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a variable reference and a following identifier with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: green;
+}
+span {
+  color: red;
+  --a:var(--b)red;
+  --b:orange;
+  color: var(--a);
+}
+</style>
+<p><span>This text must be green.</span></p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-15-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-15-ref.html
new file mode 100644
index 000000000..d8a43eb64
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-15-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<style>
+p {
+  font-family: Ahem, sans-serif;
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-15.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-15.html
new file mode 100644
index 000000000..1b3ca7a9d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-15.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="variable-declaration-15-ref.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<style>
+body {
+  font-family: serif;
+}
+p {
+  font-family: monospace;
+  --a: Ahem, sans-serif;
+  font-family: var(--a);
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-16-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-16-ref.html
new file mode 100644
index 000000000..d8a43eb64
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-16-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<style>
+p {
+  font-family: Ahem, sans-serif;
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-16.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-16.html
new file mode 100644
index 000000000..41f2b77e2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-16.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list with the first item being a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="variable-declaration-16-ref.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<style>
+body {
+  font-family: serif;
+}
+p {
+  font-family: monospace;
+  --a: var(--b), sans-serif;
+  --b: Ahem;
+  font-family: var(--a);
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-17-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-17-ref.html
new file mode 100644
index 000000000..bac59fcb8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-17-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<style>
+p {
+  font-family: SomeUnknownFont, Ahem;
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-17.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-17.html
new file mode 100644
index 000000000..2e0f0049e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-17.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list with the last item being a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="variable-declaration-17-ref.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<style>
+body {
+  font-family: serif;
+}
+p {
+  font-family: monospace;
+  --a: SomeUnknownFont, var(--b);
+  --b: Ahem;
+  font-family: var(--a);
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-18-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-18-ref.html
new file mode 100644
index 000000000..d8a43eb64
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-18-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<style>
+p {
+  font-family: Ahem, sans-serif;
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-18.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-18.html
new file mode 100644
index 000000000..8b2880f09
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-18.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a comma-separated font family list with the comma coming from a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="variable-declaration-18-ref.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<style>
+body {
+  font-family: serif;
+}
+p {
+  font-family: monospace;
+  --a: Ahem var(--b) sans-serif;
+  --b: ,;
+  font-family: var(--a);
+}
+</style>
+<p>This text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-19.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-19.html
new file mode 100644
index 000000000..da0a82523
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-19.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a function where one of the arguments is a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: rgb(0, var(--b), 0);
+  --b: 128;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-20.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-20.html
new file mode 100644
index 000000000..9bffae2d5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-20.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with "!important".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: var(--b) !important;
+  --b: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-21.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-21.html
new file mode 100644
index 000000000..0a91196df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-21.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a function where all of the arguments and commas are made up of variable references.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: rgb(var(--b)var(--c)var(--d));
+  --b: 0,;
+  --c: 128,;
+  --d: 0;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-22.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-22.html
new file mode 100644
index 000000000..a96d9cf18
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-22.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a variable reference with a number of levels of variable reference fallbacks.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: var(--b, var(--c, var(--d, green)));
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-23.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-23.html
new file mode 100644
index 000000000..b3b1d1823
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-23.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to having two "!important" priorities.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  --b: crimson;
+  --a: var(--b) !important !important;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-24.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-24.html
new file mode 100644
index 000000000..ead972c2a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-24.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that contains a CDO token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  --b: crimson;
+  --a: var(--b) <!--;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-25.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-25.html
new file mode 100644
index 000000000..64d19973d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-25.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that contains a CDC token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  --b: crimson;
+  --a: --> var(--b);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-26.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-26.html
new file mode 100644
index 000000000..79ff10d2b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-26.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that contains only a white space token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: ;
+  color: var(--a) green;
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-28.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-28.html
new file mode 100644
index 000000000..f6f78911b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-28.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with invalid syntax due to having no tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  --a:;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-29.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-29.html
new file mode 100644
index 000000000..a8847f5ed
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-29.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with a valid custom property name "--".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --: green;
+  color: var(--,crimson);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-30.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-30.html
new file mode 100644
index 000000000..e354abb2d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-30.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that contains a variable reference to itself.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: crimson;
+  --a: var(--a);
+  color: var(--a,green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-31.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-31.html
new file mode 100644
index 000000000..4a24bf2bd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-31.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with a digit.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --0: green;
+  color: var(--\30);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-32.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-32.html
new file mode 100644
index 000000000..d11478e8f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-32.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with an escaped digit.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --\30: green;
+  color: var(--\30);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-33.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-33.html
new file mode 100644
index 000000000..521db857f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-33.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with an escaped letter.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --\61: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-34.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-34.html
new file mode 100644
index 000000000..c6b4d42d3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-34.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with a lone surrogate.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --\d800: green;
+  color: var(--\fffd);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-35.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-35.html
new file mode 100644
index 000000000..f1289069f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-35.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with U+FFFD.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --\fffd: green;
+  color: var(--\fffd);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-36.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-36.html
new file mode 100644
index 000000000..1f984fe7a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-36.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the variable name begins with an out-of-range Unicode character escape.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --\ffffff: green;
+  color: var(--\fffd);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-37.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-37.html
new file mode 100644
index 000000000..bd4b1c0f4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-37.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable consisting of a variable reference where white space surrounds the comma separating the variable name and fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: var(--b , );
+  color: var(--a) green;
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-38.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-38.html
new file mode 100644
index 000000000..ece8cf8ff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-38.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring two variables in the same declaration block that differ only in case, with lowercase first.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  --A: crimson;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-39.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-39.html
new file mode 100644
index 000000000..d1caabbd6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-39.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring two variables in the same declaration block that differ only in case, with uppercase first.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --A: green;
+  --a: crimson;
+  color: var(--A);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-40.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-40.html
new file mode 100644
index 000000000..62a4e2170
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-40.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with an invalid custom property name due to it beginning with "VAR-".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: green;
+  VAR-a: crimson;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-41.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-41.html
new file mode 100644
index 000000000..c1c585b0f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-41.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the second '-' in the "--" prefix of the custom property name is escaped.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  -\2d a: green;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-42.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-42.html
new file mode 100644
index 000000000..1a60ba239
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-42.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable where the custom property name includes an unescaped Chinese character and an escape that is terminated by a space character.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<meta charset=utf-8>
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a-长-name-that-might-be-longer-than-you\27 d-normally-use: green;
+  color: var(--a-长-name-that-might-be-longer-than-you\27 d-normally-use);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-43.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-43.html
new file mode 100644
index 000000000..73aaef2b8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-43.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "initial".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: initial;
+  color: var(--a,green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-44.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-44.html
new file mode 100644
index 000000000..f2a968d25
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-44.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "inherit" where there is no variable to inherit from.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: inherit;
+  color: var(--a,green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-45.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-45.html
new file mode 100644
index 000000000..a5003d9a6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-45.html
@@ -0,0 +1,24 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "inherit" where there is a variable to inherit from.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: green;
+  color: crimson;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: inherit;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-46.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-46.html
new file mode 100644
index 000000000..c846b1cf9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-46.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "initial" where there is a variable to inherit from.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: crimson;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: initial;
+  color: var(--a,green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-47.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-47.html
new file mode 100644
index 000000000..2f06d093f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-47.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value consists of a reference to a variable whose value is "inherit".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --b: green;
+  color: crimson;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: var(--b);
+  --b: inherit;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-48.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-48.html
new file mode 100644
index 000000000..9abf32897
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-48.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a number of variables in a cycle.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: crimson;
+  --a: red var(--b);
+  --b: var(--c);
+  --c: var(--d);
+  --d: var(--e);
+  --e: var(--a);
+  --f: var(--e);
+  color: var(--f);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-49.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-49.html
new file mode 100644
index 000000000..9a4b984b8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-49.html
@@ -0,0 +1,26 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that is a dependent of a variable involved in a cycle but which itself is not involved in a cycle.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: crimson;
+  --a: red var(--b) var(--g);
+  --b: var(--c);
+  --c: var(--d);
+  --d: var(--e);
+  --e: var(--a);
+  --f: var(--e);
+  --g: green;
+  color: var(--g);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-50.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-50.html
new file mode 100644
index 000000000..0545b003d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-50.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a number of variables in a chain, where the final element of the chain uses its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: crimson;
+  --a: var(--b,red);
+  --b: var(--c);
+  --c: var(--d);
+  --d: var(--e);
+  --e: var(--a);
+  --f: var(--e);
+  color: var(--f);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-51.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-51.html
new file mode 100644
index 000000000..eac02079b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-51.html
@@ -0,0 +1,24 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a reference to an invalid inherited variable.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#invalid-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+  --c: var(--a);
+}
+p {
+  --a: var(--b);
+}
+p {
+  color: red;
+  --b: var(--c,green);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-52.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-52.html
new file mode 100644
index 000000000..e913e2dcd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-52.html
@@ -0,0 +1,24 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of a reference to an inherited variable whose value was a variable reference that used its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+  --c: var(--a,green);
+}
+p {
+  --a: var(--b);
+}
+p {
+  color: red;
+  --b: var(--c,crimson);
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-53.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-53.html
new file mode 100644
index 000000000..b8b6a8cf5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-53.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of two variable references without fallback and with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: green;
+}
+span {
+  color: red;
+  --a:var(--b)var(--c);
+  --b:orange;
+  --c:red;
+  color: var(--a);
+}
+</style>
+<p><span>This text must be green.</span></p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-54.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-54.html
new file mode 100644
index 000000000..8e0b39c4c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-54.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of two variable references with the first variable reference using fallback and with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: green;
+}
+span {
+  color: red;
+  --a:var(--b,orange)var(--c);
+  --c:red;
+  color: var(--a);
+}
+</style>
+<p><span>This text must be green.</span></p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-55.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-55.html
new file mode 100644
index 000000000..2fb68d516
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-55.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that consists of two variable references with the second variable reference using fallback and with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: green;
+}
+span {
+  color: red;
+  --a:var(--b)var(--c,red);
+  --b:orange;
+  color: var(--a);
+}
+</style>
+<p><span>This text must be green.</span></p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-56.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-56.html
new file mode 100644
index 000000000..21378f892
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-56.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "unset" where there is no variable to inherit from.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: unset;
+  color: var(--a,green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-57.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-57.html
new file mode 100644
index 000000000..aa8d84c6a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-57.html
@@ -0,0 +1,24 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value is "unset" where there is a variable to inherit from.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: green;
+  color: crimson;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: unset;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-58.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-58.html
new file mode 100644
index 000000000..b05f96783
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-58.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable whose value consists of a reference to a variable whose value is "unset".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --b: green;
+  color: crimson;
+}
+p {
+  color: red;
+}
+p {
+  color: orange;
+  --a: var(--b);
+  --b: unset;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-59.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-59.html
new file mode 100644
index 000000000..2032a342d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-59.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable with a trailing invalid token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: var(--a);
+  --a: green;
+  --a: red);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-declaration-60.html b/layout/reftests/w3c-css/submitted/variables/variable-declaration-60.html
new file mode 100644
index 000000000..3304eb4a3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-declaration-60.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Test: Test declaring a variable with a value whose name is "initial" but using Turkish dotted/dotless 'i's.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+div {
+  color: orange;
+  --a: green;
+  color: var(--a);
+}
+p {
+  --b: İnitial;
+  --c: ınitial;
+  color: var(--b,var(--c,red));
+}
+</style>
+<div><p>This text must be green.</p></div>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-external-declaration-01.html b/layout/reftests/w3c-css/submitted/variables/variable-external-declaration-01.html
new file mode 100644
index 000000000..bae5abf70
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-external-declaration-01.html
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable in an external CSS file.</title>
+<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<link rel="stylesheet" type="text/css" href="support/external-variable-declaration.css">
+
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01-ref.html
new file mode 100644
index 000000000..b84d1ff44
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01-ref.html
@@ -0,0 +1,11 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<p style="font-family: serif">This text must not be in Ahem.</p>
+<p style="font-family: Ahem">But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01.html b/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01.html
new file mode 100644
index 000000000..74132d59c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-external-font-face-01.html
@@ -0,0 +1,13 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the invalid declaration and use of a variable in an @font-face rule within an external CSS.</title>
+<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="variable-external-font-face-01-ref.html">
+<link rel="stylesheet" type="text/css" href="support/external-variable-font-face.css">
+<meta name="flags" content="ahem">
+<p id=a>This text must not be in Ahem.</p>
+<p id=b>But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-external-reference-01.html b/layout/reftests/w3c-css/submitted/variables/variable-external-reference-01.html
new file mode 100644
index 000000000..ee40db762
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-external-reference-01.html
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of a variable in a non-custom property where the variable value is inherited within an external CSS.</title>
+<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="stylesheet" type="text/css" href="support/external-variable-reference.css">
+<link rel="match" href="support/color-green-ref.html">
+
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-external-supports-01.html b/layout/reftests/w3c-css/submitted/variables/variable-external-supports-01.html
new file mode 100644
index 000000000..dd3ad1728
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-external-supports-01.html
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference within an external stylesheet file.</title>
+<link rel="author" title="Mihaela Velimiroviciu" href="mailto:mihaela.velimiroviciu@softvisioninc.eu">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="stylesheet" type="text/css" href="support/external-variable-supports.css">
+<link rel="match" href="support/color-green-ref.html">
+
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-font-face-01-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-font-face-01-ref.html
new file mode 100644
index 000000000..b84d1ff44
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-font-face-01-ref.html
@@ -0,0 +1,11 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<p style="font-family: serif">This text must not be in Ahem.</p>
+<p style="font-family: Ahem">But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-font-face-01.html b/layout/reftests/w3c-css/submitted/variables/variable-font-face-01.html
new file mode 100644
index 000000000..cbb7a4f4e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-font-face-01.html
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the invalid declaration and use of a variable in an @font-face rule.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="variable-font-face-01-ref.html">
+<meta name="flags" content="ahem">
+<style>
+@font-face {
+  --a: MyTestFontName;
+  font-family: var(--a);
+  src: url(support/Ahem.ttf);
+}
+@font-face {
+  font-family: MyTestFontName2;
+  src: url(support/Ahem.ttf);
+}
+#a {
+  font-family: MyTestFontName, serif;
+}
+#b {
+  font-family: MyTestFontName2, serif;
+}
+</style>
+<p id=a>This text must not be in Ahem.</p>
+<p id=b>But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-font-face-02-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-font-face-02-ref.html
new file mode 100644
index 000000000..b84d1ff44
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-font-face-02-ref.html
@@ -0,0 +1,11 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="stylesheet" href="support/ahem.css" type="text/css">
+<meta name="flags" content="ahem">
+<p style="font-family: serif">This text must not be in Ahem.</p>
+<p style="font-family: Ahem">But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-font-face-02.html b/layout/reftests/w3c-css/submitted/variables/variable-font-face-02.html
new file mode 100644
index 000000000..6cb5a1eb1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-font-face-02.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the invalid use of a variable in an @font-face rule where the variable is defined on the root element.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="variable-font-face-02-ref.html">
+<meta name="flags" content="ahem">
+<style>
+:root {
+  --a: MyTestFontName;
+}
+@font-face {
+  font-family: var(--a);
+  src: url(support/Ahem.ttf);
+}
+@font-face {
+  font-family: MyTestFontName2;
+  src: url(support/Ahem.ttf);
+}
+#a {
+  font-family: MyTestFontName, serif;
+}
+#b {
+  font-family: MyTestFontName2, serif;
+}
+</style>
+<p id=a>This text must not be in Ahem.</p>
+<p id=b>But this text must be in Ahem.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-01.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-01.html
new file mode 100644
index 000000000..1737b2e65
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-01.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of a variable in a non-custom property where the variable value is inherited.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+:root {
+  --a: green;
+}
+p {
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-02.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-02.html
new file mode 100644
index 000000000..92e4aedca
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-02.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of a variable in a non-custom property where the value is invalid at computed-value time due to referencing a non-existent variable.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#invalid-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+:root {
+  --a: crimson;
+  color: red;
+}
+body {
+  color: green;
+}
+p {
+  color: orange;
+  color: var(--a) var(--b);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-03.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-03.html
new file mode 100644
index 000000000..bd50b9ab8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-03.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of two variables in a non-custom property where the variable values are inherited and one of the variable values consists only of white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+:root {
+  --a: green;
+  --b: ;
+  color: red;
+}
+p {
+  color: crimson;
+  color: var(--a) var(--b);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-04.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-04.html
new file mode 100644
index 000000000..060e55c95
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-04.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of two variables in a non-custom property where one variable is inherited and the other references a non-existing variable with fallback that consists only of white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+:root {
+  --a: green;
+  color: red;
+}
+p {
+  color: crimson;
+  color: var(--a) var(--b, );
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-05.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-05.html
new file mode 100644
index 000000000..129e19f1d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-05.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of a variable in a non-custom property where the values contains no tokens other than the variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: green;
+  color: red;
+}
+p {
+  color: crimson;
+  color:var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-06.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-06.html
new file mode 100644
index 000000000..464ce37ed
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-06.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains no tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: crimson;
+  color: red;
+}
+p {
+  color: green;
+  color: var(--a,);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-07.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-07.html
new file mode 100644
index 000000000..d557161ed
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-07.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains a top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: crimson;
+  color: red;
+}
+p {
+  color: green;
+  color: var(--a,;);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-08.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-08.html
new file mode 100644
index 000000000..d7aa58df6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-08.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains a top level '!' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: crimson;
+  color: red;
+}
+p {
+  color: green;
+  color: var(--a,!);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-09.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-09.html
new file mode 100644
index 000000000..f2128cf2c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-09.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with a variable reference that has a non-top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: green;
+  color: crimson;
+}
+p {
+  color: red;
+  color: var(--a,(;));
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-10.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-10.html
new file mode 100644
index 000000000..73251154c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-10.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with a variable reference that has a non-top level '!' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: green;
+  color: crimson;
+}
+p {
+  color: red;
+  color: var(--a,(!));
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-11.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-11.html
new file mode 100644
index 000000000..81dec5a76
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-11.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to having a variable reference whose fallback contains nothing but a comment.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  --a: crimson;
+  color: red;
+}
+p {
+  color: green;
+  color: var(--a,/**/);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-12-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-12-ref.html
new file mode 100644
index 000000000..8fcd177cb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-12-ref.html
@@ -0,0 +1,9 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<p>The words "hello there" must appear below:</p>
+<p>hello there</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-12.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-12.html
new file mode 100644
index 000000000..968b71ebb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-12.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test the use of variable references in the 'content' property.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="variable-reference-12-ref.html">
+<style>
+:root {
+  --a: "hello";
+  --b: "there";
+}
+#a:before {
+  content: var(--a) " " var(--b);
+}
+</style>
+<p>The words "hello there" must appear below:</p>
+<p id=a></p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-13.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-13.html
new file mode 100644
index 000000000..b7249981f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-13.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test that important variable declarations are not overwritten by subsequent non-important variable declarations in the one declaration block.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green !important;
+  --a: crimson;
+  color: var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-14.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-14.html
new file mode 100644
index 000000000..7196f5879
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-14.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test that important variable declarations cascade correctly.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+#a {
+  --a: green !important;
+}
+p {
+  color: red;
+  --a: crimson;
+  color: var(--a);
+}
+</style>
+<p id=a>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-15.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-15.html
new file mode 100644
index 000000000..01cd29b2b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-15.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with two variable references with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: crimson;
+  --a: orange;
+  --b: red;
+  color: var(--a)var(--b);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-16.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-16.html
new file mode 100644
index 000000000..f27108ce9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-16.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that consists of a variable reference with a number of levels of variable reference fallbacks.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: red;
+}
+p {
+  color: crimson;
+  color: var(--a, var(--b, var(--c, green)));
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-17.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-17.html
new file mode 100644
index 000000000..2f677a6a1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-17.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that consists of a variable reference whose fallback contains a CDO token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: red;
+}
+p {
+  color: crimson;
+  --a: green;
+  color: var(--a, <!--);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-18.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-18.html
new file mode 100644
index 000000000..a858b2b6b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-18.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference and balanced braces and square brackets.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: red;
+  color: { [ var(--a) ] };
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-19.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-19.html
new file mode 100644
index 000000000..c3b0413e2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-19.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference and a non-top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: green;
+}
+p {
+  color: red;
+  color: [;] var(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-20.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-20.html
new file mode 100644
index 000000000..868a57694
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-20.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference whose function token is in uppercase.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: VAR(--a);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-21.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-21.html
new file mode 100644
index 000000000..f1ad08bda
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-21.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a reference to a variable whose name must be escaped.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --0: green;
+  color: var(--\30);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-22.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-22.html
new file mode 100644
index 000000000..a02f49ac0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-22.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a reference to a variable whose name is U+FFFD but which was declared and referenced using a lone surrogate.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --\d800: green;
+  color: var(--\d800);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-23.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-23.html
new file mode 100644
index 000000000..44afd5a6b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-23.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a reference to a variable whose name is U+FFFD but which was declared using a lone surrogate.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --\d800: green;
+  color: var(--\fffd);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-24.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-24.html
new file mode 100644
index 000000000..25c9c6743
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-24.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a reference to a variable whose name is U+FFFD but which was declared using an out-of-range Unicode character escape.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --\ffffff: green;
+  color: var(--\fffd);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-25.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-25.html
new file mode 100644
index 000000000..4ed514c9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-25.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference with no fallback and which is implicitly closed due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-26.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-26.html
new file mode 100644
index 000000000..ca3b01b26
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-26.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference with white space before its comma and fallback consisting only of white space and which is implicitly closed due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a , </style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-27.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-27.html
new file mode 100644
index 000000000..efd8418c8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-27.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference with fallback consisting only of white space and which is implicitly closed due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a, </style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-28.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-28.html
new file mode 100644
index 000000000..7796f1b88
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-28.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference whose fallback is a variable reference, both of which are implicitly closed due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a, var(--b</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-29.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-29.html
new file mode 100644
index 000000000..b01873fc3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-29.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property that contains a variable reference with no fallback, and whose variable name is followed by a comment, and where the comment and the variable reference are implicitly closed due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: green;
+  color: var(--a /* unclosed comment</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-30.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-30.html
new file mode 100644
index 000000000..9082c3058
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-30.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to containing two "!important" priorities.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: green;
+  --a: red;
+  color: var(--a) !important !important;
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-31.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-31.html
new file mode 100644
index 000000000..bfe4677bd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-31.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with a variable reference that has a digit after the "--" prefix.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: red;
+  --0: green;
+  color: var(--0);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-32.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-32.html
new file mode 100644
index 000000000..e1f5789c3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-32.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to containing a variable reference with fallback that contains a bad string.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: green;
+  --a: red;
+  color: var(--a, "
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-33.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-33.html
new file mode 100644
index 000000000..c527bcdd4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-33.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property containing a variable reference with fallback is an implicitly closed string due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: red;
+  --a: green;
+  color: var(--a, "</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-34.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-34.html
new file mode 100644
index 000000000..8cb14db28
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-34.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property with invalid syntax due to containing a variable reference with fallback that contains a bad URL.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: green;
+  --a: red;
+  color: var(--a, url("
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-35.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-35.html
new file mode 100644
index 000000000..cddc46691
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-35.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom property containing a variable reference with fallback is an implicitly closed URL due to EOF.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body {
+  color: orange;
+}
+p {
+  color: red;
+  --a: green;
+  color: var(--a, url("</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-36-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-36-ref.html
new file mode 100644
index 000000000..3af79f794
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-36-ref.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<style>
+p {
+  background-color: green;
+  color: white;
+}
+</style>
+<p>This text must have a green background color.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-36.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-36.html
new file mode 100644
index 000000000..e4f4d5026
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-36.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom shorthand property containing a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
+<link rel="match" href="variable-reference-36-ref.html">
+<style>
+p {
+  background-color: red;
+  --a: url(nothing) green;
+  background: var(--a);
+  color: white;
+}
+</style>
+<p>This text must have a green background color.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-37-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-37-ref.html
new file mode 100644
index 000000000..3af79f794
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-37-ref.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<style>
+p {
+  background-color: green;
+  color: white;
+}
+</style>
+<p>This text must have a green background color.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-37.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-37.html
new file mode 100644
index 000000000..391c5532c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-37.html
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a non-custom shorthand property containing a variable reference, with a subsequent property in the declaration block that overrides one of the shorthand's components.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
+<link rel="match" href="variable-reference-37-ref.html">
+<style>
+p {
+  --a: url(nothing) red;
+  background: var(--a);
+  background-color: green;
+  color: white;
+}
+</style>
+<p>This text must have a green background color.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-38-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-38-ref.html
new file mode 100644
index 000000000..8b4e262c7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-38-ref.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<style>
+p { padding-left: 1em; }
+#a { border-left: black dotted; }
+#b { border-left: black solid; }
+</style>
+<p id=a>The left border must be dotted.</p>
+<p id=b>The left border must be solid.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-38.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-38.html
new file mode 100644
index 000000000..8c37c1030
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-38.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test using variables in overlapping shorthands.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#variables-in-shorthands">
+<link rel="match" href="variable-reference-38-ref.html">
+<style>
+p { padding-left: 1em; }
+#a { --style: solid; --left: black dotted; border-style: var(--style); border-left: var(--left); border-top: none; border-right: none; border-bottom: none; }
+#b { --style: solid; --left: black dotted; border-left: var(--left); border-style: var(--style); border-top: none; border-right: none; border-bottom: none; }
+</style>
+<p id=a>The left border must be dotted.</p>
+<p id=b>The left border must be solid.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-39.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-39.html
new file mode 100644
index 000000000..21b7fd820
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-39.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test declaring a variable that references itself but uses fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+p {
+  color: red;
+  --a: var(--a, red);
+  color: var(--a, green);
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-40-ref.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-40-ref.html
new file mode 100644
index 000000000..a612d33f0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-40-ref.html
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<style>
+p {
+  border: 2px solid transparent;
+  border-image: linear-gradient(to right, orange, blue) 1 1;
+}
+</style>
+<p>This paragraph must have an orange/blue gradient border.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-reference-40.html b/layout/reftests/w3c-css/submitted/variables/variable-reference-40.html
new file mode 100644
index 000000000..07697c77b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-reference-40.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test that a variable reference within a gradient value in a border-image shorthand parses correctly.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="variable-reference-40-ref.html">
+<style>
+p {
+  --orange: orange;
+  border: 2px solid transparent;
+  border-image: linear-gradient(to right, var(--orange), blue) 1 1;
+}
+</style>
+<p>This paragraph must have an orange/blue gradient border.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-01.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-01.html
new file mode 100644
index 000000000..1b7872619
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-01.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference and no white space tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color:var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-02.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-02.html
new file mode 100644
index 000000000..2b74a468f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-02.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a white space token followed by a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-03.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-03.html
new file mode 100644
index 000000000..8d19666d9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-03.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference surrounded by white space tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a) ) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-04.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-04.html
new file mode 100644
index 000000000..f8b0458ef
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-04.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference surrounded by white space tokens and with white space surrounding the variable name.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var( --a ) ) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-05.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-05.html
new file mode 100644
index 000000000..08a7e7496
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-05.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a,))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-06.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-06.html
new file mode 100644
index 000000000..d83f60055
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-06.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a variable reference with fallback that is only white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a, )) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-07.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-07.html
new file mode 100644
index 000000000..d3bcc22ee
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-07.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having no fallback tokens, just a comment.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a,/**/))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-08.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-08.html
new file mode 100644
index 000000000..637bfb8de
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-08.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule where the property value contains a comment and an identifier.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a,/**/a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-09.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-09.html
new file mode 100644
index 000000000..f82e86029
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-09.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having a '!' token at the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a,!))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-10.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-10.html
new file mode 100644
index 000000000..c8d77476b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-10.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having "!important" at the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a,!important))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-11.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-11.html
new file mode 100644
index 000000000..835d06b52
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-11.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing 'color' property declaration in an @supports rule with a variable reference that comes after a non-color value.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: 1px var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-12.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-12.html
new file mode 100644
index 000000000..594e78e21
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-12.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing 'color' property declaration in an @supports rule with a variable reference that comes before a non-color value.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a) 1px) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-13.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-13.html
new file mode 100644
index 000000000..d6e8a6800
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-13.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing 'color' property declaration in an @supports rule with a range of different tokens and a variable reference not at the top level.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: something 3px url(whereever) calc(var(--a) + 1px)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-14.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-14.html
new file mode 100644
index 000000000..831ee1b05
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-14.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule with a variable reference and an "!important" priority.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a) !important) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-15.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-15.html
new file mode 100644
index 000000000..205c86d97
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-15.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule with two adjacent variable references with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-16.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-16.html
new file mode 100644
index 000000000..102d2c1cd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-16.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule with a variable reference that has a number of levels of variable reference fallbacks.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a, var(--b, var(--c, black)))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-17.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-17.html
new file mode 100644
index 000000000..88f7d4c40
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-17.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule with two "!important" priorities.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a) !important !important)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-18.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-18.html
new file mode 100644
index 000000000..81423b4d1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-18.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a CDO token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a) <!--) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-19.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-19.html
new file mode 100644
index 000000000..df9039956
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-19.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a CDC token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: --> var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-20.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-20.html
new file mode 100644
index 000000000..2673b3802
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-20.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and balanced braces and square brackets.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: { [ var(--a) ] }) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-21.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-21.html
new file mode 100644
index 000000000..67010c2ed
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-21.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule where the property value contains a syntactically invalid variable reference due to having a ';' token at the top level of its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a,;))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-22.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-22.html
new file mode 100644
index 000000000..38d1edc55
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-22.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference and a non-top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: [;] var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-23.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-23.html
new file mode 100644
index 000000000..6ab942132
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-23.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing non-custom property declaration in an @supports rule whose value contains a variable reference with a top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(--a);)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-24.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-24.html
new file mode 100644
index 000000000..18488cdab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-24.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a non-top level ';' token in its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a,(;))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-25.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-25.html
new file mode 100644
index 000000000..7ba0aafb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-25.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference whose function token is in uppercase.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: VAR(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-26.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-26.html
new file mode 100644
index 000000000..b49df5196
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-26.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a digit after the "--" variable name prefix.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--0)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-27.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-27.html
new file mode 100644
index 000000000..be67b4d06
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-27.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a variable name beginning with an escaped digit.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--\30)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-28.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-28.html
new file mode 100644
index 000000000..2ccd2b357
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-28.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a U+FFFD variable name specified by an escaped lone surrogate.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--\d800)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-29.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-29.html
new file mode 100644
index 000000000..193cb55c7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-29.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a U+FFFD variable name specified by an out-of-range Unicode character escape.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--\ffffff)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-30.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-30.html
new file mode 100644
index 000000000..937b7613e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-30.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with a dimension token as the variable name.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a)) and (not (color: var(1px))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-31.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-31.html
new file mode 100644
index 000000000..d6dec7b84
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-31.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom property declaration in an @supports rule whose value contains a variable reference with white space surrounding the fallback comma.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (color: var(--a , )) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-32.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-32.html
new file mode 100644
index 000000000..1cc391d14
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-32.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing non-custom shorthand property declaration in an @supports rule whose value contains a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (background: var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-33.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-33.html
new file mode 100644
index 000000000..f26eec235
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-33.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a:var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-34.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-34.html
new file mode 100644
index 000000000..aac50bf8b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-34.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains white space and a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-35.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-35.html
new file mode 100644
index 000000000..596680387
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-35.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference surrounded by white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b) ) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-36.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-36.html
new file mode 100644
index 000000000..14d5bc9e8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-36.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference surrounded by white space with the variable name also surrounded by white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var( --b ) ) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-37.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-37.html
new file mode 100644
index 000000000..828fb2f7f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-37.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b,))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-38.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-38.html
new file mode 100644
index 000000000..97e019ea8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-38.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference with fallback consisting only of white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b, )) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-39.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-39.html
new file mode 100644
index 000000000..d67ac48f6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-39.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with no fallback tokens, just a comment.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b,/**/))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-40.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-40.html
new file mode 100644
index 000000000..91fd83c07
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-40.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference with fallback consisting of a comment and an identifier.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b,/**/a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-41.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-41.html
new file mode 100644
index 000000000..aff08cd2b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-41.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with fallback containing a top level '!' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b,!))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-42.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-42.html
new file mode 100644
index 000000000..ae90e57d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-42.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with fallback containing a top level "!important".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b,!important))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-43.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-43.html
new file mode 100644
index 000000000..b5f176d06
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-43.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a dimension followed by a variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: 1px var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-44.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-44.html
new file mode 100644
index 000000000..4c18960f3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-44.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference followed bya dimension.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b) 1px) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-45.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-45.html
new file mode 100644
index 000000000..24b1eecf8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-45.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a selection of tokens and a non-top level variable reference.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: something 3px url(whereever) calc(var(--b) + 1px)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-46.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-46.html
new file mode 100644
index 000000000..c9d3f5b2a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-46.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and an "!important" priority.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b) !important) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-47.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-47.html
new file mode 100644
index 000000000..946963fe4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-47.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains two adjacent variable references with no intervening white space.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b)var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-48.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-48.html
new file mode 100644
index 000000000..7ab0c8455
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-48.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference with a number of levels of variable reference fallbacks.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b, var(--c, var(--d, black)))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-49.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-49.html
new file mode 100644
index 000000000..aa500b908
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-49.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains two "!important" priorities.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b) !important !important)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-50.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-50.html
new file mode 100644
index 000000000..c2185c957
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-50.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and a CDO token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b) <!--) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-51.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-51.html
new file mode 100644
index 000000000..0aa6d4397
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-51.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and a CDC token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: --> var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-52.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-52.html
new file mode 100644
index 000000000..9cc7d2148
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-52.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and balanced braces and square brackets.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: { [ var(--b) ] }) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-53.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-53.html
new file mode 100644
index 000000000..a40c2ffa6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-53.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference with a top level ';' token in its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b,;))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-54.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-54.html
new file mode 100644
index 000000000..b6009e1f7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-54.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference and a non-top level ';' token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: [;] var(--b)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-55.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-55.html
new file mode 100644
index 000000000..f4b92a2f6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-55.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains a variable reference and a top level ';' token in its fallback.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(--b);)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-56.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-56.html
new file mode 100644
index 000000000..07b188f76
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-56.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains only a white space token.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: ) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-57.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-57.html
new file mode 100644
index 000000000..5cb8b3364
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-57.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value contains no tokens.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a:)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-58.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-58.html
new file mode 100644
index 000000000..5eb41b432
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-58.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing property declaration in an @supports rule with property name "--".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-59.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-59.html
new file mode 100644
index 000000000..16669e66c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-59.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value contains a variable reference to itself.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#cycles">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a:var(--a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-60.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-60.html
new file mode 100644
index 000000000..438d23f84
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-60.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is a digit.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--0: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-61.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-61.html
new file mode 100644
index 000000000..62f9683d4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-61.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is a digit which is specified with an escape.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--\61: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-62.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-62.html
new file mode 100644
index 000000000..39c55b216
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-62.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is U+FFFD which is specified with an escaped lone surrogate.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--\d800: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-63.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-63.html
new file mode 100644
index 000000000..74235832c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-63.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule for a variable whose name is U+FFFD which is specified with an out-of-range Unicode character escape.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--\ffffff: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-64.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-64.html
new file mode 100644
index 000000000..2b3eadf24
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-64.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule whose value is a variable reference with a dimension token as the variable name.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (--a: var(1px))) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-65.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-65.html
new file mode 100644
index 000000000..4bc9c4e4d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-65.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a passing custom property declaration in an @supports rule whose value is a variable reference with white space surrounding the fallback comma.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: var(--b , )) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-66.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-66.html
new file mode 100644
index 000000000..a38b044ad
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-66.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a failing custom property declaration in an @supports rule where the property name begins with "VAR-".</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: a) and (not (VAR-a: a)) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/variables/variable-supports-67.html b/layout/reftests/w3c-css/submitted/variables/variable-supports-67.html
new file mode 100644
index 000000000..9425e2179
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/variables/variable-supports-67.html
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<title>CSS Test: Test a declaration for a custom property has an invalid value does not cause the @supports rule to fail to parse.</title>
+<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
+<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
+<link rel="match" href="support/color-green-ref.html">
+<style>
+body { color: red; }
+@supports (--a: !) or (--a: a) {
+  p { color: green; }
+}
+</style>
+<p>This text must be green.</p>
diff --git a/layout/reftests/w3c-css/submitted/will-change/green-square-100-by-100-offset-ref.html b/layout/reftests/w3c-css/submitted/will-change/green-square-100-by-100-offset-ref.html
new file mode 100644
index 000000000..fee7030b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/green-square-100-by-100-offset-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change reference</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px; margin: 100px 0 0 100px; background: green }
+</style>
+<body>
+  <div></div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/green-square-100-by-100-ref.html b/layout/reftests/w3c-css/submitted/will-change/green-square-100-by-100-ref.html
new file mode 100644
index 000000000..c49bf5a21
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/green-square-100-by-100-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change reference</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px; background: green }
+</style>
+<body>
+  <div></div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/reftest-stylo.list b/layout/reftests/w3c-css/submitted/will-change/reftest-stylo.list
new file mode 100644
index 000000000..685560a63
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/reftest-stylo.list
@@ -0,0 +1,20 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== will-change-stacking-context-clip-path-1.html will-change-stacking-context-clip-path-1.html
+== will-change-stacking-context-filter-1.html will-change-stacking-context-filter-1.html
+== will-change-stacking-context-height-1.html will-change-stacking-context-height-1.html
+== will-change-stacking-context-isolation-1.html will-change-stacking-context-isolation-1.html
+== will-change-stacking-context-mask-1.html will-change-stacking-context-mask-1.html
+== will-change-stacking-context-mix-blend-mode-1.html will-change-stacking-context-mix-blend-mode-1.html
+== will-change-stacking-context-opacity-1.html will-change-stacking-context-opacity-1.html
+== will-change-stacking-context-perspective-1.html will-change-stacking-context-perspective-1.html
+== will-change-stacking-context-position-1.html will-change-stacking-context-position-1.html
+== will-change-stacking-context-transform-1.html will-change-stacking-context-transform-1.html
+== will-change-stacking-context-transform-style-1.html will-change-stacking-context-transform-style-1.html
+== will-change-stacking-context-z-index-1.html will-change-stacking-context-z-index-1.html
+test-pref(layout.css.contain.enabled,true) == will-change-fixpos-cb-contain-1.html will-change-fixpos-cb-contain-1.html
+== will-change-fixpos-cb-filter-1.html will-change-fixpos-cb-filter-1.html
+== will-change-fixpos-cb-height-1.html will-change-fixpos-cb-height-1.html
+== will-change-fixpos-cb-perspective-1.html will-change-fixpos-cb-perspective-1.html
+== will-change-fixpos-cb-position-1.html will-change-fixpos-cb-position-1.html
+== will-change-fixpos-cb-transform-1.html will-change-fixpos-cb-transform-1.html
+== will-change-fixpos-cb-transform-style-1.html will-change-fixpos-cb-transform-style-1.html
diff --git a/layout/reftests/w3c-css/submitted/will-change/reftest.list b/layout/reftests/w3c-css/submitted/will-change/reftest.list
new file mode 100644
index 000000000..dfd5fe643
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/reftest.list
@@ -0,0 +1,19 @@
+== will-change-stacking-context-clip-path-1.html green-square-100-by-100-ref.html
+== will-change-stacking-context-filter-1.html green-square-100-by-100-ref.html
+== will-change-stacking-context-height-1.html green-square-100-by-100-ref.html
+== will-change-stacking-context-isolation-1.html green-square-100-by-100-ref.html
+== will-change-stacking-context-mask-1.html green-square-100-by-100-ref.html
+== will-change-stacking-context-mix-blend-mode-1.html green-square-100-by-100-ref.html
+== will-change-stacking-context-opacity-1.html green-square-100-by-100-ref.html
+== will-change-stacking-context-perspective-1.html green-square-100-by-100-ref.html
+== will-change-stacking-context-position-1.html green-square-100-by-100-ref.html
+== will-change-stacking-context-transform-1.html green-square-100-by-100-ref.html
+== will-change-stacking-context-transform-style-1.html green-square-100-by-100-ref.html
+== will-change-stacking-context-z-index-1.html green-square-100-by-100-ref.html
+test-pref(layout.css.contain.enabled,true) == will-change-fixpos-cb-contain-1.html green-square-100-by-100-offset-ref.html
+== will-change-fixpos-cb-filter-1.html green-square-100-by-100-offset-ref.html
+== will-change-fixpos-cb-height-1.html green-square-100-by-100-offset-ref.html
+== will-change-fixpos-cb-perspective-1.html green-square-100-by-100-offset-ref.html
+== will-change-fixpos-cb-position-1.html green-square-100-by-100-offset-ref.html
+== will-change-fixpos-cb-transform-1.html green-square-100-by-100-offset-ref.html
+== will-change-fixpos-cb-transform-style-1.html green-square-100-by-100-offset-ref.html
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-contain-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-contain-1.html
new file mode 100644
index 000000000..3bb3afee3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-contain-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: contain' creates a containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="https://drafts.csswg.org/css-containment/#containment-paint">
+<link rel="match" href="green-square-100-by-100-offset-ref.html">
+<meta name="assert" content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: contain; margin: 100px 0 0 100px; background: red }
+.child { top: 0; left: 0; width: 50px; background: green }
+#fixpos { position: fixed }
+#abspos { position: absolute; left: 50px }
+</style>
+<body>
+  <div id="wc">
+    <div class="child" id="fixpos">
+    </div>
+    <div class="child" id="abspos">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-filter-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-filter-1.html
new file mode 100644
index 000000000..afb03e8be
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-filter-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: filter' creates a containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/filter-effects/#FilterProperty">
+<link rel="match" href="green-square-100-by-100-offset-ref.html">
+<meta name="assert" content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: filter; margin: 100px 0 0 100px; background: red }
+.child { top: 0; left: 0; width: 50px; background: green }
+#fixpos { position: fixed }
+#abspos { position: absolute; left: 50px }
+</style>
+<body>
+  <div id="wc">
+    <div class="child" id="fixpos">
+    </div>
+    <div class="child" id="abspos">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-height-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-height-1.html
new file mode 100644
index 000000000..892e6d454
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-height-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: height' does not create a containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="match" href="green-square-100-by-100-offset-ref.html">
+<meta name="assert" content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: height; margin: 100px 0 0 100px; background: red }
+.child { top: 100px; left: 100px; width: 50px; background: green }
+#fixpos { position: fixed }
+#abspos { position: absolute; left: 150px }
+</style>
+<body>
+  <div id="wc">
+    <div class="child" id="fixpos">
+    </div>
+    <div class="child" id="abspos">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-perspective-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-perspective-1.html
new file mode 100644
index 000000000..4a394f995
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-perspective-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: perspective' creates a containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css3-transforms/#perspective-property">
+<link rel="match" href="green-square-100-by-100-offset-ref.html">
+<meta name="assert" content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: perspective; margin: 100px 0 0 100px; background: red }
+.child { top: 0; left: 0; width: 50px; background: green }
+#fixpos { position: fixed }
+#abspos { position: absolute; left: 50px }
+</style>
+<body>
+  <div id="wc">
+    <div class="child" id="fixpos">
+    </div>
+    <div class="child" id="abspos">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-position-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-position-1.html
new file mode 100644
index 000000000..7e52ab4b0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-position-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: position' does not create a containing block for fixed positioned elements but does create a containing block for absolutely positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="match" href="green-square-100-by-100-offset-ref.html">
+<meta name="assert" content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: position; margin: 100px 0 0 100px; background: red }
+.child { width: 50px; background: green }
+#fixpos { position: fixed; top: 100px; left: 100px }
+#abspos { position: absolute; top: 0; left: 50px }
+</style>
+<body>
+  <div id="wc">
+    <div class="child" id="fixpos">
+    </div>
+    <div class="child" id="abspos">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-transform-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-transform-1.html
new file mode 100644
index 000000000..92632cd62
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-transform-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: transform' creates a containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-property">
+<link rel="match" href="green-square-100-by-100-offset-ref.html">
+<meta name="assert" content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: transform; margin: 100px 0 0 100px; background: red }
+.child { top: 0; left: 0; width: 50px; background: green }
+#fixpos { position: fixed }
+#abspos { position: absolute; left: 50px }
+</style>
+<body>
+  <div id="wc">
+    <div class="child" id="fixpos">
+    </div>
+    <div class="child" id="abspos">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-transform-style-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-transform-style-1.html
new file mode 100644
index 000000000..808f7d8cd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-fixpos-cb-transform-style-1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: transform-style' creates a containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-style-property">
+<link rel="match" href="green-square-100-by-100-offset-ref.html">
+<meta name="assert" content="If any non-initial value of a property would cause the element to generate a containing block for fixed-position elements, specifying that property in will-change must cause the element to generate a containing block for fixed-position elements.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: transform-style; margin: 100px 0 0 100px; background: red }
+.child { top: 0; left: 0; width: 50px; background: green }
+#fixpos { position: fixed }
+#abspos { position: absolute; left: 50px }
+</style>
+<body>
+  <div id="wc">
+    <div class="child" id="fixpos">
+    </div>
+    <div class="child" id="abspos">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-clip-path-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-clip-path-1.html
new file mode 100644
index 000000000..673d1a895
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-clip-path-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: clip-path' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css-masking/#the-clip-path">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: clip-path; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-filter-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-filter-1.html
new file mode 100644
index 000000000..0f87768db
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-filter-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: filter' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/filter-effects/#FilterProperty">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: filter; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-height-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-height-1.html
new file mode 100644
index 000000000..3ce0e6158
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-height-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: height' does not create a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: height; background: green }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: red }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-isolation-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-isolation-1.html
new file mode 100644
index 000000000..9eaf812e9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-isolation-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: isolation' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/compositing-1/#isolation">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: isolation; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-mask-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-mask-1.html
new file mode 100644
index 000000000..77ec10caa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-mask-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: mask' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css-masking/#the-mask-image">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: mask; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-mix-blend-mode-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-mix-blend-mode-1.html
new file mode 100644
index 000000000..ae13ac6b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-mix-blend-mode-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: mix-blend-mode' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/compositing-1/#mix-blend-mode">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: mix-blend-mode; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-opacity-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-opacity-1.html
new file mode 100644
index 000000000..2bff6676a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-opacity-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: opacity' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="https://drafts.csswg.org/css-color-3/#transparency">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: opacity; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-perspective-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-perspective-1.html
new file mode 100644
index 000000000..3a6863220
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-perspective-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: perspective' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css3-transforms/#perspective-property">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: perspective; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-position-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-position-1.html
new file mode 100644
index 000000000..a244b7c2c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-position-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: position' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css3-positioning/#sticky-pos">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: position; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-transform-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-transform-1.html
new file mode 100644
index 000000000..1b55d1f7a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-transform-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: transform' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-property">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: transform; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-transform-style-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-transform-style-1.html
new file mode 100644
index 000000000..f8e50c60c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-transform-style-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: transform-style' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css3-transforms/#transform-style-property">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: transform-style; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-z-index-1.html b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-z-index-1.html
new file mode 100644
index 000000000..bcb9ea0a1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/will-change/will-change-stacking-context-z-index-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS will-change: 'will-change: z-index' creates a stacking context</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-will-change-1/#will-change">
+<link rel="help" href="http://www.w3.org/TR/css3-positioning/#layered-presentation">
+<link rel="match" href="green-square-100-by-100-ref.html">
+<meta name="assert" content="If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.">
+<style>
+html, body { margin: 0; padding: 0; }
+div { width: 100px; height: 100px }
+#wc { will-change: z-index; background: red }
+#child { position: absolute; top: 0; left: 0; z-index: -1; background: green }
+</style>
+<body>
+  <div id="wc">
+    <div id="child">
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001-ref.html
new file mode 100644
index 000000000..9fea986c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: border-block and border-inline logical properties in different writing modes</title>
+<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
+<style>
+#body tr td:nth-child(2) div {
+  writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(3) div {
+  writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(4) div {
+  writing-mode: vertical-rl;
+}
+#body tr td:nth-child(5) div {
+  writing-mode: vertical-rl;
+}
+#body tr td:nth-child(6) div {
+  writing-mode: vertical-lr;
+}
+#body tr td:nth-child(7) div {
+  writing-mode: vertical-lr;
+}
+#body tr td:nth-child(8) div {
+  writing-mode: sideways-lr;
+}
+#body tr td:nth-child(9) div {
+  writing-mode: sideways-lr;
+}
+
+
+#body tr td:nth-child(2n+2) div {
+  direction: ltr;
+}
+#body tr td:nth-child(2n+3) div {
+  direction: rtl;
+}
+
+
+td {
+  padding: 5px;
+  font-size: 13px;
+  background-color: silver;
+  width: 70px;
+  height: 70px;
+}
+
+
+.top {
+  border-bottom: 2px dotted blue;
+  border-top: 2px dotted orange;
+}
+.right {
+  border-left: 2px dotted blue;
+  border-right: 2px dotted orange;
+}
+
+.bottom {
+  border-top: 2px dotted blue;
+  border-bottom: 2px dotted orange;
+}
+.left {
+  border-right: 2px dotted blue;
+  border-left: 2px dotted orange;
+}
+</style>
+</head>
+<body>
+<p>
+  Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell.
+</p>
+<table>
+<thead>
+  <tr><th>writing mode</th><th colspan=2>horizontal-tb</th><th colspan=2>vertical-rl</th><th colspan=2>vertical-lr</th><th colspan=2>sideways-lr</th></tr>
+  <tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr>
+</thead>
+<tbody id=body>
+  <tr id=block-start><th>block-start</th>   <td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td></tr>
+  <tr id=block-end><th>block-end</th>       <td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td></tr>
+  <tr id=inline-start><th>inline-start</th> <td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td></tr>
+  <tr id=inline-end><th>inline-end</th>     <td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td></tr>
+</tbody>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001.html
new file mode 100644
index 000000000..76f3149bf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/logical-physical-mapping-001.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: border-block and border-inline logical properties in different writing modes</title>
+<link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<link rel="match" href="logical-physical-mapping-001-ref.html">
+<style>
+#block-start div.outer div {
+  border-block-start: dotted 2px orange;
+}
+#block-end div.outer div {
+  border-block-end: dotted 2px orange;
+}
+#inline-start div.outer div {
+  border-inline-start: dotted 2px orange;
+}
+#inline-end div.outer div {
+  border-inline-end: dotted 2px orange;
+}
+
+#body tr td:nth-child(2) div {
+  writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(3) div {
+  writing-mode: horizontal-tb;
+}
+#body tr td:nth-child(4) div {
+  writing-mode: vertical-rl;
+}
+#body tr td:nth-child(5) div {
+  writing-mode: vertical-rl;
+}
+#body tr td:nth-child(6) div {
+  writing-mode: vertical-lr;
+}
+#body tr td:nth-child(7) div {
+  writing-mode: vertical-lr;
+}
+#body tr td:nth-child(8) div {
+  writing-mode: sideways-lr;
+}
+#body tr td:nth-child(9) div {
+  writing-mode: sideways-lr;
+}
+
+
+#body tr td:nth-child(2n+2) div {
+  direction: ltr;
+}
+#body tr td:nth-child(2n+3) div {
+  direction: rtl;
+}
+
+
+td {
+  padding: 5px;
+  font-size: 13px;
+  background-color: silver;
+  width: 70px;
+  height: 70px;
+}
+
+
+.top {
+  border-bottom: 2px dotted blue;
+}
+.right {
+  border-left: 2px dotted blue;
+}
+
+.bottom {
+  border-top: 2px dotted blue;
+}
+.left {
+  border-right: 2px dotted blue;
+}
+</style>
+</head>
+<body>
+<p>
+  Test passes if orange dots are opposite to the blue dots in each cell. Orange dots should be on the (physical) side specified by the text in the cell.
+</p>
+<table>
+<thead>
+  <tr><th>writing mode</th><th colspan=2>horizontal-tb</th><th colspan=2>vertical-rl</th><th colspan=2>vertical-lr</th><th colspan=2>sideways-lr</th></tr>
+  <tr><th>direction</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th><th>ltr</th><th>rtl</th></tr>
+</thead>
+<tbody id=body>
+  <tr id=block-start><th>block-start</th>   <td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td></tr>
+  <tr id=block-end><th>block-end</th>       <td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=right>right</div></div></td></tr>
+  <tr id=inline-start><th>inline-start</th> <td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td></tr>
+  <tr id=inline-end><th>inline-end</th>     <td><div class=outer><div class=right>right</div></div></td><td><div class=outer><div class=left>left</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=top>top</div></div></td><td><div class=outer><div class=bottom>bottom</div></div></td></tr>
+</tbody>
+</table>
+
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest-stylo.list
new file mode 100644
index 000000000..5b10baf15
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest-stylo.list
@@ -0,0 +1,18 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+default-preferences pref(layout.css.text-combine-upright.enabled,true)
+
+== text-combine-upright-break-inside-001.html text-combine-upright-break-inside-001.html
+== text-combine-upright-break-inside-001a.html text-combine-upright-break-inside-001a.html
+== text-combine-upright-compression-001.html text-combine-upright-compression-001.html
+== text-combine-upright-compression-002.html text-combine-upright-compression-002.html
+== text-combine-upright-compression-003.html text-combine-upright-compression-003.html
+== text-combine-upright-compression-004.html text-combine-upright-compression-004.html
+== text-combine-upright-compression-005.html text-combine-upright-compression-005.html
+== text-combine-upright-compression-005a.html text-combine-upright-compression-005a.html
+== text-combine-upright-compression-006.html text-combine-upright-compression-006.html
+== text-combine-upright-compression-006a.html text-combine-upright-compression-006a.html
+== text-combine-upright-compression-007.html text-combine-upright-compression-007.html
+
+== text-orientation-upright-directionality-001.html text-orientation-upright-directionality-001.html
+
+== logical-physical-mapping-001.html logical-physical-mapping-001.html
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/reftest.list b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest.list
new file mode 100644
index 000000000..bc8158275
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/reftest.list
@@ -0,0 +1,17 @@
+default-preferences pref(layout.css.text-combine-upright.enabled,true)
+
+== text-combine-upright-break-inside-001.html text-combine-upright-break-inside-001-ref.html
+== text-combine-upright-break-inside-001a.html text-combine-upright-break-inside-001-ref.html
+== text-combine-upright-compression-001.html text-combine-upright-compression-001-ref.html
+== text-combine-upright-compression-002.html text-combine-upright-compression-002-ref.html
+== text-combine-upright-compression-003.html text-combine-upright-compression-003-ref.html
+== text-combine-upright-compression-004.html text-combine-upright-compression-004-ref.html
+== text-combine-upright-compression-005.html text-combine-upright-compression-005-ref.html
+== text-combine-upright-compression-005a.html text-combine-upright-compression-005-ref.html
+== text-combine-upright-compression-006.html text-combine-upright-compression-006-ref.html
+== text-combine-upright-compression-006a.html text-combine-upright-compression-006-ref.html
+== text-combine-upright-compression-007.html text-combine-upright-compression-007-ref.html
+
+== text-orientation-upright-directionality-001.html text-orientation-upright-directionality-001-ref.html
+
+== logical-physical-mapping-001.html logical-physical-mapping-001-ref.html
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/support/WidthTest-Regular.otf b/layout/reftests/w3c-css/submitted/writing-modes-3/support/WidthTest-Regular.otf
new file mode 100644
index 000000000..06b1d3c02
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/support/WidthTest-Regular.otf
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/support/tcy.css b/layout/reftests/w3c-css/submitted/writing-modes-3/support/tcy.css
new file mode 100644
index 000000000..0117e215e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/support/tcy.css
@@ -0,0 +1,11 @@
+.tcy {
+  text-combine-upright: all;
+}
+.fake-tcy {
+  display: inline-block;
+  writing-mode: horizontal-tb;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  line-height: 1em;
+}
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/support/width-test.css b/layout/reftests/w3c-css/submitted/writing-modes-3/support/width-test.css
new file mode 100644
index 000000000..4f15976cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/support/width-test.css
@@ -0,0 +1,7 @@
+@font-face {
+  font-family: WidthTest;
+  src: url(WidthTest-Regular.otf);
+}
+.test {
+  font: 72px/1 WidthTest;
+}
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001-ref.html
new file mode 100644
index 000000000..9c6745667
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, no line break</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { height: 3em; margin: 0 5em; }
+.tcy, .fake-tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the two columns are identical.</p>
+<div class="test">
+  <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+  <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001.html
new file mode 100644
index 000000000..5248c076d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, whitespace inside tcy with insufficient line space</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout">
+<link rel="match" href="text-combine-upright-break-inside-001-ref.html">
+<meta name="assert" content="line should never be broken inside text-combine-upright text node">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { height: 3em; margin: 0 5em; }
+.tcy, .fake-tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the two columns are identical.</p>
+<div class="test">
+  <p>XXXXX<span class="tcy">X X</span>XXXXX</p>
+  <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001a.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001a.html
new file mode 100644
index 000000000..d4c4bd649
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-break-inside-001a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, white-space: pre with new line</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-layout">
+<link rel="match" href="text-combine-upright-break-inside-001-ref.html">
+<meta name="assert" content="line should never be broken inside text-combine-upright text node">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { height: 3em; margin: 0 5em; }
+.tcy { white-space: pre; }
+.tcy, .fake-tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the two columns are identical.</p>
+<div class="test">
+  <p>XXXXX<span class="tcy">X
+X</span>XXXXX</p>
+  <p style="white-space: nowrap">XXXXX<span class="fake-tcy">X</span>XXXXX</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001-ref.html
new file mode 100644
index 000000000..b1971474e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, no compression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical zeros in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">0</span></p>
+  <p><span class="fake-tcy">0</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001.html
new file mode 100644
index 000000000..304431bda
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, no compression</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-001-ref.html">
+<meta name="assert" content="text-combine-upright with character not wider than 1em should not trigger compression.">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical zeros in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">0</span></p>
+  <p><span class="fake-tcy">0</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002-ref.html
new file mode 100644
index 000000000..dd05022c0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression of two characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">22</span></p>
+  <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002.html
new file mode 100644
index 000000000..2be48da2d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-002.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression of two characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-002-ref.html">
+<meta name="assert" content="text-combine-upright should try applying 'hwid' feature if the width is wider than 1em">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">00</span></p>
+  <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003-ref.html
new file mode 100644
index 000000000..6c6ea736f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression of three characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">333</span></p>
+  <p><span class="fake-tcy">333</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003.html
new file mode 100644
index 000000000..5b22fb365
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-003.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression of three characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-003-ref.html">
+<meta name="assert" content="text-combine-upright should try applying 'twid' feature if the width is wider than 1em">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">000</span></p>
+  <p><span class="fake-tcy">333</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004-ref.html
new file mode 100644
index 000000000..cb6aa0035
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression of four characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">4444</span></p>
+  <p><span class="fake-tcy">4444</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004.html
new file mode 100644
index 000000000..c6bcb0232
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression of four characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-004-ref.html">
+<meta name="assert" content="text-combine-upright should try applying 'qwid' feature if the width is wider than 1em">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">0000</span></p>
+  <p><span class="fake-tcy">4444</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005-ref.html
new file mode 100644
index 000000000..a158be264
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, no compression for single full-width character</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">０</span></p>
+  <p><span class="fake-tcy">０</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005.html
new file mode 100644
index 000000000..dbcb810ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, no compression for single full-width character</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-005-ref.html">
+<meta name="assert" content="text-combine-upright should not change a single full-width character">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">０</span></p>
+  <p><span class="fake-tcy">０</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005a.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005a.html
new file mode 100644
index 000000000..918140e83
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-005a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, no compression for single character with full-width transform</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-005-ref.html">
+<meta name="assert" content="text-combine-upright should not change a single full-width character">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+.tcy { text-transform: full-width; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">0</span></p>
+  <p><span class="fake-tcy">０</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006-ref.html
new file mode 100644
index 000000000..8a083f680
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright, compression for two full-width characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="fake-tcy">22</span></p>
+  <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006.html
new file mode 100644
index 000000000..8ba98db9c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression for two full-width characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-006-ref.html">
+<meta name="assert" content="text-combine-upright should run the reverse of full-width transform before applying compression">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">００</span></p>
+  <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006a.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006a.html
new file mode 100644
index 000000000..bebda644e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-006a.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright, compression for two characters with full-width transform</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-fullwidth">
+<link rel="match" href="text-combine-upright-compression-006-ref.html">
+<meta name="assert" content="text-combine-upright should run the reverse of full-width transform before applying compression">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; }
+.test > p { border: 1px solid black; }
+.tcy { text-transform: full-width; }
+</style>
+</head>
+<body>
+<p>Test passes if there are two identical graphs in the blocks below.</p>
+<div class="test">
+  <p><span class="tcy">00</span></p>
+  <p><span class="fake-tcy">22</span></p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007-ref.html
new file mode 100644
index 000000000..a0cba009a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Reference: text-combine-upright: all, fit any number of characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; height: 3.5em; }
+.test > p { border: 1px solid black; }
+</style>
+</head>
+<body>
+<p>Test passes if the contents in the two blocks are identical.</p>
+<div class="test">
+  <p>一<span class="fake-tcy"></span>十</p>
+  <p>一<span class="fake-tcy"></span>十</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007.html
new file mode 100644
index 000000000..ca943f311
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-combine-upright-compression-007.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<title>CSS Test: text-combine-upright: all, fit any number of characters</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-combine-compression">
+<link rel="match" href="text-combine-upright-compression-007-ref.html">
+<meta name="assert" content="text-combine-upright: all should allow any amount of text to be compressed in a 1em square">
+<link rel="stylesheet" href="support/width-test.css">
+<link rel="stylesheet" href="support/tcy.css">
+<style>
+.test { writing-mode: vertical-rl; height: 3.5em; }
+.test > p { border: 1px solid black; }
+.tcy { color: transparent; }
+</style>
+</head>
+<body>
+<p>Test passes if the contents in the two blocks are identical.</p>
+<div class="test">
+  <p>一<span class="tcy">ニ三四五六七八九</span>十</p>
+  <p>一<span class="fake-tcy"></span>十</p>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001-ref.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001-ref.html
new file mode 100644
index 000000000..cafd8e8f6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Reference: text-orientation:upright in sideways-* writing modes</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-orientation">
+</head>
+<body style="font: 24px sans-serif">
+<p>The two sideways-rl lines should be identical:
+<div style="writing-mode:sideways-rl">
+  <p>hello العربي world עברית</p>
+  <p>hello العربي world עברית</p>
+</div>
+<p>The two sideways-lr lines should be identical:
+<div style="writing-mode:sideways-lr">
+  <p>hello العربي world עברית</p>
+  <p>hello العربي world עברית</p>
+</div>
diff --git a/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001.html b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001.html
new file mode 100644
index 000000000..695e489df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/writing-modes-3/text-orientation-upright-directionality-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Test: text-orientation:upright in sideways-* writing modes</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jfkthame@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#text-orientation">
+<link rel="match" href="text-orientation-upright-directionality-001-ref.html">
+<meta name="assert" content="text-orientation has no effect in horizontal typographic modes">
+</head>
+<body style="font: 24px sans-serif">
+<p>The two sideways-rl lines should be identical:
+<div style="writing-mode:sideways-rl">
+  <p>hello العربي world עברית</p>
+  <p style="text-orientation:upright">hello العربي world עברית</p>
+</div>
+<p>The two sideways-lr lines should be identical:
+<div style="writing-mode:sideways-lr">
+  <p>hello العربي world עברית</p>
+  <p style="text-orientation:upright">hello العربي world עברית</p>
+</div>