summaryrefslogtreecommitdiffstats
path: root/layout/reftests/w3c-css/submitted/images3
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/reftests/w3c-css/submitted/images3
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/w3c-css/submitted/images3')
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001c.html91
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001e.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001i.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001o.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-001p.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002c.html91
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002e.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002i.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002o.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-png-002p.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-001p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-002p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-003p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-004p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-005p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-contain-svg-006p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001c.html91
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001e.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001i.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001o.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-001p.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002c.html91
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002e.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002i.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002o.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-png-002p.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-001p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-002p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-003p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-004p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-005p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-cover-svg-006p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001c.html91
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001e.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001i.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001o.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-001p.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002c.html91
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002e.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002i.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002o.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-png-002p.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-001p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-002p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-003p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-004p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-005p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-fill-svg-006p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001c.html91
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001e.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001i.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001o.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-001p.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002c.html91
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002e.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002i.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002o.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-png-002p.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-001p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-002p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-003p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-004p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-005p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006-ref.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-none-svg-006p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001-ref.html78
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001c.html91
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001e.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001i.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001o.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-001p.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002-ref.html78
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002c.html91
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002e.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002i.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002o.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-png-002p.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-001p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-002p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-003p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-004p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-005p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006-ref.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006e.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006i.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006o.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-fit-scale-down-svg-006p.html76
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html42
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-001c.html58
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html42
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-002c.html58
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-svg-001-ref.html42
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-svg-001e.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-svg-001i.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-svg-001o.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-svg-001p.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-svg-002-ref.html42
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-svg-002e.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-svg-002i.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-svg-002o.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/object-position-svg-002p.html44
-rw-r--r--layout/reftests/w3c-css/submitted/images3/reftest-stylo.list209
-rw-r--r--layout/reftests/w3c-css/submitted/images3/reftest.list192
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg11
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg18
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/colors-16x8.pngbin0 -> 93 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg14
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/colors-8x16-noSize.svg11
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg18
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/colors-8x16.pngbin0 -> 92 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg14
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh72
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh109
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh116
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh88
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh88
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html78
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html77
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html56
-rw-r--r--layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html58
251 files changed, 18385 insertions, 0 deletions
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
Binary files differ
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
Binary files differ
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>