diff options
Diffstat (limited to 'layout/reftests/xul')
146 files changed, 7446 insertions, 0 deletions
diff --git a/layout/reftests/xul/accesskey-ref.xhtml b/layout/reftests/xul/accesskey-ref.xhtml new file mode 100644 index 0000000000..5b89fa7f1d --- /dev/null +++ b/layout/reftests/xul/accesskey-ref.xhtml @@ -0,0 +1,23 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> +<?xml-stylesheet href="data:text/css,u { display: inline; text-decoration: underline; }" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<hbox align="start"> + <label control="b1"><u>L</u>abel1</label><input xmlns="http://www.w3.org/1999/xhtml" id="b1" size="2"/> + <label control="b2">Labe<u>l</u>2</label><input xmlns="http://www.w3.org/1999/xhtml" id="b2" size="2"/> + <label control="b3">La<u>b</u>el3</label><input xmlns="http://www.w3.org/1999/xhtml" id="b3" size="2"/> + <label control="b4">Label4 (<u>X</u>)</label><input xmlns="http://www.w3.org/1999/xhtml" id="b4" size="2"/> + <label control="b5" maxwidth="50">Quite a <u>l</u>ong label. Hopefully it will wrap</label><input xmlns="http://www.w3.org/1999/xhtml" id="b5" label="Button5" size="2"/> +</hbox> + +<hbox id="d" align="start"> + <label control="d1"><u>L</u>abel1</label><input xmlns="http://www.w3.org/1999/xhtml" id="d1" size="2"/> + <label control="d2">Labe<u>l</u>2</label><input xmlns="http://www.w3.org/1999/xhtml" id="d2" size="2"/> + <label control="d3">La<u>b</u>el3</label><input xmlns="http://www.w3.org/1999/xhtml" id="d3" size="2"/> + <label control="d4">Label4 (<u>X</u>)</label><input xmlns="http://www.w3.org/1999/xhtml" id="d4" size="2"/> + <label control="d5" maxwidth="50">Quite a <u>l</u>ong label. Hopefully it will wrap</label><input xmlns="http://www.w3.org/1999/xhtml" id="d5" size="2"/> +</hbox> + +</window> diff --git a/layout/reftests/xul/accesskey.xhtml b/layout/reftests/xul/accesskey.xhtml new file mode 100644 index 0000000000..27cb2d465a --- /dev/null +++ b/layout/reftests/xul/accesskey.xhtml @@ -0,0 +1,43 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<!-- This test checks that access keys are rendered properly, both when set with the + accesskey attribute in the markup and updated via script later. + --> +<window class="reftest-wait" onload="changeKeys()" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<script> +<![CDATA[ + +var keys = ['L', 'l', 'b', 'x', 'l']; + +function changeKeys() +{ + var box = document.getElementById('d'); + for (var b = 0; b < 5; b++) + box.childNodes[b * 2].accessKey = keys[b]; + + document.documentElement.className=''; +} + +]]> +</script> + +<hbox align="start"> + <label control="b1" accesskey="L">Label1</label><input xmlns="http://www.w3.org/1999/xhtml" id="b1" size="2"/> + <label control="b2" accesskey="l">Label2</label><input xmlns="http://www.w3.org/1999/xhtml" id="b2" size="2"/> + <label control="b3" accesskey="b">Label3</label><input xmlns="http://www.w3.org/1999/xhtml" id="b3" size="2"/> + <label control="b4" accesskey="x">Label4</label><input xmlns="http://www.w3.org/1999/xhtml" id="b4" size="2"/> + <label control="b5" accesskey="l" maxwidth="50">Quite a long label. Hopefully it will wrap</label><input xmlns="http://www.w3.org/1999/xhtml" id="b5" size="2"/> +</hbox> + +<hbox id="d" align="start"> + <label control="d1" accesskey="z">Label1</label><input xmlns="http://www.w3.org/1999/xhtml" id="d1" size="2"/> + <label control="d2">Label2</label><input xmlns="http://www.w3.org/1999/xhtml" id="d2" size="2"/> + <label control="d3" accesskey="t">Label3</label><input xmlns="http://www.w3.org/1999/xhtml" id="d3" size="2"/> + <label control="d4" accesskey="b">Label4</label><input xmlns="http://www.w3.org/1999/xhtml" id="d4" size="2"/> + <label control="d5" accesskey="l" maxwidth="50">Quite a long label. Hopefully it will wrap</label><input xmlns="http://www.w3.org/1999/xhtml" id="d5" size="2"/> +</hbox> + +</window> diff --git a/layout/reftests/xul/blank-window.xhtml b/layout/reftests/xul/blank-window.xhtml new file mode 100644 index 0000000000..ad5e963b79 --- /dev/null +++ b/layout/reftests/xul/blank-window.xhtml @@ -0,0 +1,5 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Blank window" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> diff --git a/layout/reftests/xul/colors-16x8-noSize.svg b/layout/reftests/xul/colors-16x8-noSize.svg new file mode 100644 index 0000000000..db715d875e --- /dev/null +++ b/layout/reftests/xul/colors-16x8-noSize.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file has an aspect-ratio (from its viewBox attribute), + but no intrinsic size. +--> +<svg xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 16 8"> + <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/> + <rect x="8" y="0" width="8px" height="4px" style="fill: black"/> + <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/> + <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/xul/colors-16x8-parDefault.svg b/layout/reftests/xul/colors-16x8-parDefault.svg new file mode 100644 index 0000000000..1b0bca0737 --- /dev/null +++ b/layout/reftests/xul/colors-16x8-parDefault.svg @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet). + + If it's rendered via e.g. a square <img> element with 'object-fit: fill', + the SVG will receive the <img>'s full content-box to use as its viewport. + But, importantly, its viewBox-region should NOT be stretched/squashed to + fill this viewport; instead, the viewBox will scale *proportionally* until + it *just* fits inside the viewport (the <img>), without overflowing, and + it'll be centered inside the viewport in whichever dimension has extra + space available. (This is what "xMidYMid meet" requires.) +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="16" height="8" viewBox="0 0 16 8"> + <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/> + <rect x="8" y="0" width="8px" height="4px" style="fill: black"/> + <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/> + <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/xul/colors-16x8.png b/layout/reftests/xul/colors-16x8.png Binary files differnew file mode 100644 index 0000000000..bd23845871 --- /dev/null +++ b/layout/reftests/xul/colors-16x8.png diff --git a/layout/reftests/xul/colors-16x8.svg b/layout/reftests/xul/colors-16x8.svg new file mode 100644 index 0000000000..08e3659402 --- /dev/null +++ b/layout/reftests/xul/colors-16x8.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file is meant to mimic colors-8x16.png as closely + as possible. In particular, this SVG has: + (1) an intrinsic size (from the 'width' & 'height' attributes) + (2) preserveAspectRatio="none", allowing it to stretch in the + same way that a raster image would. +--> +<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" + width="16" height="8" viewBox="0 0 16 8"> + <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/> + <rect x="8" y="0" width="8px" height="4px" style="fill: black"/> + <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/> + <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/xul/colors-8x16-noSize.svg b/layout/reftests/xul/colors-8x16-noSize.svg new file mode 100644 index 0000000000..e741537b93 --- /dev/null +++ b/layout/reftests/xul/colors-8x16-noSize.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file has an aspect-ratio (from its viewBox attribute), + but no intrinsic size. +--> +<svg xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 8 16"> + <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/> + <rect x="4" y="0" width="4px" height="8px" style="fill: black"/> + <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/> + <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/xul/colors-8x16-parDefault.svg b/layout/reftests/xul/colors-8x16-parDefault.svg new file mode 100644 index 0000000000..ec8c59dcbd --- /dev/null +++ b/layout/reftests/xul/colors-8x16-parDefault.svg @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet). + + If it's rendered via e.g. a square <img> element with 'object-fit: fill', + the SVG will receive the <img>'s full content-box to use as its viewport. + But, importantly, its viewBox-region should NOT be stretched/squashed to + fill this viewport; instead, the viewBox will scale *proportionally* until + it *just* fits inside the viewport (the <img>), without overflowing, and + it'll be centered inside the viewport in whichever dimension has extra + space available. (This is what "xMidYMid meet" requires.) +--> +<svg xmlns="http://www.w3.org/2000/svg" + width="8" height="16" viewBox="0 0 8 16"> + <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/> + <rect x="4" y="0" width="4px" height="8px" style="fill: black"/> + <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/> + <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/xul/colors-8x16.png b/layout/reftests/xul/colors-8x16.png Binary files differnew file mode 100644 index 0000000000..596fdb389d --- /dev/null +++ b/layout/reftests/xul/colors-8x16.png diff --git a/layout/reftests/xul/colors-8x16.svg b/layout/reftests/xul/colors-8x16.svg new file mode 100644 index 0000000000..c336e3af1b --- /dev/null +++ b/layout/reftests/xul/colors-8x16.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- This SVG file is meant to mimic colors-8x16.png as closely + as possible. In particular, this SVG has: + (1) an intrinsic size (from the 'width' & 'height' attributes) + (2) preserveAspectRatio="none", allowing it to stretch in the + same way that a raster image would. +--> +<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" + width="8" height="16" viewBox="0 0 8 16"> + <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/> + <rect x="4" y="0" width="4px" height="8px" style="fill: black"/> + <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/> + <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/xul/css-flex-1-ref.html b/layout/reftests/xul/css-flex-1-ref.html new file mode 100644 index 0000000000..a47eb8e9cf --- /dev/null +++ b/layout/reftests/xul/css-flex-1-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <style> + body { margin: 0 } + div.ref { + border: 1px solid black; + box-sizing: border-box; + background: green; + height: 50px; + width: 100px; + } + </style> +</head> +<body> + <div class="ref"></div> +</body> +</html> diff --git a/layout/reftests/xul/css-flex-1.xhtml b/layout/reftests/xul/css-flex-1.xhtml new file mode 100644 index 0000000000..0622e11222 --- /dev/null +++ b/layout/reftests/xul/css-flex-1.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + class="reftest-wait" + onload="tweak()"> + <style xmlns="http://www.w3.org/1999/xhtml"> + <![CDATA[ + panelview { + border: 1px solid black; + background: green; + display: flex; + height: 50px; + } + ]]> + </style> + <script> + <![CDATA[ + function tweak() { + var tweakMe = document.getElementById("tweakMe"); + tweakMe.style.width = "100px"; + document.documentElement.className = ""; + } + ]]> + </script> + <hbox> + <panelview id="tweakMe"></panelview> + </hbox> +</window> diff --git a/layout/reftests/xul/css-grid-with-xul-item-1-ref.xhtml b/layout/reftests/xul/css-grid-with-xul-item-1-ref.xhtml new file mode 100644 index 0000000000..4af706bacc --- /dev/null +++ b/layout/reftests/xul/css-grid-with-xul-item-1-ref.xhtml @@ -0,0 +1,40 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + align="start"> + <html:style> + .container { + border: 1px solid purple; + } + + * { margin: 0 } + </html:style> + <hbox class="container"> + <label value="label"/> + </hbox> + <hbox class="container"> + <label value="label" style="padding: 5px"/> + </hbox> + <hbox class="container"> + <label value="label" style="margin:8px"/> + </hbox> + <hbox class="container"> + <menulist> + </menulist> + </hbox> + <hbox class="container"> + <menulist style="margin: 10px"> + </menulist> + </hbox> + <hbox class="container"> + <menulist> + <menupopup> + <menuitem value="1" label="item"/> + </menupopup> + </menulist> + </hbox> + <hbox class="container"> + <checkbox></checkbox> + </hbox> +</window> diff --git a/layout/reftests/xul/css-grid-with-xul-item-1.xhtml b/layout/reftests/xul/css-grid-with-xul-item-1.xhtml new file mode 100644 index 0000000000..cf89d8ac41 --- /dev/null +++ b/layout/reftests/xul/css-grid-with-xul-item-1.xhtml @@ -0,0 +1,53 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + align="start"> + <!-- This test ensures that auto-sizing works properly around grid items that + happen to be XUL elements. Each outlined box is a CSS grid with some + sort of XUL child inside (just one child, to test that we shrinkwrap + that child's size properly). + + The reference case has identical markup to this testcase, except it + lacks the "display:grid" styling on the container boxes. So, its + containers are unremarkable XUL "-moz-box" containers. The testcase and + reference should match, because both sorts of boxes (CSS grids and XUL + -moz-box containers) should auto size to their sole child's preferred + ISize and BSize (in this context where they're thrown directly into + a <window> element with align="start"). --> + <html:style> + .container { + display: grid; + border: 1px solid purple; + } + + * { margin: 0 } + </html:style> + <hbox class="container"> + <label value="label"/> + </hbox> + <hbox class="container"> + <label value="label" style="padding: 5px"/> + </hbox> + <hbox class="container"> + <label value="label" style="margin:8px"/> + </hbox> + <hbox class="container"> + <menulist> + </menulist> + </hbox> + <hbox class="container"> + <menulist style="margin: 10px"> + </menulist> + </hbox> + <hbox class="container"> + <menulist> + <menupopup> + <menuitem value="1" label="item"/> + </menupopup> + </menulist> + </hbox> + <hbox class="container"> + <checkbox></checkbox> + </hbox> +</window> diff --git a/layout/reftests/xul/generate-object-fit-xul-tests.sh b/layout/reftests/xul/generate-object-fit-xul-tests.sh new file mode 100644 index 0000000000..624b2e73ef --- /dev/null +++ b/layout/reftests/xul/generate-object-fit-xul-tests.sh @@ -0,0 +1,94 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# Script to generate XUL <image> reftest files, from corresponding reftest +# files that use <img>. +# +# This script expects to be run from this working directory: +# mozilla-central/layout/reftests/w3c-css/submitted/images3 + +XUL_REFTEST_PATH="../../../xul" + +imageFileArr=("colors-16x8.png" "colors-8x16.png" + "colors-16x8.svg" "colors-8x16.svg" + "colors-16x8-noSize.svg" "colors-8x16-noSize.svg" + "colors-16x8-parDefault.svg" "colors-8x16-parDefault.svg") +numImageFiles=${#imageFileArr[@]} + +# Copy image files +for ((i = 0; i < $numImageFiles; i++)); do + imageFileName=${imageFileArr[$i]} + imageDest=$XUL_REFTEST_PATH/$imageFileName + + echo "Copying $imageDest." + hg cp support/$imageFileName $imageDest +done + +# Add comment to reftest.list in dest directory: +reftestListFileName="$XUL_REFTEST_PATH/reftest.list" +echo " +# Tests for XUL <image> with 'object-fit' & 'object-position': +# These tests should be very similar to tests in our w3c-css/submitted/images3 +# reftest directory. They live here because they use XUL, and it +# wouldn't be fair of us to make a W3C testsuite implicitly depend on XUL."\ + >> $reftestListFileName + +# Loop across all object-fit tests that use <img> ("i" suffix): +for origTestName in object-fit*i.html; do + newTestName=$(echo $origTestName | + sed "s/i.html/.xul/") + + # Find the corresponding reference case: + referenceName=$(echo $origTestName | + sed "s/i.html/-ref.html/") + + # Generate reference file (dropping "support" subdir from image paths): + echo "Copying $referenceName to $XUL_REFTEST_PATH." + newReferenceFullPath=$XUL_REFTEST_PATH/$referenceName + hg cp $referenceName $newReferenceFullPath + sed -i "s,support/,," $newReferenceFullPath + + # Generate testcase + # (converting <video poster="support/foo.png"> to <video src="foo.webm">): + echo "Generating $newTestName from $origTestName." + newTestFullPath=$XUL_REFTEST_PATH/$newTestName + hg cp $origTestName $newTestFullPath + + # Replace doctype with XML decl: + sed -i "s/<!DOCTYPE html>/<?xml version=\"1.0\"?>/" $newTestFullPath + + # Replace html tags with window tags: + sed -i "s,<html>,<window xmlns=\"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul\">," $newTestFullPath + sed -i "s,</html>,</window>," $newTestFullPath + + # Delete a bunch of HTML (not XUL) / W3C-testsuite boilerplate: + sed -i "/head>/d" $newTestFullPath # Delete head open & close tags + sed -i "/body>/d" $newTestFullPath # Delete body open & close tags + sed -i "/<meta/d" $newTestFullPath # Delete meta charset tag + sed -i "/<title/d" $newTestFullPath # Delete title line + sed -i "/<link/d" $newTestFullPath # Delete link tags + + # Add 4px to all sizes, since in XUL, sizes are for border-box + # instead of content-box. + sed -i "s/ 48px/ 52px/" $newTestFullPath + sed -i "s/ 32px/ 36px/" $newTestFullPath + sed -i "s/ 8px/ 12px/" $newTestFullPath + + # Fix style open/close tags, and add 8px of padding on outer <window> to + # match our HTML reference case, and change style rule to target <image>: + sed -i "s, <style type=\"text/css\">,\<style xmlns=\"http://www.w3.org/1999/xhtml\"><![CDATA[\n window { padding: 8px; }," $newTestFullPath + sed -i "s, </style>,]]></style>," $newTestFullPath + sed -i "s/img {/image {/" $newTestFullPath + + sed -i "s,support/,," $newTestFullPath + sed -i "s,<img\(.*\)>,<image\1/>," $newTestFullPath + sed -i "s, <!--,<hbox>\n <!--," $newTestFullPath + sed -i "s, <br>,</hbox>," $newTestFullPath + + # Update reftest manifest: + echo "== $newTestName $referenceName" \ + >> $reftestListFileName + +done diff --git a/layout/reftests/xul/generate-object-position-xul-tests.sh b/layout/reftests/xul/generate-object-position-xul-tests.sh new file mode 100644 index 0000000000..b03b245790 --- /dev/null +++ b/layout/reftests/xul/generate-object-position-xul-tests.sh @@ -0,0 +1,68 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# Script to generate XUL <image> reftest files, from corresponding reftest +# files that use <img>. +# +# This script expects to be run from this working directory: +# mozilla-central/layout/reftests/w3c-css/submitted/images3 +# and it expects to be run *after* generate-object-fit-xul-tests.sh, since the +# copied test files will make use of image resources which are copied by that +# other script. + +XUL_REFTEST_PATH="../../../xul" + +reftestListFileName="$XUL_REFTEST_PATH/reftest.list" + +# Loop across all object-position tests that use <img> ("i" suffix): +for origTestName in object-position-png-*i.html; do + newTestName=$(echo $origTestName | + sed "s/i.html/.xul/") + + # Find the corresponding reference case: + referenceName=$(echo $origTestName | + sed "s/i.html/-ref.html/") + + # Generate reference file (dropping "support" subdir from image paths): + echo "Copying $referenceName to $XUL_REFTEST_PATH." + newReferenceFullPath=$XUL_REFTEST_PATH/$referenceName + hg cp $referenceName $newReferenceFullPath + sed -i "s,support/,," $newReferenceFullPath + + # Generate testcase + # (converting <video poster="support/foo.png"> to <video src="foo.webm">): + echo "Generating $newTestName from $origTestName." + newTestFullPath=$XUL_REFTEST_PATH/$newTestName + hg cp $origTestName $newTestFullPath + + # Replace doctype with XML decl: + sed -i "s/<!DOCTYPE html>/<?xml version=\"1.0\"?>/" $newTestFullPath + + # Replace html tags with window tags: + sed -i "s,<html>,<window xmlns=\"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul\">," $newTestFullPath + + # Delete a bunch of HTML (not XUL) / W3C-testsuite boilerplate: + sed -i "/head>/d" $newTestFullPath # Delete head open & close tags + sed -i "/body>/d" $newTestFullPath # Delete body open & close tags + sed -i "/<meta/d" $newTestFullPath # Delete meta charset tag + sed -i "/<title/d" $newTestFullPath # Delete title line + sed -i "/<link/d" $newTestFullPath # Delete link tags + + # Fix style open/close tags, and add 8px of padding on outer <window> to + # match our HTML reference case, and change style rule to target <image>. + # Also, add <hbox> to wrap the image elements. + sed -i "s, <style type=\"text/css\">,\<style xmlns=\"http://www.w3.org/1999/xhtml\"><![CDATA[\n window { padding: 8px; }," $newTestFullPath + sed -i "s, </style>,]]></style>\n <hbox>," $newTestFullPath + sed -i "s,</html>, </hbox>\n</window>," $newTestFullPath + sed -i "s/img {/image {/" $newTestFullPath + + sed -i "s,support/,," $newTestFullPath + sed -i "s,<img\(.*\)>,<image\1/>," $newTestFullPath + + # Update reftest manifest: + echo "== $newTestName $referenceName" \ + >> $reftestListFileName + +done diff --git a/layout/reftests/xul/green-ref.xhtml b/layout/reftests/xul/green-ref.xhtml new file mode 100644 index 0000000000..1ae0cb548c --- /dev/null +++ b/layout/reftests/xul/green-ref.xhtml @@ -0,0 +1,3 @@ +<?xml version="1.0"?> +<foo xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" style="background-color: green;"> +</foo> diff --git a/layout/reftests/xul/image-appearance-dynamic-ref.xhtml b/layout/reftests/xul/image-appearance-dynamic-ref.xhtml new file mode 100644 index 0000000000..f638743ab1 --- /dev/null +++ b/layout/reftests/xul/image-appearance-dynamic-ref.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + image { + list-style-image: url(colors-16x8.png); + -moz-appearance: button-arrow-up; + } + ]]></style> + <hbox> + <image/> + </hbox> +</window> diff --git a/layout/reftests/xul/image-appearance-dynamic.xhtml b/layout/reftests/xul/image-appearance-dynamic.xhtml new file mode 100644 index 0000000000..9395a6cef6 --- /dev/null +++ b/layout/reftests/xul/image-appearance-dynamic.xhtml @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + image { + list-style-image: url(colors-16x8.png); + } + .tweak { + -moz-appearance: button-arrow-up; + } + ]]></style> + <hbox> + <image/> + </hbox> + <script> + window.addEventListener("load", function() { + document.querySelector("image").className = "tweak"; + document.documentElement.className = ""; + }); + </script> +</window> diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1205630-ref.html b/layout/reftests/xul/inactive-fixed-bg-bug1205630-ref.html new file mode 100644 index 0000000000..2322e4004d --- /dev/null +++ b/layout/reftests/xul/inactive-fixed-bg-bug1205630-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Testcase</title> + +<style> + +body { + margin: 0px; + padding: 0px; +} + +#inner { + width: 100px; + height: 100px; + background: linear-gradient(red, blue) no-repeat; + background-position: -50px -50px; + background-size: 800px 800px; +} + +#outer { + margin: 50px 50px 0; + width: 100px; + height: 100px; + clip-path: url(#path); + position: fixed; +} + +</style> +</head> +<body> +<div id="outer"> + <div id="inner"></div> +</div> + +<svg height="0"> + <defs> + <clipPath id="path" clipPathUnits="objectBoundingBox"> + <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/> + </clipPath> + </defs> +</svg> +</body> +</html> diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1205630.xhtml b/layout/reftests/xul/inactive-fixed-bg-bug1205630.xhtml new file mode 100644 index 0000000000..306338c3fd --- /dev/null +++ b/layout/reftests/xul/inactive-fixed-bg-bug1205630.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <!-- Test that a fixed background layer inside an inactive layer tree + is clipped correctly. Here, the inactive layer tree is created by + the SVGEffects display item built for the clip-path on the outer div. + The bug only reproduces in XUL because fixed backgrounds are only + layerized if their animated geometry root is the root frame, but + in HTML there's always an enclosing HTML scroll frame. --> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + #inner { + width: 100px; + height: 100px; + background: linear-gradient(red, blue) no-repeat fixed; + background-size: 800px 800px; + } + + #outer { + margin: 50px 50px 0; + width: 100px; + height: 100px; + clip-path: url(#path); + position: fixed; + } + ]]></style> + <div xmlns="http://www.w3.org/1999/xhtml" id="outer"> + <div xmlns="http://www.w3.org/1999/xhtml" id="inner"></div> + </div> + + <svg xmlns="http://www.w3.org/2000/svg" height="0"> + <defs> + <clipPath id="path" clipPathUnits="objectBoundingBox"> + <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/> + </clipPath> + </defs> + </svg> +</window> diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1272525-ref.html b/layout/reftests/xul/inactive-fixed-bg-bug1272525-ref.html new file mode 100644 index 0000000000..82dc3193bb --- /dev/null +++ b/layout/reftests/xul/inactive-fixed-bg-bug1272525-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>Testcase</title> + +<style> + +body { + margin: 0px; + padding: 0px; +} + +#inner { + width: 100px; + height: 100px; + background: linear-gradient(red, blue) no-repeat; + background-position: -50px -50px; + background-size: 800px 800px; +} + +#outer { + margin: 50px 50px 0; + width: 100px; + height: 200px; + clip-path: url(#path); + position: fixed; +} + +</style> +</head> +<body> +<div id="outer"> + <div id="inner"></div> +</div> + +<svg height="0"> + <defs> + <clipPath id="path" clipPathUnits="objectBoundingBox"> + <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/> + </clipPath> + </defs> +</svg> +</body> +</html> diff --git a/layout/reftests/xul/inactive-fixed-bg-bug1272525.xhtml b/layout/reftests/xul/inactive-fixed-bg-bug1272525.xhtml new file mode 100644 index 0000000000..81f2e9f8cf --- /dev/null +++ b/layout/reftests/xul/inactive-fixed-bg-bug1272525.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <!-- Test that a fixed background layer inside an inactive layer tree + is clipped correctly. Here, the inactive layer tree is created by + the SVGEffects display item built for the clip-path on the outer div. + The bug only reproduces in XUL because fixed backgrounds are only + layerized if their animated geometry root is the root frame, but + in HTML there's always an enclosing HTML scroll frame. --> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + #inner { + width: 100px; + height: 100px; + background: linear-gradient(red, blue) no-repeat fixed; + background-size: 800px 800px; + } + + #outer { + margin: 50px 50px 0; + width: 100px; + height: 200px; + clip-path: url(#path); + position: fixed; + } + ]]></style> + <div xmlns="http://www.w3.org/1999/xhtml" id="outer"> + <div xmlns="http://www.w3.org/1999/xhtml" id="inner"></div> + </div> + + <svg xmlns="http://www.w3.org/2000/svg" height="0"> + <defs> + <clipPath id="path" clipPathUnits="objectBoundingBox"> + <polygon points="0.25,0.25 0.25,0.75 0.75,0.75 0.75,0.25"/> + </clipPath> + </defs> + </svg> +</window> diff --git a/layout/reftests/xul/mac-tab-toolbar-ref.xhtml b/layout/reftests/xul/mac-tab-toolbar-ref.xhtml new file mode 100644 index 0000000000..cfb3cd30f5 --- /dev/null +++ b/layout/reftests/xul/mac-tab-toolbar-ref.xhtml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <tabbox id="tab"> + <tabs> + <tab label="zeroTab" id="0" selected="true" /> + <tab label="firstTab" id="1" /> + <tab label="secondtab" id="2" /> + <tab label="thirdTab" id="3" /> + <tab label="fourthTab" id="4" /> + <tab label="fifthTab" id="5" /> + <tab label="sixthTab" id="6" /> + <tab label="seventhTab" id="7" /> + <tab label="eightTab" id="8" /> + <tab label="ninthTab" id="9" /> + </tabs> + </tabbox> +</window> diff --git a/layout/reftests/xul/mac-tab-toolbar.xhtml b/layout/reftests/xul/mac-tab-toolbar.xhtml new file mode 100644 index 0000000000..4582dbc7de --- /dev/null +++ b/layout/reftests/xul/mac-tab-toolbar.xhtml @@ -0,0 +1,43 @@ +<?xml version="1.0" encoding="UTF-8"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" class="reftest-wait"> + <tabbox id="tab"> + <tabs> + <tab label="zeroTab" id="0" /> + <tab label="firstTab" id="1" /> + <tab label="secondtab" id="2" /> + <tab label="thirdTab" id="3" /> + <tab label="fourthTab" id="4" /> + <tab label="fifthTab" id="5" /> + <tab label="sixthTab" id="6" /> + <tab label="seventhTab" id="7" /> + <tab label="eightTab" id="8" /> + <tab label="ninthTab" id="9" /> + </tabs> + </tabbox> + + <script type="text/javascript"> + // Overly try to iterate and click through the tabs + // since its a timing specific bug. + var tabCount = 10; + var loops = 10; + var i = tabCount * loops; + + function clickTabs() { + var currentTab = i % tabCount; + var tab = document.getElementById(currentTab); + tab.click(); + + if (i > 0) { + i--; + // Relinquish main thread so we can paint + setTimeout(clickTabs, 0); + } else { + // Test finished + document.documentElement.removeAttribute("class"); + } + } + + window.addEventListener('MozReftestInvalidate', clickTabs); + </script> +</window> diff --git a/layout/reftests/xul/menuitem-key-ref.xhtml b/layout/reftests/xul/menuitem-key-ref.xhtml new file mode 100644 index 0000000000..29b0d89ae1 --- /dev/null +++ b/layout/reftests/xul/menuitem-key-ref.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<menuitem id="m1" label="Menu1" key="keytwo"/> +<menuitem id="m2" label="Menu2"/> +<menuitem id="m3" label="Menu3" key="keythree"/> +<menuitem id="m4" label="Menu4" acceltext="Text"/> +<menuitem id="m5" label="Menu5" acceltext="Text"/> +<menuitem id="m6" label="Menu6" acceltext="Text"/> +<menuitem id="m7" label="Menu7" key="keythree"/> +<menuitem id="m8" label="Menu8"/> +<menuitem id="m9" label="Menu9"/> + +<keyset> + <key id="keytwo" key="Y" modifiers="control"/> + <key id="keythree" key="X" modifiers="accel"/> +</keyset> + +</window> diff --git a/layout/reftests/xul/menuitem-key.xhtml b/layout/reftests/xul/menuitem-key.xhtml new file mode 100644 index 0000000000..d9e8a08602 --- /dev/null +++ b/layout/reftests/xul/menuitem-key.xhtml @@ -0,0 +1,47 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<window class="reftest-wait" onload="changeKeys()" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + +<menuitem id="m1" label="Menu1" key="keyone"/> +<menuitem id="m2" label="Menu2" key="keytwo"/> +<menuitem id="m3" label="Menu3"/> +<menuitem id="m4" label="Menu4"/> +<menuitem id="m5" label="Menu5"/> +<menuitem id="m6" label="Menu6" key="keythree" acceltext="Text"/> +<menuitem id="m7" label="Menu7" key="keythree" acceltext="Text"/> +<menuitem id="m8" label="Menu8" key="keythree" acceltext="Text"/> +<menuitem id="m9" label="Menu9" key="keytwo"/> + +<script> +function changeKeys() +{ + document.getElementById("m1").setAttribute("key", "keytwo"); + document.getElementById("m2").removeAttribute("key"); + document.getElementById("m3").setAttribute("key", "keythree"); + + document.getElementById("m4").setAttribute("key", "keyone"); + document.getElementById("m4").setAttribute("acceltext", "Text"); + + document.getElementById("m5").setAttribute("acceltext", "Text"); + document.getElementById("m5").setAttribute("key", "keytwo"); + + document.getElementById("m6").removeAttribute("key"); + document.getElementById("m7").removeAttribute("acceltext"); + + document.getElementById("m8").removeAttribute("key"); + document.getElementById("m8").removeAttribute("acceltext"); + + document.getElementById("m9").removeAttribute("key"); + + document.documentElement.className=''; +} +</script> + +<keyset> + <key id="keyone" key="Z" modifiers="control"/> + <key id="keytwo" key="Y" modifiers="control"/> + <key id="keythree" key="X" modifiers="accel"/> +</keyset> + +</window> diff --git a/layout/reftests/xul/menulist-shrinkwrap-1-ref.xhtml b/layout/reftests/xul/menulist-shrinkwrap-1-ref.xhtml new file mode 100644 index 0000000000..06449e31fa --- /dev/null +++ b/layout/reftests/xul/menulist-shrinkwrap-1-ref.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="start"> + <menulist style="color: transparent"> + <menupopup> + <menuitem value="1" label="short" /> + <menuitem value="2" label="long item" /> + </menupopup> + </menulist> +</window> diff --git a/layout/reftests/xul/menulist-shrinkwrap-1.xhtml b/layout/reftests/xul/menulist-shrinkwrap-1.xhtml new file mode 100644 index 0000000000..80908dc365 --- /dev/null +++ b/layout/reftests/xul/menulist-shrinkwrap-1.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="start"> + <menulist style="color: transparent"> + <menupopup> + <menuitem value="1" label="long item" /> + <menuitem value="2" label="short" /> + </menupopup> + </menulist> +</window> diff --git a/layout/reftests/xul/menulist-shrinkwrap-2-ref.xhtml b/layout/reftests/xul/menulist-shrinkwrap-2-ref.xhtml new file mode 100644 index 0000000000..a8b3f27ae1 --- /dev/null +++ b/layout/reftests/xul/menulist-shrinkwrap-2-ref.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"> + <![CDATA[ + menulist, menuitem, label { font: Menu } + #measurelabel { color: transparent } + ]]> + </style> + <stack> + <vbox> + <menulist> + <menupopup> + <menuitem value="1" label="long item" /> + <menuitem value="2" label="short" /> + </menupopup> + </menulist> + </vbox> + <hbox> + <label id="measurelabel" value="long item" /> + <!-- cover up the right edge of the above --> + <box flex="1" style="background: white" /> + </hbox> + </stack> +</window> diff --git a/layout/reftests/xul/menulist-shrinkwrap-2.xhtml b/layout/reftests/xul/menulist-shrinkwrap-2.xhtml new file mode 100644 index 0000000000..25db3a89f3 --- /dev/null +++ b/layout/reftests/xul/menulist-shrinkwrap-2.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"> + <![CDATA[ + menulist, menuitem, label { font: Menu } + #measurelabel { color: transparent } + ]]> + </style> + <stack> + <vbox align="start"> + <menulist> + <menupopup> + <menuitem value="1" label="long item" /> + <menuitem value="2" label="short" /> + </menupopup> + </menulist> + </vbox> + <hbox> + <label id="measurelabel" value="long item" /> + <!-- cover up the right edge of the above --> + <box flex="1" style="background: white" /> + </hbox> + </stack> +</window> diff --git a/layout/reftests/xul/object-fit-contain-png-001-ref.html b/layout/reftests/xul/object-fit-contain-png-001-ref.html new file mode 100644 index 0000000000..2f96fbfd81 --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-png-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.png"); + background-size: contain; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-contain-png-001.xhtml b/layout/reftests/xul/object-fit-contain-png-001.xhtml new file mode 100644 index 0000000000..cb4477fc1c --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-png-001.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8.png" class="bigWide tr"/> + <image src="colors-16x8.png" class="bigWide bl"/> + <image src="colors-16x8.png" class="bigWide tl"/> + <image src="colors-16x8.png" class="bigWide br"/> + <image src="colors-16x8.png" class="bigWide tc"/> + <image src="colors-16x8.png" class="bigWide cr"/> + <image src="colors-16x8.png" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8.png" class="bigTall tr"/> + <image src="colors-16x8.png" class="bigTall bl"/> + <image src="colors-16x8.png" class="bigTall tl"/> + <image src="colors-16x8.png" class="bigTall br"/> + <image src="colors-16x8.png" class="bigTall tc"/> + <image src="colors-16x8.png" class="bigTall cr"/> + <image src="colors-16x8.png" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8.png" class="small tr"/> + <image src="colors-16x8.png" class="small bl"/> + <image src="colors-16x8.png" class="small tl"/> + <image src="colors-16x8.png" class="small br"/> + <image src="colors-16x8.png" class="small tc"/> + <image src="colors-16x8.png" class="small cr"/> + <image src="colors-16x8.png" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-contain-png-002-ref.html b/layout/reftests/xul/object-fit-contain-png-002-ref.html new file mode 100644 index 0000000000..bff827c5c6 --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-png-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.png"); + background-size: contain; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-contain-png-002.xhtml b/layout/reftests/xul/object-fit-contain-png-002.xhtml new file mode 100644 index 0000000000..87df2849dd --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-png-002.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16.png" class="bigWide tr"/> + <image src="colors-8x16.png" class="bigWide bl"/> + <image src="colors-8x16.png" class="bigWide tl"/> + <image src="colors-8x16.png" class="bigWide br"/> + <image src="colors-8x16.png" class="bigWide tc"/> + <image src="colors-8x16.png" class="bigWide cr"/> + <image src="colors-8x16.png" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16.png" class="bigTall tr"/> + <image src="colors-8x16.png" class="bigTall bl"/> + <image src="colors-8x16.png" class="bigTall tl"/> + <image src="colors-8x16.png" class="bigTall br"/> + <image src="colors-8x16.png" class="bigTall tc"/> + <image src="colors-8x16.png" class="bigTall cr"/> + <image src="colors-8x16.png" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16.png" class="small tr"/> + <image src="colors-8x16.png" class="small bl"/> + <image src="colors-8x16.png" class="small tl"/> + <image src="colors-8x16.png" class="small br"/> + <image src="colors-8x16.png" class="small tc"/> + <image src="colors-8x16.png" class="small cr"/> + <image src="colors-8x16.png" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-contain-svg-001-ref.html b/layout/reftests/xul/object-fit-contain-svg-001-ref.html new file mode 100644 index 0000000000..d532d3414d --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-001-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-contain-svg-001.xhtml b/layout/reftests/xul/object-fit-contain-svg-001.xhtml new file mode 100644 index 0000000000..520574087d --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-001.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8.svg" class="bigWide tr"/> + <image src="colors-16x8.svg" class="bigWide bl"/> + <image src="colors-16x8.svg" class="bigWide tl"/> + <image src="colors-16x8.svg" class="bigWide br"/> + <image src="colors-16x8.svg" class="bigWide tc"/> + <image src="colors-16x8.svg" class="bigWide cr"/> + <image src="colors-16x8.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8.svg" class="bigTall tr"/> + <image src="colors-16x8.svg" class="bigTall bl"/> + <image src="colors-16x8.svg" class="bigTall tl"/> + <image src="colors-16x8.svg" class="bigTall br"/> + <image src="colors-16x8.svg" class="bigTall tc"/> + <image src="colors-16x8.svg" class="bigTall cr"/> + <image src="colors-16x8.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8.svg" class="small tr"/> + <image src="colors-16x8.svg" class="small bl"/> + <image src="colors-16x8.svg" class="small tl"/> + <image src="colors-16x8.svg" class="small br"/> + <image src="colors-16x8.svg" class="small tc"/> + <image src="colors-16x8.svg" class="small cr"/> + <image src="colors-16x8.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-contain-svg-002-ref.html b/layout/reftests/xul/object-fit-contain-svg-002-ref.html new file mode 100644 index 0000000000..98262685c9 --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-002-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-contain-svg-002.xhtml b/layout/reftests/xul/object-fit-contain-svg-002.xhtml new file mode 100644 index 0000000000..39be97b062 --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-002.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16.svg" class="bigWide tr"/> + <image src="colors-8x16.svg" class="bigWide bl"/> + <image src="colors-8x16.svg" class="bigWide tl"/> + <image src="colors-8x16.svg" class="bigWide br"/> + <image src="colors-8x16.svg" class="bigWide tc"/> + <image src="colors-8x16.svg" class="bigWide cr"/> + <image src="colors-8x16.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16.svg" class="bigTall tr"/> + <image src="colors-8x16.svg" class="bigTall bl"/> + <image src="colors-8x16.svg" class="bigTall tl"/> + <image src="colors-8x16.svg" class="bigTall br"/> + <image src="colors-8x16.svg" class="bigTall tc"/> + <image src="colors-8x16.svg" class="bigTall cr"/> + <image src="colors-8x16.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16.svg" class="small tr"/> + <image src="colors-8x16.svg" class="small bl"/> + <image src="colors-8x16.svg" class="small tl"/> + <image src="colors-8x16.svg" class="small br"/> + <image src="colors-8x16.svg" class="small tc"/> + <image src="colors-8x16.svg" class="small cr"/> + <image src="colors-8x16.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-contain-svg-003-ref.html b/layout/reftests/xul/object-fit-contain-svg-003-ref.html new file mode 100644 index 0000000000..f8aca453cc --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-003-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8-noSize.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-contain-svg-003.xhtml b/layout/reftests/xul/object-fit-contain-svg-003.xhtml new file mode 100644 index 0000000000..02cc65e6b6 --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-003.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8-noSize.svg" class="bigWide tr"/> + <image src="colors-16x8-noSize.svg" class="bigWide bl"/> + <image src="colors-16x8-noSize.svg" class="bigWide tl"/> + <image src="colors-16x8-noSize.svg" class="bigWide br"/> + <image src="colors-16x8-noSize.svg" class="bigWide tc"/> + <image src="colors-16x8-noSize.svg" class="bigWide cr"/> + <image src="colors-16x8-noSize.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8-noSize.svg" class="bigTall tr"/> + <image src="colors-16x8-noSize.svg" class="bigTall bl"/> + <image src="colors-16x8-noSize.svg" class="bigTall tl"/> + <image src="colors-16x8-noSize.svg" class="bigTall br"/> + <image src="colors-16x8-noSize.svg" class="bigTall tc"/> + <image src="colors-16x8-noSize.svg" class="bigTall cr"/> + <image src="colors-16x8-noSize.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8-noSize.svg" class="small tr"/> + <image src="colors-16x8-noSize.svg" class="small bl"/> + <image src="colors-16x8-noSize.svg" class="small tl"/> + <image src="colors-16x8-noSize.svg" class="small br"/> + <image src="colors-16x8-noSize.svg" class="small tc"/> + <image src="colors-16x8-noSize.svg" class="small cr"/> + <image src="colors-16x8-noSize.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-contain-svg-004-ref.html b/layout/reftests/xul/object-fit-contain-svg-004-ref.html new file mode 100644 index 0000000000..7699a15db1 --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-004-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16-noSize.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-contain-svg-004.xhtml b/layout/reftests/xul/object-fit-contain-svg-004.xhtml new file mode 100644 index 0000000000..c80cf896db --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-004.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16-noSize.svg" class="bigWide tr"/> + <image src="colors-8x16-noSize.svg" class="bigWide bl"/> + <image src="colors-8x16-noSize.svg" class="bigWide tl"/> + <image src="colors-8x16-noSize.svg" class="bigWide br"/> + <image src="colors-8x16-noSize.svg" class="bigWide tc"/> + <image src="colors-8x16-noSize.svg" class="bigWide cr"/> + <image src="colors-8x16-noSize.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16-noSize.svg" class="bigTall tr"/> + <image src="colors-8x16-noSize.svg" class="bigTall bl"/> + <image src="colors-8x16-noSize.svg" class="bigTall tl"/> + <image src="colors-8x16-noSize.svg" class="bigTall br"/> + <image src="colors-8x16-noSize.svg" class="bigTall tc"/> + <image src="colors-8x16-noSize.svg" class="bigTall cr"/> + <image src="colors-8x16-noSize.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16-noSize.svg" class="small tr"/> + <image src="colors-8x16-noSize.svg" class="small bl"/> + <image src="colors-8x16-noSize.svg" class="small tl"/> + <image src="colors-8x16-noSize.svg" class="small br"/> + <image src="colors-8x16-noSize.svg" class="small tc"/> + <image src="colors-8x16-noSize.svg" class="small cr"/> + <image src="colors-8x16-noSize.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-contain-svg-005-ref.html b/layout/reftests/xul/object-fit-contain-svg-005-ref.html new file mode 100644 index 0000000000..6a7c2bfeb1 --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-005-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8-parDefault.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-contain-svg-005.xhtml b/layout/reftests/xul/object-fit-contain-svg-005.xhtml new file mode 100644 index 0000000000..6157959456 --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-005.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8-parDefault.svg" class="bigWide tr"/> + <image src="colors-16x8-parDefault.svg" class="bigWide bl"/> + <image src="colors-16x8-parDefault.svg" class="bigWide tl"/> + <image src="colors-16x8-parDefault.svg" class="bigWide br"/> + <image src="colors-16x8-parDefault.svg" class="bigWide tc"/> + <image src="colors-16x8-parDefault.svg" class="bigWide cr"/> + <image src="colors-16x8-parDefault.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8-parDefault.svg" class="bigTall tr"/> + <image src="colors-16x8-parDefault.svg" class="bigTall bl"/> + <image src="colors-16x8-parDefault.svg" class="bigTall tl"/> + <image src="colors-16x8-parDefault.svg" class="bigTall br"/> + <image src="colors-16x8-parDefault.svg" class="bigTall tc"/> + <image src="colors-16x8-parDefault.svg" class="bigTall cr"/> + <image src="colors-16x8-parDefault.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8-parDefault.svg" class="small tr"/> + <image src="colors-16x8-parDefault.svg" class="small bl"/> + <image src="colors-16x8-parDefault.svg" class="small tl"/> + <image src="colors-16x8-parDefault.svg" class="small br"/> + <image src="colors-16x8-parDefault.svg" class="small tc"/> + <image src="colors-16x8-parDefault.svg" class="small cr"/> + <image src="colors-16x8-parDefault.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-contain-svg-006-ref.html b/layout/reftests/xul/object-fit-contain-svg-006-ref.html new file mode 100644 index 0000000000..412aebc14c --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-006-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16-parDefault.svg"); + background-size: contain; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-contain-svg-006.xhtml b/layout/reftests/xul/object-fit-contain-svg-006.xhtml new file mode 100644 index 0000000000..0ea0401299 --- /dev/null +++ b/layout/reftests/xul/object-fit-contain-svg-006.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: contain; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16-parDefault.svg" class="bigWide tr"/> + <image src="colors-8x16-parDefault.svg" class="bigWide bl"/> + <image src="colors-8x16-parDefault.svg" class="bigWide tl"/> + <image src="colors-8x16-parDefault.svg" class="bigWide br"/> + <image src="colors-8x16-parDefault.svg" class="bigWide tc"/> + <image src="colors-8x16-parDefault.svg" class="bigWide cr"/> + <image src="colors-8x16-parDefault.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16-parDefault.svg" class="bigTall tr"/> + <image src="colors-8x16-parDefault.svg" class="bigTall bl"/> + <image src="colors-8x16-parDefault.svg" class="bigTall tl"/> + <image src="colors-8x16-parDefault.svg" class="bigTall br"/> + <image src="colors-8x16-parDefault.svg" class="bigTall tc"/> + <image src="colors-8x16-parDefault.svg" class="bigTall cr"/> + <image src="colors-8x16-parDefault.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16-parDefault.svg" class="small tr"/> + <image src="colors-8x16-parDefault.svg" class="small bl"/> + <image src="colors-8x16-parDefault.svg" class="small tl"/> + <image src="colors-8x16-parDefault.svg" class="small br"/> + <image src="colors-8x16-parDefault.svg" class="small tc"/> + <image src="colors-8x16-parDefault.svg" class="small cr"/> + <image src="colors-8x16-parDefault.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-cover-png-001-ref.html b/layout/reftests/xul/object-fit-cover-png-001-ref.html new file mode 100644 index 0000000000..fa4f776702 --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-png-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.png"); + background-size: cover; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-cover-png-001.xhtml b/layout/reftests/xul/object-fit-cover-png-001.xhtml new file mode 100644 index 0000000000..e0e6430ca9 --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-png-001.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8.png" class="bigWide tr"/> + <image src="colors-16x8.png" class="bigWide bl"/> + <image src="colors-16x8.png" class="bigWide tl"/> + <image src="colors-16x8.png" class="bigWide br"/> + <image src="colors-16x8.png" class="bigWide tc"/> + <image src="colors-16x8.png" class="bigWide cr"/> + <image src="colors-16x8.png" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8.png" class="bigTall tr"/> + <image src="colors-16x8.png" class="bigTall bl"/> + <image src="colors-16x8.png" class="bigTall tl"/> + <image src="colors-16x8.png" class="bigTall br"/> + <image src="colors-16x8.png" class="bigTall tc"/> + <image src="colors-16x8.png" class="bigTall cr"/> + <image src="colors-16x8.png" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8.png" class="small tr"/> + <image src="colors-16x8.png" class="small bl"/> + <image src="colors-16x8.png" class="small tl"/> + <image src="colors-16x8.png" class="small br"/> + <image src="colors-16x8.png" class="small tc"/> + <image src="colors-16x8.png" class="small cr"/> + <image src="colors-16x8.png" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-cover-png-002-ref.html b/layout/reftests/xul/object-fit-cover-png-002-ref.html new file mode 100644 index 0000000000..eb4c3dcad3 --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-png-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.png"); + background-size: cover; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-cover-png-002.xhtml b/layout/reftests/xul/object-fit-cover-png-002.xhtml new file mode 100644 index 0000000000..5a47f5472f --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-png-002.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16.png" class="bigWide tr"/> + <image src="colors-8x16.png" class="bigWide bl"/> + <image src="colors-8x16.png" class="bigWide tl"/> + <image src="colors-8x16.png" class="bigWide br"/> + <image src="colors-8x16.png" class="bigWide tc"/> + <image src="colors-8x16.png" class="bigWide cr"/> + <image src="colors-8x16.png" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16.png" class="bigTall tr"/> + <image src="colors-8x16.png" class="bigTall bl"/> + <image src="colors-8x16.png" class="bigTall tl"/> + <image src="colors-8x16.png" class="bigTall br"/> + <image src="colors-8x16.png" class="bigTall tc"/> + <image src="colors-8x16.png" class="bigTall cr"/> + <image src="colors-8x16.png" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16.png" class="small tr"/> + <image src="colors-8x16.png" class="small bl"/> + <image src="colors-8x16.png" class="small tl"/> + <image src="colors-8x16.png" class="small br"/> + <image src="colors-8x16.png" class="small tc"/> + <image src="colors-8x16.png" class="small cr"/> + <image src="colors-8x16.png" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-cover-svg-001-ref.html b/layout/reftests/xul/object-fit-cover-svg-001-ref.html new file mode 100644 index 0000000000..4f479d37d3 --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-001-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-cover-svg-001.xhtml b/layout/reftests/xul/object-fit-cover-svg-001.xhtml new file mode 100644 index 0000000000..22aa52b10b --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-001.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8.svg" class="bigWide tr"/> + <image src="colors-16x8.svg" class="bigWide bl"/> + <image src="colors-16x8.svg" class="bigWide tl"/> + <image src="colors-16x8.svg" class="bigWide br"/> + <image src="colors-16x8.svg" class="bigWide tc"/> + <image src="colors-16x8.svg" class="bigWide cr"/> + <image src="colors-16x8.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8.svg" class="bigTall tr"/> + <image src="colors-16x8.svg" class="bigTall bl"/> + <image src="colors-16x8.svg" class="bigTall tl"/> + <image src="colors-16x8.svg" class="bigTall br"/> + <image src="colors-16x8.svg" class="bigTall tc"/> + <image src="colors-16x8.svg" class="bigTall cr"/> + <image src="colors-16x8.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8.svg" class="small tr"/> + <image src="colors-16x8.svg" class="small bl"/> + <image src="colors-16x8.svg" class="small tl"/> + <image src="colors-16x8.svg" class="small br"/> + <image src="colors-16x8.svg" class="small tc"/> + <image src="colors-16x8.svg" class="small cr"/> + <image src="colors-16x8.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-cover-svg-002-ref.html b/layout/reftests/xul/object-fit-cover-svg-002-ref.html new file mode 100644 index 0000000000..94ee049439 --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-002-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-cover-svg-002.xhtml b/layout/reftests/xul/object-fit-cover-svg-002.xhtml new file mode 100644 index 0000000000..c21a275cb1 --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-002.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16.svg" class="bigWide tr"/> + <image src="colors-8x16.svg" class="bigWide bl"/> + <image src="colors-8x16.svg" class="bigWide tl"/> + <image src="colors-8x16.svg" class="bigWide br"/> + <image src="colors-8x16.svg" class="bigWide tc"/> + <image src="colors-8x16.svg" class="bigWide cr"/> + <image src="colors-8x16.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16.svg" class="bigTall tr"/> + <image src="colors-8x16.svg" class="bigTall bl"/> + <image src="colors-8x16.svg" class="bigTall tl"/> + <image src="colors-8x16.svg" class="bigTall br"/> + <image src="colors-8x16.svg" class="bigTall tc"/> + <image src="colors-8x16.svg" class="bigTall cr"/> + <image src="colors-8x16.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16.svg" class="small tr"/> + <image src="colors-8x16.svg" class="small bl"/> + <image src="colors-8x16.svg" class="small tl"/> + <image src="colors-8x16.svg" class="small br"/> + <image src="colors-8x16.svg" class="small tc"/> + <image src="colors-8x16.svg" class="small cr"/> + <image src="colors-8x16.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-cover-svg-003-ref.html b/layout/reftests/xul/object-fit-cover-svg-003-ref.html new file mode 100644 index 0000000000..3cc59936ff --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-003-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8-noSize.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-cover-svg-003.xhtml b/layout/reftests/xul/object-fit-cover-svg-003.xhtml new file mode 100644 index 0000000000..d586c58d3c --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-003.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8-noSize.svg" class="bigWide tr"/> + <image src="colors-16x8-noSize.svg" class="bigWide bl"/> + <image src="colors-16x8-noSize.svg" class="bigWide tl"/> + <image src="colors-16x8-noSize.svg" class="bigWide br"/> + <image src="colors-16x8-noSize.svg" class="bigWide tc"/> + <image src="colors-16x8-noSize.svg" class="bigWide cr"/> + <image src="colors-16x8-noSize.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8-noSize.svg" class="bigTall tr"/> + <image src="colors-16x8-noSize.svg" class="bigTall bl"/> + <image src="colors-16x8-noSize.svg" class="bigTall tl"/> + <image src="colors-16x8-noSize.svg" class="bigTall br"/> + <image src="colors-16x8-noSize.svg" class="bigTall tc"/> + <image src="colors-16x8-noSize.svg" class="bigTall cr"/> + <image src="colors-16x8-noSize.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8-noSize.svg" class="small tr"/> + <image src="colors-16x8-noSize.svg" class="small bl"/> + <image src="colors-16x8-noSize.svg" class="small tl"/> + <image src="colors-16x8-noSize.svg" class="small br"/> + <image src="colors-16x8-noSize.svg" class="small tc"/> + <image src="colors-16x8-noSize.svg" class="small cr"/> + <image src="colors-16x8-noSize.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-cover-svg-004-ref.html b/layout/reftests/xul/object-fit-cover-svg-004-ref.html new file mode 100644 index 0000000000..1d7473677a --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-004-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16-noSize.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-cover-svg-004.xhtml b/layout/reftests/xul/object-fit-cover-svg-004.xhtml new file mode 100644 index 0000000000..58a514c221 --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-004.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16-noSize.svg" class="bigWide tr"/> + <image src="colors-8x16-noSize.svg" class="bigWide bl"/> + <image src="colors-8x16-noSize.svg" class="bigWide tl"/> + <image src="colors-8x16-noSize.svg" class="bigWide br"/> + <image src="colors-8x16-noSize.svg" class="bigWide tc"/> + <image src="colors-8x16-noSize.svg" class="bigWide cr"/> + <image src="colors-8x16-noSize.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16-noSize.svg" class="bigTall tr"/> + <image src="colors-8x16-noSize.svg" class="bigTall bl"/> + <image src="colors-8x16-noSize.svg" class="bigTall tl"/> + <image src="colors-8x16-noSize.svg" class="bigTall br"/> + <image src="colors-8x16-noSize.svg" class="bigTall tc"/> + <image src="colors-8x16-noSize.svg" class="bigTall cr"/> + <image src="colors-8x16-noSize.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16-noSize.svg" class="small tr"/> + <image src="colors-8x16-noSize.svg" class="small bl"/> + <image src="colors-8x16-noSize.svg" class="small tl"/> + <image src="colors-8x16-noSize.svg" class="small br"/> + <image src="colors-8x16-noSize.svg" class="small tc"/> + <image src="colors-8x16-noSize.svg" class="small cr"/> + <image src="colors-8x16-noSize.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-cover-svg-005-ref.html b/layout/reftests/xul/object-fit-cover-svg-005-ref.html new file mode 100644 index 0000000000..5e8a68b712 --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-005-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8-parDefault.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-cover-svg-005.xhtml b/layout/reftests/xul/object-fit-cover-svg-005.xhtml new file mode 100644 index 0000000000..2641d06389 --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-005.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8-parDefault.svg" class="bigWide tr"/> + <image src="colors-16x8-parDefault.svg" class="bigWide bl"/> + <image src="colors-16x8-parDefault.svg" class="bigWide tl"/> + <image src="colors-16x8-parDefault.svg" class="bigWide br"/> + <image src="colors-16x8-parDefault.svg" class="bigWide tc"/> + <image src="colors-16x8-parDefault.svg" class="bigWide cr"/> + <image src="colors-16x8-parDefault.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8-parDefault.svg" class="bigTall tr"/> + <image src="colors-16x8-parDefault.svg" class="bigTall bl"/> + <image src="colors-16x8-parDefault.svg" class="bigTall tl"/> + <image src="colors-16x8-parDefault.svg" class="bigTall br"/> + <image src="colors-16x8-parDefault.svg" class="bigTall tc"/> + <image src="colors-16x8-parDefault.svg" class="bigTall cr"/> + <image src="colors-16x8-parDefault.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8-parDefault.svg" class="small tr"/> + <image src="colors-16x8-parDefault.svg" class="small bl"/> + <image src="colors-16x8-parDefault.svg" class="small tl"/> + <image src="colors-16x8-parDefault.svg" class="small br"/> + <image src="colors-16x8-parDefault.svg" class="small tc"/> + <image src="colors-16x8-parDefault.svg" class="small cr"/> + <image src="colors-16x8-parDefault.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-cover-svg-006-ref.html b/layout/reftests/xul/object-fit-cover-svg-006-ref.html new file mode 100644 index 0000000000..878bd6a33f --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-006-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16-parDefault.svg"); + background-size: cover; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-cover-svg-006.xhtml b/layout/reftests/xul/object-fit-cover-svg-006.xhtml new file mode 100644 index 0000000000..bd50fea9d6 --- /dev/null +++ b/layout/reftests/xul/object-fit-cover-svg-006.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: cover; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16-parDefault.svg" class="bigWide tr"/> + <image src="colors-8x16-parDefault.svg" class="bigWide bl"/> + <image src="colors-8x16-parDefault.svg" class="bigWide tl"/> + <image src="colors-8x16-parDefault.svg" class="bigWide br"/> + <image src="colors-8x16-parDefault.svg" class="bigWide tc"/> + <image src="colors-8x16-parDefault.svg" class="bigWide cr"/> + <image src="colors-8x16-parDefault.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16-parDefault.svg" class="bigTall tr"/> + <image src="colors-8x16-parDefault.svg" class="bigTall bl"/> + <image src="colors-8x16-parDefault.svg" class="bigTall tl"/> + <image src="colors-8x16-parDefault.svg" class="bigTall br"/> + <image src="colors-8x16-parDefault.svg" class="bigTall tc"/> + <image src="colors-8x16-parDefault.svg" class="bigTall cr"/> + <image src="colors-8x16-parDefault.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16-parDefault.svg" class="small tr"/> + <image src="colors-8x16-parDefault.svg" class="small bl"/> + <image src="colors-8x16-parDefault.svg" class="small tl"/> + <image src="colors-8x16-parDefault.svg" class="small br"/> + <image src="colors-8x16-parDefault.svg" class="small tc"/> + <image src="colors-8x16-parDefault.svg" class="small cr"/> + <image src="colors-8x16-parDefault.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-fill-png-001-ref.html b/layout/reftests/xul/object-fit-fill-png-001-ref.html new file mode 100644 index 0000000000..0e8d1bd822 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-png-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-fill-png-001.xhtml b/layout/reftests/xul/object-fit-fill-png-001.xhtml new file mode 100644 index 0000000000..8b62232c85 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-png-001.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8.png" class="bigWide tr"/> + <image src="colors-16x8.png" class="bigWide bl"/> + <image src="colors-16x8.png" class="bigWide tl"/> + <image src="colors-16x8.png" class="bigWide br"/> + <image src="colors-16x8.png" class="bigWide tc"/> + <image src="colors-16x8.png" class="bigWide cr"/> + <image src="colors-16x8.png" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8.png" class="bigTall tr"/> + <image src="colors-16x8.png" class="bigTall bl"/> + <image src="colors-16x8.png" class="bigTall tl"/> + <image src="colors-16x8.png" class="bigTall br"/> + <image src="colors-16x8.png" class="bigTall tc"/> + <image src="colors-16x8.png" class="bigTall cr"/> + <image src="colors-16x8.png" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8.png" class="small tr"/> + <image src="colors-16x8.png" class="small bl"/> + <image src="colors-16x8.png" class="small tl"/> + <image src="colors-16x8.png" class="small br"/> + <image src="colors-16x8.png" class="small tc"/> + <image src="colors-16x8.png" class="small cr"/> + <image src="colors-16x8.png" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-fill-png-002-ref.html b/layout/reftests/xul/object-fit-fill-png-002-ref.html new file mode 100644 index 0000000000..8e22d3d57e --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-png-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.png"); + background-size: 100% 100%; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-fill-png-002.xhtml b/layout/reftests/xul/object-fit-fill-png-002.xhtml new file mode 100644 index 0000000000..f0f19a1715 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-png-002.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16.png" class="bigWide tr"/> + <image src="colors-8x16.png" class="bigWide bl"/> + <image src="colors-8x16.png" class="bigWide tl"/> + <image src="colors-8x16.png" class="bigWide br"/> + <image src="colors-8x16.png" class="bigWide tc"/> + <image src="colors-8x16.png" class="bigWide cr"/> + <image src="colors-8x16.png" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16.png" class="bigTall tr"/> + <image src="colors-8x16.png" class="bigTall bl"/> + <image src="colors-8x16.png" class="bigTall tl"/> + <image src="colors-8x16.png" class="bigTall br"/> + <image src="colors-8x16.png" class="bigTall tc"/> + <image src="colors-8x16.png" class="bigTall cr"/> + <image src="colors-8x16.png" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16.png" class="small tr"/> + <image src="colors-8x16.png" class="small bl"/> + <image src="colors-8x16.png" class="small tl"/> + <image src="colors-8x16.png" class="small br"/> + <image src="colors-8x16.png" class="small tc"/> + <image src="colors-8x16.png" class="small cr"/> + <image src="colors-8x16.png" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-fill-svg-001-ref.html b/layout/reftests/xul/object-fit-fill-svg-001-ref.html new file mode 100644 index 0000000000..13984a919b --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-001-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-fill-svg-001.xhtml b/layout/reftests/xul/object-fit-fill-svg-001.xhtml new file mode 100644 index 0000000000..deee678c00 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-001.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8.svg" class="bigWide tr"/> + <image src="colors-16x8.svg" class="bigWide bl"/> + <image src="colors-16x8.svg" class="bigWide tl"/> + <image src="colors-16x8.svg" class="bigWide br"/> + <image src="colors-16x8.svg" class="bigWide tc"/> + <image src="colors-16x8.svg" class="bigWide cr"/> + <image src="colors-16x8.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8.svg" class="bigTall tr"/> + <image src="colors-16x8.svg" class="bigTall bl"/> + <image src="colors-16x8.svg" class="bigTall tl"/> + <image src="colors-16x8.svg" class="bigTall br"/> + <image src="colors-16x8.svg" class="bigTall tc"/> + <image src="colors-16x8.svg" class="bigTall cr"/> + <image src="colors-16x8.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8.svg" class="small tr"/> + <image src="colors-16x8.svg" class="small bl"/> + <image src="colors-16x8.svg" class="small tl"/> + <image src="colors-16x8.svg" class="small br"/> + <image src="colors-16x8.svg" class="small tc"/> + <image src="colors-16x8.svg" class="small cr"/> + <image src="colors-16x8.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-fill-svg-002-ref.html b/layout/reftests/xul/object-fit-fill-svg-002-ref.html new file mode 100644 index 0000000000..efd8e4f6f0 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-002-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-fill-svg-002.xhtml b/layout/reftests/xul/object-fit-fill-svg-002.xhtml new file mode 100644 index 0000000000..bec0c44f04 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-002.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16.svg" class="bigWide tr"/> + <image src="colors-8x16.svg" class="bigWide bl"/> + <image src="colors-8x16.svg" class="bigWide tl"/> + <image src="colors-8x16.svg" class="bigWide br"/> + <image src="colors-8x16.svg" class="bigWide tc"/> + <image src="colors-8x16.svg" class="bigWide cr"/> + <image src="colors-8x16.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16.svg" class="bigTall tr"/> + <image src="colors-8x16.svg" class="bigTall bl"/> + <image src="colors-8x16.svg" class="bigTall tl"/> + <image src="colors-8x16.svg" class="bigTall br"/> + <image src="colors-8x16.svg" class="bigTall tc"/> + <image src="colors-8x16.svg" class="bigTall cr"/> + <image src="colors-8x16.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16.svg" class="small tr"/> + <image src="colors-8x16.svg" class="small bl"/> + <image src="colors-8x16.svg" class="small tl"/> + <image src="colors-8x16.svg" class="small br"/> + <image src="colors-8x16.svg" class="small tc"/> + <image src="colors-8x16.svg" class="small cr"/> + <image src="colors-8x16.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-fill-svg-003-ref.html b/layout/reftests/xul/object-fit-fill-svg-003-ref.html new file mode 100644 index 0000000000..95ab2853d8 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-003-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8-noSize.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-fill-svg-003.xhtml b/layout/reftests/xul/object-fit-fill-svg-003.xhtml new file mode 100644 index 0000000000..3adc027e6b --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-003.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8-noSize.svg" class="bigWide tr"/> + <image src="colors-16x8-noSize.svg" class="bigWide bl"/> + <image src="colors-16x8-noSize.svg" class="bigWide tl"/> + <image src="colors-16x8-noSize.svg" class="bigWide br"/> + <image src="colors-16x8-noSize.svg" class="bigWide tc"/> + <image src="colors-16x8-noSize.svg" class="bigWide cr"/> + <image src="colors-16x8-noSize.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8-noSize.svg" class="bigTall tr"/> + <image src="colors-16x8-noSize.svg" class="bigTall bl"/> + <image src="colors-16x8-noSize.svg" class="bigTall tl"/> + <image src="colors-16x8-noSize.svg" class="bigTall br"/> + <image src="colors-16x8-noSize.svg" class="bigTall tc"/> + <image src="colors-16x8-noSize.svg" class="bigTall cr"/> + <image src="colors-16x8-noSize.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8-noSize.svg" class="small tr"/> + <image src="colors-16x8-noSize.svg" class="small bl"/> + <image src="colors-16x8-noSize.svg" class="small tl"/> + <image src="colors-16x8-noSize.svg" class="small br"/> + <image src="colors-16x8-noSize.svg" class="small tc"/> + <image src="colors-16x8-noSize.svg" class="small cr"/> + <image src="colors-16x8-noSize.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-fill-svg-004-ref.html b/layout/reftests/xul/object-fit-fill-svg-004-ref.html new file mode 100644 index 0000000000..1fb40f3220 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-004-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16-noSize.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-fill-svg-004.xhtml b/layout/reftests/xul/object-fit-fill-svg-004.xhtml new file mode 100644 index 0000000000..5cd194a9a4 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-004.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16-noSize.svg" class="bigWide tr"/> + <image src="colors-8x16-noSize.svg" class="bigWide bl"/> + <image src="colors-8x16-noSize.svg" class="bigWide tl"/> + <image src="colors-8x16-noSize.svg" class="bigWide br"/> + <image src="colors-8x16-noSize.svg" class="bigWide tc"/> + <image src="colors-8x16-noSize.svg" class="bigWide cr"/> + <image src="colors-8x16-noSize.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16-noSize.svg" class="bigTall tr"/> + <image src="colors-8x16-noSize.svg" class="bigTall bl"/> + <image src="colors-8x16-noSize.svg" class="bigTall tl"/> + <image src="colors-8x16-noSize.svg" class="bigTall br"/> + <image src="colors-8x16-noSize.svg" class="bigTall tc"/> + <image src="colors-8x16-noSize.svg" class="bigTall cr"/> + <image src="colors-8x16-noSize.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16-noSize.svg" class="small tr"/> + <image src="colors-8x16-noSize.svg" class="small bl"/> + <image src="colors-8x16-noSize.svg" class="small tl"/> + <image src="colors-8x16-noSize.svg" class="small br"/> + <image src="colors-8x16-noSize.svg" class="small tc"/> + <image src="colors-8x16-noSize.svg" class="small cr"/> + <image src="colors-8x16-noSize.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-fill-svg-005-ref.html b/layout/reftests/xul/object-fit-fill-svg-005-ref.html new file mode 100644 index 0000000000..df19770940 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-005-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8-parDefault.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-fill-svg-005.xhtml b/layout/reftests/xul/object-fit-fill-svg-005.xhtml new file mode 100644 index 0000000000..530c4477a4 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-005.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8-parDefault.svg" class="bigWide tr"/> + <image src="colors-16x8-parDefault.svg" class="bigWide bl"/> + <image src="colors-16x8-parDefault.svg" class="bigWide tl"/> + <image src="colors-16x8-parDefault.svg" class="bigWide br"/> + <image src="colors-16x8-parDefault.svg" class="bigWide tc"/> + <image src="colors-16x8-parDefault.svg" class="bigWide cr"/> + <image src="colors-16x8-parDefault.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8-parDefault.svg" class="bigTall tr"/> + <image src="colors-16x8-parDefault.svg" class="bigTall bl"/> + <image src="colors-16x8-parDefault.svg" class="bigTall tl"/> + <image src="colors-16x8-parDefault.svg" class="bigTall br"/> + <image src="colors-16x8-parDefault.svg" class="bigTall tc"/> + <image src="colors-16x8-parDefault.svg" class="bigTall cr"/> + <image src="colors-16x8-parDefault.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8-parDefault.svg" class="small tr"/> + <image src="colors-16x8-parDefault.svg" class="small bl"/> + <image src="colors-16x8-parDefault.svg" class="small tl"/> + <image src="colors-16x8-parDefault.svg" class="small br"/> + <image src="colors-16x8-parDefault.svg" class="small tc"/> + <image src="colors-16x8-parDefault.svg" class="small cr"/> + <image src="colors-16x8-parDefault.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-fill-svg-006-ref.html b/layout/reftests/xul/object-fit-fill-svg-006-ref.html new file mode 100644 index 0000000000..d1d66a3243 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-006-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16-parDefault.svg"); + background-size: 100% 100%; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-fill-svg-006.xhtml b/layout/reftests/xul/object-fit-fill-svg-006.xhtml new file mode 100644 index 0000000000..3f93f2e915 --- /dev/null +++ b/layout/reftests/xul/object-fit-fill-svg-006.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: fill; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16-parDefault.svg" class="bigWide tr"/> + <image src="colors-8x16-parDefault.svg" class="bigWide bl"/> + <image src="colors-8x16-parDefault.svg" class="bigWide tl"/> + <image src="colors-8x16-parDefault.svg" class="bigWide br"/> + <image src="colors-8x16-parDefault.svg" class="bigWide tc"/> + <image src="colors-8x16-parDefault.svg" class="bigWide cr"/> + <image src="colors-8x16-parDefault.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16-parDefault.svg" class="bigTall tr"/> + <image src="colors-8x16-parDefault.svg" class="bigTall bl"/> + <image src="colors-8x16-parDefault.svg" class="bigTall tl"/> + <image src="colors-8x16-parDefault.svg" class="bigTall br"/> + <image src="colors-8x16-parDefault.svg" class="bigTall tc"/> + <image src="colors-8x16-parDefault.svg" class="bigTall cr"/> + <image src="colors-8x16-parDefault.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16-parDefault.svg" class="small tr"/> + <image src="colors-8x16-parDefault.svg" class="small bl"/> + <image src="colors-8x16-parDefault.svg" class="small tl"/> + <image src="colors-8x16-parDefault.svg" class="small br"/> + <image src="colors-8x16-parDefault.svg" class="small tc"/> + <image src="colors-8x16-parDefault.svg" class="small cr"/> + <image src="colors-8x16-parDefault.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-none-png-001-ref.html b/layout/reftests/xul/object-fit-none-png-001-ref.html new file mode 100644 index 0000000000..49c08ab88f --- /dev/null +++ b/layout/reftests/xul/object-fit-none-png-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-none-png-001.xhtml b/layout/reftests/xul/object-fit-none-png-001.xhtml new file mode 100644 index 0000000000..7dc4a9c5d1 --- /dev/null +++ b/layout/reftests/xul/object-fit-none-png-001.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8.png" class="bigWide tr"/> + <image src="colors-16x8.png" class="bigWide bl"/> + <image src="colors-16x8.png" class="bigWide tl"/> + <image src="colors-16x8.png" class="bigWide br"/> + <image src="colors-16x8.png" class="bigWide tc"/> + <image src="colors-16x8.png" class="bigWide cr"/> + <image src="colors-16x8.png" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8.png" class="bigTall tr"/> + <image src="colors-16x8.png" class="bigTall bl"/> + <image src="colors-16x8.png" class="bigTall tl"/> + <image src="colors-16x8.png" class="bigTall br"/> + <image src="colors-16x8.png" class="bigTall tc"/> + <image src="colors-16x8.png" class="bigTall cr"/> + <image src="colors-16x8.png" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8.png" class="small tr"/> + <image src="colors-16x8.png" class="small bl"/> + <image src="colors-16x8.png" class="small tl"/> + <image src="colors-16x8.png" class="small br"/> + <image src="colors-16x8.png" class="small tc"/> + <image src="colors-16x8.png" class="small cr"/> + <image src="colors-16x8.png" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-none-png-002-ref.html b/layout/reftests/xul/object-fit-none-png-002-ref.html new file mode 100644 index 0000000000..34a5fdad50 --- /dev/null +++ b/layout/reftests/xul/object-fit-none-png-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-none-png-002.xhtml b/layout/reftests/xul/object-fit-none-png-002.xhtml new file mode 100644 index 0000000000..b4a958257c --- /dev/null +++ b/layout/reftests/xul/object-fit-none-png-002.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16.png" class="bigWide tr"/> + <image src="colors-8x16.png" class="bigWide bl"/> + <image src="colors-8x16.png" class="bigWide tl"/> + <image src="colors-8x16.png" class="bigWide br"/> + <image src="colors-8x16.png" class="bigWide tc"/> + <image src="colors-8x16.png" class="bigWide cr"/> + <image src="colors-8x16.png" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16.png" class="bigTall tr"/> + <image src="colors-8x16.png" class="bigTall bl"/> + <image src="colors-8x16.png" class="bigTall tl"/> + <image src="colors-8x16.png" class="bigTall br"/> + <image src="colors-8x16.png" class="bigTall tc"/> + <image src="colors-8x16.png" class="bigTall cr"/> + <image src="colors-8x16.png" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16.png" class="small tr"/> + <image src="colors-8x16.png" class="small bl"/> + <image src="colors-8x16.png" class="small tl"/> + <image src="colors-8x16.png" class="small br"/> + <image src="colors-8x16.png" class="small tc"/> + <image src="colors-8x16.png" class="small cr"/> + <image src="colors-8x16.png" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-none-svg-001-ref.html b/layout/reftests/xul/object-fit-none-svg-001-ref.html new file mode 100644 index 0000000000..9022651c9b --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-001-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-none-svg-001.xhtml b/layout/reftests/xul/object-fit-none-svg-001.xhtml new file mode 100644 index 0000000000..b65f96e0f3 --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-001.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8.svg" class="bigWide tr"/> + <image src="colors-16x8.svg" class="bigWide bl"/> + <image src="colors-16x8.svg" class="bigWide tl"/> + <image src="colors-16x8.svg" class="bigWide br"/> + <image src="colors-16x8.svg" class="bigWide tc"/> + <image src="colors-16x8.svg" class="bigWide cr"/> + <image src="colors-16x8.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8.svg" class="bigTall tr"/> + <image src="colors-16x8.svg" class="bigTall bl"/> + <image src="colors-16x8.svg" class="bigTall tl"/> + <image src="colors-16x8.svg" class="bigTall br"/> + <image src="colors-16x8.svg" class="bigTall tc"/> + <image src="colors-16x8.svg" class="bigTall cr"/> + <image src="colors-16x8.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8.svg" class="small tr"/> + <image src="colors-16x8.svg" class="small bl"/> + <image src="colors-16x8.svg" class="small tl"/> + <image src="colors-16x8.svg" class="small br"/> + <image src="colors-16x8.svg" class="small tc"/> + <image src="colors-16x8.svg" class="small cr"/> + <image src="colors-16x8.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-none-svg-002-ref.html b/layout/reftests/xul/object-fit-none-svg-002-ref.html new file mode 100644 index 0000000000..25abf36431 --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-002-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-none-svg-002.xhtml b/layout/reftests/xul/object-fit-none-svg-002.xhtml new file mode 100644 index 0000000000..847e118890 --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-002.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16.svg" class="bigWide tr"/> + <image src="colors-8x16.svg" class="bigWide bl"/> + <image src="colors-8x16.svg" class="bigWide tl"/> + <image src="colors-8x16.svg" class="bigWide br"/> + <image src="colors-8x16.svg" class="bigWide tc"/> + <image src="colors-8x16.svg" class="bigWide cr"/> + <image src="colors-8x16.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16.svg" class="bigTall tr"/> + <image src="colors-8x16.svg" class="bigTall bl"/> + <image src="colors-8x16.svg" class="bigTall tl"/> + <image src="colors-8x16.svg" class="bigTall br"/> + <image src="colors-8x16.svg" class="bigTall tc"/> + <image src="colors-8x16.svg" class="bigTall cr"/> + <image src="colors-8x16.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16.svg" class="small tr"/> + <image src="colors-8x16.svg" class="small bl"/> + <image src="colors-8x16.svg" class="small tl"/> + <image src="colors-8x16.svg" class="small br"/> + <image src="colors-8x16.svg" class="small tc"/> + <image src="colors-8x16.svg" class="small cr"/> + <image src="colors-8x16.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-none-svg-003-ref.html b/layout/reftests/xul/object-fit-none-svg-003-ref.html new file mode 100644 index 0000000000..8376f997c3 --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-003-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8-noSize.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-none-svg-003.xhtml b/layout/reftests/xul/object-fit-none-svg-003.xhtml new file mode 100644 index 0000000000..f9a35ac083 --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-003.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8-noSize.svg" class="bigWide tr"/> + <image src="colors-16x8-noSize.svg" class="bigWide bl"/> + <image src="colors-16x8-noSize.svg" class="bigWide tl"/> + <image src="colors-16x8-noSize.svg" class="bigWide br"/> + <image src="colors-16x8-noSize.svg" class="bigWide tc"/> + <image src="colors-16x8-noSize.svg" class="bigWide cr"/> + <image src="colors-16x8-noSize.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8-noSize.svg" class="bigTall tr"/> + <image src="colors-16x8-noSize.svg" class="bigTall bl"/> + <image src="colors-16x8-noSize.svg" class="bigTall tl"/> + <image src="colors-16x8-noSize.svg" class="bigTall br"/> + <image src="colors-16x8-noSize.svg" class="bigTall tc"/> + <image src="colors-16x8-noSize.svg" class="bigTall cr"/> + <image src="colors-16x8-noSize.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8-noSize.svg" class="small tr"/> + <image src="colors-16x8-noSize.svg" class="small bl"/> + <image src="colors-16x8-noSize.svg" class="small tl"/> + <image src="colors-16x8-noSize.svg" class="small br"/> + <image src="colors-16x8-noSize.svg" class="small tc"/> + <image src="colors-16x8-noSize.svg" class="small cr"/> + <image src="colors-16x8-noSize.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-none-svg-004-ref.html b/layout/reftests/xul/object-fit-none-svg-004-ref.html new file mode 100644 index 0000000000..86e39853af --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-004-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16-noSize.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-none-svg-004.xhtml b/layout/reftests/xul/object-fit-none-svg-004.xhtml new file mode 100644 index 0000000000..72a5b11bcb --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-004.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16-noSize.svg" class="bigWide tr"/> + <image src="colors-8x16-noSize.svg" class="bigWide bl"/> + <image src="colors-8x16-noSize.svg" class="bigWide tl"/> + <image src="colors-8x16-noSize.svg" class="bigWide br"/> + <image src="colors-8x16-noSize.svg" class="bigWide tc"/> + <image src="colors-8x16-noSize.svg" class="bigWide cr"/> + <image src="colors-8x16-noSize.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16-noSize.svg" class="bigTall tr"/> + <image src="colors-8x16-noSize.svg" class="bigTall bl"/> + <image src="colors-8x16-noSize.svg" class="bigTall tl"/> + <image src="colors-8x16-noSize.svg" class="bigTall br"/> + <image src="colors-8x16-noSize.svg" class="bigTall tc"/> + <image src="colors-8x16-noSize.svg" class="bigTall cr"/> + <image src="colors-8x16-noSize.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16-noSize.svg" class="small tr"/> + <image src="colors-8x16-noSize.svg" class="small bl"/> + <image src="colors-8x16-noSize.svg" class="small tl"/> + <image src="colors-8x16-noSize.svg" class="small br"/> + <image src="colors-8x16-noSize.svg" class="small tc"/> + <image src="colors-8x16-noSize.svg" class="small cr"/> + <image src="colors-8x16-noSize.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-none-svg-005-ref.html b/layout/reftests/xul/object-fit-none-svg-005-ref.html new file mode 100644 index 0000000000..3b8ccb3f85 --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-005-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8-parDefault.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-none-svg-005.xhtml b/layout/reftests/xul/object-fit-none-svg-005.xhtml new file mode 100644 index 0000000000..d931a32531 --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-005.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8-parDefault.svg" class="bigWide tr"/> + <image src="colors-16x8-parDefault.svg" class="bigWide bl"/> + <image src="colors-16x8-parDefault.svg" class="bigWide tl"/> + <image src="colors-16x8-parDefault.svg" class="bigWide br"/> + <image src="colors-16x8-parDefault.svg" class="bigWide tc"/> + <image src="colors-16x8-parDefault.svg" class="bigWide cr"/> + <image src="colors-16x8-parDefault.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8-parDefault.svg" class="bigTall tr"/> + <image src="colors-16x8-parDefault.svg" class="bigTall bl"/> + <image src="colors-16x8-parDefault.svg" class="bigTall tl"/> + <image src="colors-16x8-parDefault.svg" class="bigTall br"/> + <image src="colors-16x8-parDefault.svg" class="bigTall tc"/> + <image src="colors-16x8-parDefault.svg" class="bigTall cr"/> + <image src="colors-16x8-parDefault.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8-parDefault.svg" class="small tr"/> + <image src="colors-16x8-parDefault.svg" class="small bl"/> + <image src="colors-16x8-parDefault.svg" class="small tl"/> + <image src="colors-16x8-parDefault.svg" class="small br"/> + <image src="colors-16x8-parDefault.svg" class="small tc"/> + <image src="colors-16x8-parDefault.svg" class="small cr"/> + <image src="colors-16x8-parDefault.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-none-svg-006-ref.html b/layout/reftests/xul/object-fit-none-svg-006-ref.html new file mode 100644 index 0000000000..1a78e8c8ef --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-006-ref.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16-parDefault.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-none-svg-006.xhtml b/layout/reftests/xul/object-fit-none-svg-006.xhtml new file mode 100644 index 0000000000..789be63567 --- /dev/null +++ b/layout/reftests/xul/object-fit-none-svg-006.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: none; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16-parDefault.svg" class="bigWide tr"/> + <image src="colors-8x16-parDefault.svg" class="bigWide bl"/> + <image src="colors-8x16-parDefault.svg" class="bigWide tl"/> + <image src="colors-8x16-parDefault.svg" class="bigWide br"/> + <image src="colors-8x16-parDefault.svg" class="bigWide tc"/> + <image src="colors-8x16-parDefault.svg" class="bigWide cr"/> + <image src="colors-8x16-parDefault.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16-parDefault.svg" class="bigTall tr"/> + <image src="colors-8x16-parDefault.svg" class="bigTall bl"/> + <image src="colors-8x16-parDefault.svg" class="bigTall tl"/> + <image src="colors-8x16-parDefault.svg" class="bigTall br"/> + <image src="colors-8x16-parDefault.svg" class="bigTall tc"/> + <image src="colors-8x16-parDefault.svg" class="bigTall cr"/> + <image src="colors-8x16-parDefault.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16-parDefault.svg" class="small tr"/> + <image src="colors-8x16-parDefault.svg" class="small bl"/> + <image src="colors-8x16-parDefault.svg" class="small tl"/> + <image src="colors-8x16-parDefault.svg" class="small br"/> + <image src="colors-8x16-parDefault.svg" class="small tc"/> + <image src="colors-8x16-parDefault.svg" class="small cr"/> + <image src="colors-8x16-parDefault.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-scale-down-png-001-ref.html b/layout/reftests/xul/object-fit-scale-down-png-001-ref.html new file mode 100644 index 0000000000..58c0abacd3 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-png-001-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-scale-down-png-001.xhtml b/layout/reftests/xul/object-fit-scale-down-png-001.xhtml new file mode 100644 index 0000000000..d14743cbb9 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-png-001.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8.png" class="bigWide tr"/> + <image src="colors-16x8.png" class="bigWide bl"/> + <image src="colors-16x8.png" class="bigWide tl"/> + <image src="colors-16x8.png" class="bigWide br"/> + <image src="colors-16x8.png" class="bigWide tc"/> + <image src="colors-16x8.png" class="bigWide cr"/> + <image src="colors-16x8.png" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8.png" class="bigTall tr"/> + <image src="colors-16x8.png" class="bigTall bl"/> + <image src="colors-16x8.png" class="bigTall tl"/> + <image src="colors-16x8.png" class="bigTall br"/> + <image src="colors-16x8.png" class="bigTall tc"/> + <image src="colors-16x8.png" class="bigTall cr"/> + <image src="colors-16x8.png" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8.png" class="small tr"/> + <image src="colors-16x8.png" class="small bl"/> + <image src="colors-16x8.png" class="small tl"/> + <image src="colors-16x8.png" class="small br"/> + <image src="colors-16x8.png" class="small tc"/> + <image src="colors-16x8.png" class="small cr"/> + <image src="colors-16x8.png" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-scale-down-png-002-ref.html b/layout/reftests/xul/object-fit-scale-down-png-002-ref.html new file mode 100644 index 0000000000..1a554b7da8 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-png-002-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.png"); + background-size: auto auto; + background-repeat: no-repeat; + image-rendering: -moz-crisp-edges; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-scale-down-png-002.xhtml b/layout/reftests/xul/object-fit-scale-down-png-002.xhtml new file mode 100644 index 0000000000..ef6f12121f --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-png-002.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + image-rendering: -moz-crisp-edges; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16.png" class="bigWide tr"/> + <image src="colors-8x16.png" class="bigWide bl"/> + <image src="colors-8x16.png" class="bigWide tl"/> + <image src="colors-8x16.png" class="bigWide br"/> + <image src="colors-8x16.png" class="bigWide tc"/> + <image src="colors-8x16.png" class="bigWide cr"/> + <image src="colors-8x16.png" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16.png" class="bigTall tr"/> + <image src="colors-8x16.png" class="bigTall bl"/> + <image src="colors-8x16.png" class="bigTall tl"/> + <image src="colors-8x16.png" class="bigTall br"/> + <image src="colors-8x16.png" class="bigTall tc"/> + <image src="colors-8x16.png" class="bigTall cr"/> + <image src="colors-8x16.png" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16.png" class="small tr"/> + <image src="colors-8x16.png" class="small bl"/> + <image src="colors-8x16.png" class="small tl"/> + <image src="colors-8x16.png" class="small br"/> + <image src="colors-8x16.png" class="small tc"/> + <image src="colors-8x16.png" class="small cr"/> + <image src="colors-8x16.png" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-001-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-001-ref.html new file mode 100644 index 0000000000..7930af7301 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-001-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-001.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-001.xhtml new file mode 100644 index 0000000000..6391ae2b0f --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-001.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8.svg" class="bigWide tr"/> + <image src="colors-16x8.svg" class="bigWide bl"/> + <image src="colors-16x8.svg" class="bigWide tl"/> + <image src="colors-16x8.svg" class="bigWide br"/> + <image src="colors-16x8.svg" class="bigWide tc"/> + <image src="colors-16x8.svg" class="bigWide cr"/> + <image src="colors-16x8.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8.svg" class="bigTall tr"/> + <image src="colors-16x8.svg" class="bigTall bl"/> + <image src="colors-16x8.svg" class="bigTall tl"/> + <image src="colors-16x8.svg" class="bigTall br"/> + <image src="colors-16x8.svg" class="bigTall tc"/> + <image src="colors-16x8.svg" class="bigTall cr"/> + <image src="colors-16x8.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8.svg" class="small tr"/> + <image src="colors-16x8.svg" class="small bl"/> + <image src="colors-16x8.svg" class="small tl"/> + <image src="colors-16x8.svg" class="small br"/> + <image src="colors-16x8.svg" class="small tc"/> + <image src="colors-16x8.svg" class="small cr"/> + <image src="colors-16x8.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-002-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-002-ref.html new file mode 100644 index 0000000000..ffba4c0426 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-002-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-002.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-002.xhtml new file mode 100644 index 0000000000..2edab76507 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-002.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16.svg" class="bigWide tr"/> + <image src="colors-8x16.svg" class="bigWide bl"/> + <image src="colors-8x16.svg" class="bigWide tl"/> + <image src="colors-8x16.svg" class="bigWide br"/> + <image src="colors-8x16.svg" class="bigWide tc"/> + <image src="colors-8x16.svg" class="bigWide cr"/> + <image src="colors-8x16.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16.svg" class="bigTall tr"/> + <image src="colors-8x16.svg" class="bigTall bl"/> + <image src="colors-8x16.svg" class="bigTall tl"/> + <image src="colors-8x16.svg" class="bigTall br"/> + <image src="colors-8x16.svg" class="bigTall tc"/> + <image src="colors-8x16.svg" class="bigTall cr"/> + <image src="colors-8x16.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16.svg" class="small tr"/> + <image src="colors-8x16.svg" class="small bl"/> + <image src="colors-8x16.svg" class="small tl"/> + <image src="colors-8x16.svg" class="small br"/> + <image src="colors-8x16.svg" class="small tc"/> + <image src="colors-8x16.svg" class="small cr"/> + <image src="colors-8x16.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-003-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-003-ref.html new file mode 100644 index 0000000000..2a7ba611e7 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-003-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8-noSize.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-003.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-003.xhtml new file mode 100644 index 0000000000..1b543b0848 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-003.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8-noSize.svg" class="bigWide tr"/> + <image src="colors-16x8-noSize.svg" class="bigWide bl"/> + <image src="colors-16x8-noSize.svg" class="bigWide tl"/> + <image src="colors-16x8-noSize.svg" class="bigWide br"/> + <image src="colors-16x8-noSize.svg" class="bigWide tc"/> + <image src="colors-16x8-noSize.svg" class="bigWide cr"/> + <image src="colors-16x8-noSize.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8-noSize.svg" class="bigTall tr"/> + <image src="colors-16x8-noSize.svg" class="bigTall bl"/> + <image src="colors-16x8-noSize.svg" class="bigTall tl"/> + <image src="colors-16x8-noSize.svg" class="bigTall br"/> + <image src="colors-16x8-noSize.svg" class="bigTall tc"/> + <image src="colors-16x8-noSize.svg" class="bigTall cr"/> + <image src="colors-16x8-noSize.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8-noSize.svg" class="small tr"/> + <image src="colors-16x8-noSize.svg" class="small bl"/> + <image src="colors-16x8-noSize.svg" class="small tl"/> + <image src="colors-16x8-noSize.svg" class="small br"/> + <image src="colors-16x8-noSize.svg" class="small tc"/> + <image src="colors-16x8-noSize.svg" class="small cr"/> + <image src="colors-16x8-noSize.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-004-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-004-ref.html new file mode 100644 index 0000000000..b4b07a55c5 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-004-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16-noSize.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-004.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-004.xhtml new file mode 100644 index 0000000000..85fb2f0166 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-004.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16-noSize.svg" class="bigWide tr"/> + <image src="colors-8x16-noSize.svg" class="bigWide bl"/> + <image src="colors-8x16-noSize.svg" class="bigWide tl"/> + <image src="colors-8x16-noSize.svg" class="bigWide br"/> + <image src="colors-8x16-noSize.svg" class="bigWide tc"/> + <image src="colors-8x16-noSize.svg" class="bigWide cr"/> + <image src="colors-8x16-noSize.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16-noSize.svg" class="bigTall tr"/> + <image src="colors-8x16-noSize.svg" class="bigTall bl"/> + <image src="colors-8x16-noSize.svg" class="bigTall tl"/> + <image src="colors-8x16-noSize.svg" class="bigTall br"/> + <image src="colors-8x16-noSize.svg" class="bigTall tc"/> + <image src="colors-8x16-noSize.svg" class="bigTall cr"/> + <image src="colors-8x16-noSize.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16-noSize.svg" class="small tr"/> + <image src="colors-8x16-noSize.svg" class="small bl"/> + <image src="colors-8x16-noSize.svg" class="small tl"/> + <image src="colors-8x16-noSize.svg" class="small br"/> + <image src="colors-8x16-noSize.svg" class="small tc"/> + <image src="colors-8x16-noSize.svg" class="small cr"/> + <image src="colors-8x16-noSize.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-005-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-005-ref.html new file mode 100644 index 0000000000..bac7f3db11 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-005-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-16x8-parDefault.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-005.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-005.xhtml new file mode 100644 index 0000000000..9c3ced8930 --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-005.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-16x8-parDefault.svg" class="bigWide tr"/> + <image src="colors-16x8-parDefault.svg" class="bigWide bl"/> + <image src="colors-16x8-parDefault.svg" class="bigWide tl"/> + <image src="colors-16x8-parDefault.svg" class="bigWide br"/> + <image src="colors-16x8-parDefault.svg" class="bigWide tc"/> + <image src="colors-16x8-parDefault.svg" class="bigWide cr"/> + <image src="colors-16x8-parDefault.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-16x8-parDefault.svg" class="bigTall tr"/> + <image src="colors-16x8-parDefault.svg" class="bigTall bl"/> + <image src="colors-16x8-parDefault.svg" class="bigTall tl"/> + <image src="colors-16x8-parDefault.svg" class="bigTall br"/> + <image src="colors-16x8-parDefault.svg" class="bigTall tc"/> + <image src="colors-16x8-parDefault.svg" class="bigTall cr"/> + <image src="colors-16x8-parDefault.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-16x8-parDefault.svg" class="small tr"/> + <image src="colors-16x8-parDefault.svg" class="small bl"/> + <image src="colors-16x8-parDefault.svg" class="small tl"/> + <image src="colors-16x8-parDefault.svg" class="small br"/> + <image src="colors-16x8-parDefault.svg" class="small tc"/> + <image src="colors-16x8-parDefault.svg" class="small cr"/> + <image src="colors-16x8-parDefault.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-006-ref.html b/layout/reftests/xul/object-fit-scale-down-svg-006-ref.html new file mode 100644 index 0000000000..30097222bd --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-006-ref.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("colors-8x16-parDefault.svg"); + background-size: auto auto; + background-repeat: no-repeat; + } + .objectOuter > .small { background-size: contain; } + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/layout/reftests/xul/object-fit-scale-down-svg-006.xhtml b/layout/reftests/xul/object-fit-scale-down-svg-006.xhtml new file mode 100644 index 0000000000..b3cc76fdda --- /dev/null +++ b/layout/reftests/xul/object-fit-scale-down-svg-006.xhtml @@ -0,0 +1,69 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + border: 1px dashed gray; + padding: 1px; + object-fit: scale-down; + float: left; + } + + .bigWide { + width: 52px; + height: 36px; + } + .bigTall { + width: 36px; + height: 52px; + } + .small { + width: 12px; + height: 12px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + ]]></style> + <hbox> + <!-- big/wide: --> + <image src="colors-8x16-parDefault.svg" class="bigWide tr"/> + <image src="colors-8x16-parDefault.svg" class="bigWide bl"/> + <image src="colors-8x16-parDefault.svg" class="bigWide tl"/> + <image src="colors-8x16-parDefault.svg" class="bigWide br"/> + <image src="colors-8x16-parDefault.svg" class="bigWide tc"/> + <image src="colors-8x16-parDefault.svg" class="bigWide cr"/> + <image src="colors-8x16-parDefault.svg" class="bigWide"/> + </hbox> + <hbox> + <!-- big/tall: --> + <image src="colors-8x16-parDefault.svg" class="bigTall tr"/> + <image src="colors-8x16-parDefault.svg" class="bigTall bl"/> + <image src="colors-8x16-parDefault.svg" class="bigTall tl"/> + <image src="colors-8x16-parDefault.svg" class="bigTall br"/> + <image src="colors-8x16-parDefault.svg" class="bigTall tc"/> + <image src="colors-8x16-parDefault.svg" class="bigTall cr"/> + <image src="colors-8x16-parDefault.svg" class="bigTall"/> + </hbox> + <hbox> + <!-- small: --> + <image src="colors-8x16-parDefault.svg" class="small tr"/> + <image src="colors-8x16-parDefault.svg" class="small bl"/> + <image src="colors-8x16-parDefault.svg" class="small tl"/> + <image src="colors-8x16-parDefault.svg" class="small br"/> + <image src="colors-8x16-parDefault.svg" class="small tc"/> + <image src="colors-8x16-parDefault.svg" class="small cr"/> + <image src="colors-8x16-parDefault.svg" class="small"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-position-png-001-ref.html b/layout/reftests/xul/object-position-png-001-ref.html new file mode 100644 index 0000000000..4a1267a4fd --- /dev/null +++ b/layout/reftests/xul/object-position-png-001-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("colors-16x8.png"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { background-position: 50% -7% } + .op_y13 { background-position: 50% 13% } + .op_y23 { background-position: 50% 23% } + .op_y50 { background-position: 50% 50% } + .op_y75 { background-position: 50% 75% } + .op_y88 { background-position: 50% 88% } + .op_y111 { background-position: 50% 111% } + + </style> + </head> + <body> + <div class="op_y-7"></div> + <div class="op_y13"></div> + <div class="op_y23"></div> + <div class="op_y50"></div> + <div class="op_y75"></div> + <div class="op_y88"></div> + <div class="op_y111"></div> + </body> +</html> diff --git a/layout/reftests/xul/object-position-png-001.xhtml b/layout/reftests/xul/object-position-png-001.xhtml new file mode 100644 index 0000000000..e216dc8497 --- /dev/null +++ b/layout/reftests/xul/object-position-png-001.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + background: lightgray; + margin-right: 2px; + object-fit: contain; + 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> + <hbox> + <image src="colors-16x8.png" class="op_y-7"/> + <image src="colors-16x8.png" class="op_y13"/> + <image src="colors-16x8.png" class="op_y23"/> + <image src="colors-16x8.png" class="op_y50"/> + <image src="colors-16x8.png" class="op_y75"/> + <image src="colors-16x8.png" class="op_y88"/> + <image src="colors-16x8.png" class="op_y111"/> + </hbox> +</window> diff --git a/layout/reftests/xul/object-position-png-002-ref.html b/layout/reftests/xul/object-position-png-002-ref.html new file mode 100644 index 0000000000..8c687d3e9b --- /dev/null +++ b/layout/reftests/xul/object-position-png-002-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("colors-8x16.png"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { background-position: -7% 50% } + .op_x13 { background-position: 13% 50% } + .op_x23 { background-position: 23% 50% } + .op_x50 { background-position: 50% 50% } + .op_x75 { background-position: 75% 50% } + .op_x88 { background-position: 88% 50% } + .op_x111 { background-position: 111% 50% } + + </style> + </head> + <body> + <div class="op_x-7"></div> + <div class="op_x13"></div> + <div class="op_x23"></div> + <div class="op_x50"></div> + <div class="op_x75"></div> + <div class="op_x88"></div> + <div class="op_x111"></div> + </body> +</html> diff --git a/layout/reftests/xul/object-position-png-002.xhtml b/layout/reftests/xul/object-position-png-002.xhtml new file mode 100644 index 0000000000..62a2035b38 --- /dev/null +++ b/layout/reftests/xul/object-position-png-002.xhtml @@ -0,0 +1,36 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ + window { padding: 8px; } + image { + background: lightgray; + margin-right: 2px; + object-fit: contain; + 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> + <hbox> + <image src="colors-8x16.png" class="op_x-7"/> + <image src="colors-8x16.png" class="op_x13"/> + <image src="colors-8x16.png" class="op_x23"/> + <image src="colors-8x16.png" class="op_x50"/> + <image src="colors-8x16.png" class="op_x75"/> + <image src="colors-8x16.png" class="op_x88"/> + <image src="colors-8x16.png" class="op_x111"/> + </hbox> +</window> diff --git a/layout/reftests/xul/reftest.list b/layout/reftests/xul/reftest.list new file mode 100644 index 0000000000..5a4ab6b683 --- /dev/null +++ b/layout/reftests/xul/reftest.list @@ -0,0 +1,95 @@ +== chrome://reftest/content/xul/css-flex-1.xhtml css-flex-1-ref.html +== chrome://reftest/content/xul/css-grid-with-xul-item-1.xhtml chrome://reftest/content/xul/css-grid-with-xul-item-1-ref.xhtml + +== chrome://reftest/content/xul/menuitem-key.xhtml chrome://reftest/content/xul/menuitem-key-ref.xhtml +# these random-if(Android) are due to differences between Android Native & Xul, see bug 732569 +random-if(Android) == chrome://reftest/content/xul/menulist-shrinkwrap-1.xhtml chrome://reftest/content/xul/menulist-shrinkwrap-1-ref.xhtml +random-if(Android) == chrome://reftest/content/xul/menulist-shrinkwrap-2.xhtml chrome://reftest/content/xul/menulist-shrinkwrap-2-ref.xhtml +== chrome://reftest/content/xul/textbox-overflow-1.xhtml chrome://reftest/content/xul/textbox-overflow-1-ref.xhtml # for bug 749658 +# accesskeys are not normally displayed on Mac, so set a pref to enable them +pref(ui.key.menuAccessKey,18) == chrome://reftest/content/xul/accesskey.xhtml chrome://reftest/content/xul/accesskey-ref.xhtml +fuzzy-if(xulRuntime.widgetToolkit=="gtk",0-1,0-11) == chrome://reftest/content/xul/tree-row-outline-1.xhtml chrome://reftest/content/xul/tree-row-outline-1-ref.xhtml # win8: bug 1254832 +skip-if(!cocoaWidget) fails-if(webrender&&cocoaWidget) == chrome://reftest/content/xul/mac-tab-toolbar.xhtml chrome://reftest/content/xul/mac-tab-toolbar-ref.xhtml +!= chrome://reftest/content/xul/tree-row-outline-1.xhtml chrome://reftest/content/xul/tree-row-outline-1-notref.xhtml +== chrome://reftest/content/xul/text-crop.xhtml chrome://reftest/content/xul/text-crop-ref.xhtml +random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == chrome://reftest/content/xul/text-small-caps-1.xhtml chrome://reftest/content/xul/text-small-caps-1-ref.xhtml +fuzzy-if(skiaContent,0-1,0-60) fuzzy-if(cocoaWidget&&browserIsRemote&&!skiaContent,0-1,0-31) fuzzy-if(winWidget&&browserIsRemote&&layersGPUAccelerated,0-1,0-50) fuzzy-if(webrender,0-1,350-1050) == chrome://reftest/content/xul/inactive-fixed-bg-bug1205630.xhtml inactive-fixed-bg-bug1205630-ref.html +fuzzy-if(skiaContent,0-1,0-60) fuzzy-if(cocoaWidget&&browserIsRemote&&!skiaContent,0-1,0-31) fuzzy-if(winWidget&&browserIsRemote&&layersGPUAccelerated,0-1,0-50) fuzzy-if(webrender,0-1,450-1100) == chrome://reftest/content/xul/inactive-fixed-bg-bug1272525.xhtml inactive-fixed-bg-bug1272525-ref.html + +# Tests for XUL <image> with 'object-fit' & 'object-position': +# These tests should be very similar to tests in our w3c-css/submitted/images3 +# reftest directory. They live here because they use XUL, and it +# wouldn't be fair of us to make a W3C testsuite implicitly depend on XUL. +== chrome://reftest/content/xul/object-fit-contain-png-001.xhtml object-fit-contain-png-001-ref.html +== chrome://reftest/content/xul/object-fit-contain-png-002.xhtml object-fit-contain-png-002-ref.html +== chrome://reftest/content/xul/object-fit-contain-svg-001.xhtml object-fit-contain-svg-001-ref.html +== chrome://reftest/content/xul/object-fit-contain-svg-002.xhtml object-fit-contain-svg-002-ref.html +== chrome://reftest/content/xul/object-fit-contain-svg-003.xhtml object-fit-contain-svg-003-ref.html +== chrome://reftest/content/xul/object-fit-contain-svg-004.xhtml object-fit-contain-svg-004-ref.html +== chrome://reftest/content/xul/object-fit-contain-svg-005.xhtml object-fit-contain-svg-005-ref.html +== chrome://reftest/content/xul/object-fit-contain-svg-006.xhtml object-fit-contain-svg-006-ref.html +== chrome://reftest/content/xul/object-fit-cover-png-001.xhtml object-fit-cover-png-001-ref.html +== chrome://reftest/content/xul/object-fit-cover-png-002.xhtml object-fit-cover-png-002-ref.html +== chrome://reftest/content/xul/object-fit-cover-svg-001.xhtml object-fit-cover-svg-001-ref.html +== chrome://reftest/content/xul/object-fit-cover-svg-002.xhtml object-fit-cover-svg-002-ref.html +== chrome://reftest/content/xul/object-fit-cover-svg-003.xhtml object-fit-cover-svg-003-ref.html +== chrome://reftest/content/xul/object-fit-cover-svg-004.xhtml object-fit-cover-svg-004-ref.html +== chrome://reftest/content/xul/object-fit-cover-svg-005.xhtml object-fit-cover-svg-005-ref.html +== chrome://reftest/content/xul/object-fit-cover-svg-006.xhtml object-fit-cover-svg-006-ref.html +== chrome://reftest/content/xul/object-fit-fill-png-001.xhtml object-fit-fill-png-001-ref.html +== chrome://reftest/content/xul/object-fit-fill-png-002.xhtml object-fit-fill-png-002-ref.html +== chrome://reftest/content/xul/object-fit-fill-svg-001.xhtml object-fit-fill-svg-001-ref.html +== chrome://reftest/content/xul/object-fit-fill-svg-002.xhtml object-fit-fill-svg-002-ref.html +== chrome://reftest/content/xul/object-fit-fill-svg-003.xhtml object-fit-fill-svg-003-ref.html +== chrome://reftest/content/xul/object-fit-fill-svg-004.xhtml object-fit-fill-svg-004-ref.html +== chrome://reftest/content/xul/object-fit-fill-svg-005.xhtml object-fit-fill-svg-005-ref.html +== chrome://reftest/content/xul/object-fit-fill-svg-006.xhtml object-fit-fill-svg-006-ref.html +== chrome://reftest/content/xul/object-fit-none-png-001.xhtml object-fit-none-png-001-ref.html +== chrome://reftest/content/xul/object-fit-none-png-002.xhtml object-fit-none-png-002-ref.html +== chrome://reftest/content/xul/object-fit-none-svg-001.xhtml object-fit-none-svg-001-ref.html +== chrome://reftest/content/xul/object-fit-none-svg-002.xhtml object-fit-none-svg-002-ref.html +== chrome://reftest/content/xul/object-fit-none-svg-003.xhtml object-fit-none-svg-003-ref.html +== chrome://reftest/content/xul/object-fit-none-svg-004.xhtml object-fit-none-svg-004-ref.html +== chrome://reftest/content/xul/object-fit-none-svg-005.xhtml object-fit-none-svg-005-ref.html +== chrome://reftest/content/xul/object-fit-none-svg-006.xhtml object-fit-none-svg-006-ref.html +== chrome://reftest/content/xul/object-fit-scale-down-png-001.xhtml object-fit-scale-down-png-001-ref.html +== chrome://reftest/content/xul/object-fit-scale-down-png-002.xhtml object-fit-scale-down-png-002-ref.html +== chrome://reftest/content/xul/object-fit-scale-down-svg-001.xhtml object-fit-scale-down-svg-001-ref.html +== chrome://reftest/content/xul/object-fit-scale-down-svg-002.xhtml object-fit-scale-down-svg-002-ref.html +== chrome://reftest/content/xul/object-fit-scale-down-svg-003.xhtml object-fit-scale-down-svg-003-ref.html +== chrome://reftest/content/xul/object-fit-scale-down-svg-004.xhtml object-fit-scale-down-svg-004-ref.html +== chrome://reftest/content/xul/object-fit-scale-down-svg-005.xhtml object-fit-scale-down-svg-005-ref.html +== chrome://reftest/content/xul/object-fit-scale-down-svg-006.xhtml object-fit-scale-down-svg-006-ref.html +== chrome://reftest/content/xul/object-position-png-001.xhtml object-position-png-001-ref.html +== chrome://reftest/content/xul/object-position-png-002.xhtml object-position-png-002-ref.html + +== chrome://reftest/content/xul/image-appearance-dynamic.xhtml chrome://reftest/content/xul/image-appearance-dynamic-ref.xhtml + +# Tests for rendering SVG images in a XUL <treecell>: +# XXXdholbert: These are marked as "random" right now, since they might not +# render the images they trying to test in time for the reftest snapshot, per +# bug 1218954. +skip == chrome://reftest/content/xul/treecell-image-svg-1a.xhtml chrome://reftest/content/xul/treecell-image-svg-1-ref.xhtml # bug 1218954 +skip == chrome://reftest/content/xul/treecell-image-svg-1b.xhtml chrome://reftest/content/xul/treecell-image-svg-1-ref.xhtml # bug 1218954 + +== chrome://reftest/content/xul/treechildren-padding-percent-1.xhtml chrome://reftest/content/xul/treechildren-padding-percent-1-ref.xhtml + +!= chrome://reftest/content/xul/treetwisty-svg-context-paint-1-not-ref.xhtml chrome://reftest/content/xul/treetwisty-svg-context-paint-1-ref.xhtml +test-pref(svg.context-properties.content.enabled,true) == chrome://reftest/content/xul/treetwisty-svg-context-paint-1.xhtml chrome://reftest/content/xul/treetwisty-svg-context-paint-1-ref.xhtml + +# resizer (non-native-themed) + +!= chrome://reftest/content/xul/resizer-bottomend.xhtml chrome://reftest/content/xul/blank-window.xhtml +== chrome://reftest/content/xul/resizer-bottomend.xhtml chrome://reftest/content/xul/resizer-bottomright.xhtml +!= chrome://reftest/content/xul/resizer-bottomend.xhtml chrome://reftest/content/xul/resizer-bottomend-rtl.xhtml +!= chrome://reftest/content/xul/resizer-bottomend-rtl.xhtml chrome://reftest/content/xul/blank-window.xhtml +== chrome://reftest/content/xul/resizer-bottomend-rtl.xhtml chrome://reftest/content/xul/resizer-bottomend-flipped.xhtml +== chrome://reftest/content/xul/resizer-bottomleft-rtl.xhtml chrome://reftest/content/xul/resizer-bottomleft.xhtml +== chrome://reftest/content/xul/resizer-bottomright-rtl.xhtml chrome://reftest/content/xul/resizer-bottomright.xhtml + +!= chrome://reftest/content/xul/resizer-bottomstart.xhtml chrome://reftest/content/xul/blank-window.xhtml +== chrome://reftest/content/xul/resizer-bottomstart.xhtml chrome://reftest/content/xul/resizer-bottomleft.xhtml +== chrome://reftest/content/xul/resizer-bottomstart.xhtml chrome://reftest/content/xul/resizer-left.xhtml +!= chrome://reftest/content/xul/resizer-bottomstart.xhtml chrome://reftest/content/xul/resizer-bottomstart-rtl.xhtml +!= chrome://reftest/content/xul/resizer-bottomstart-rtl.xhtml chrome://reftest/content/xul/blank-window.xhtml +== chrome://reftest/content/xul/resizer-bottomstart-rtl.xhtml chrome://reftest/content/xul/resizer-bottomend.xhtml diff --git a/layout/reftests/xul/resizer-bottomend-flipped.xhtml b/layout/reftests/xul/resizer-bottomend-flipped.xhtml new file mode 100644 index 0000000000..e82531969f --- /dev/null +++ b/layout/reftests/xul/resizer-bottomend-flipped.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Resizer" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <hbox> + <resizer dir="bottomend" style="-moz-transform: scaleX(-1); -moz-appearance: none"/> + <spacer flex="1"/> + </hbox> +</window> diff --git a/layout/reftests/xul/resizer-bottomend-rtl.xhtml b/layout/reftests/xul/resizer-bottomend-rtl.xhtml new file mode 100644 index 0000000000..04169aeb11 --- /dev/null +++ b/layout/reftests/xul/resizer-bottomend-rtl.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Resizer" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" localedir="rtl"> + <hbox> + <spacer flex="1"/> + <resizer dir="bottomend" style="-moz-appearance: none"/> + </hbox> +</window> diff --git a/layout/reftests/xul/resizer-bottomend.xhtml b/layout/reftests/xul/resizer-bottomend.xhtml new file mode 100644 index 0000000000..c8a5a3c90f --- /dev/null +++ b/layout/reftests/xul/resizer-bottomend.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Resizer" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <hbox> + <resizer dir="bottomend" style="-moz-appearance: none"/> + <spacer flex="1"/> + </hbox> +</window> diff --git a/layout/reftests/xul/resizer-bottomleft-rtl.xhtml b/layout/reftests/xul/resizer-bottomleft-rtl.xhtml new file mode 100644 index 0000000000..a9a1d88dc2 --- /dev/null +++ b/layout/reftests/xul/resizer-bottomleft-rtl.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Resizer" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" localedir="rtl"> + <hbox> + <spacer flex="1"/> + <resizer dir="bottomleft" style="-moz-appearance: none"/> + </hbox> +</window> diff --git a/layout/reftests/xul/resizer-bottomleft.xhtml b/layout/reftests/xul/resizer-bottomleft.xhtml new file mode 100644 index 0000000000..fca43d53cb --- /dev/null +++ b/layout/reftests/xul/resizer-bottomleft.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Resizer" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <hbox> + <resizer dir="bottomleft" style="-moz-appearance: none"/> + <spacer flex="1"/> + </hbox> +</window> diff --git a/layout/reftests/xul/resizer-bottomright-rtl.xhtml b/layout/reftests/xul/resizer-bottomright-rtl.xhtml new file mode 100644 index 0000000000..f38591d441 --- /dev/null +++ b/layout/reftests/xul/resizer-bottomright-rtl.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Resizer" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" localedir="rtl"> + <hbox> + <spacer flex="1"/> + <resizer dir="bottomright" style="-moz-appearance: none"/> + </hbox> +</window> diff --git a/layout/reftests/xul/resizer-bottomright.xhtml b/layout/reftests/xul/resizer-bottomright.xhtml new file mode 100644 index 0000000000..f3f5061ed1 --- /dev/null +++ b/layout/reftests/xul/resizer-bottomright.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Resizer" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <hbox> + <resizer dir="bottomright" style="-moz-appearance: none"/> + <spacer flex="1"/> + </hbox> +</window> diff --git a/layout/reftests/xul/resizer-bottomstart-rtl.xhtml b/layout/reftests/xul/resizer-bottomstart-rtl.xhtml new file mode 100644 index 0000000000..78af428cf7 --- /dev/null +++ b/layout/reftests/xul/resizer-bottomstart-rtl.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Resizer" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" localedir="rtl"> + <hbox> + <spacer flex="1"/> + <resizer dir="bottomstart" style="-moz-appearance: none"/> + </hbox> +</window> diff --git a/layout/reftests/xul/resizer-bottomstart.xhtml b/layout/reftests/xul/resizer-bottomstart.xhtml new file mode 100644 index 0000000000..5608a7ecf5 --- /dev/null +++ b/layout/reftests/xul/resizer-bottomstart.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Resizer" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <hbox> + <resizer dir="bottomstart" style="-moz-appearance: none"/> + <spacer flex="1"/> + </hbox> +</window> diff --git a/layout/reftests/xul/resizer-left.xhtml b/layout/reftests/xul/resizer-left.xhtml new file mode 100644 index 0000000000..6e02b2f43d --- /dev/null +++ b/layout/reftests/xul/resizer-left.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window title="Resizer" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <hbox> + <resizer dir="left" style="-moz-appearance: none"/> + <spacer flex="1"/> + </hbox> +</window> diff --git a/layout/reftests/xul/text-crop-ref.xhtml b/layout/reftests/xul/text-crop-ref.xhtml new file mode 100644 index 0000000000..2ff7341a9f --- /dev/null +++ b/layout/reftests/xul/text-crop-ref.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0"?> +<window class="reftest-wait" + align="start" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <html:style type="text/css"> + @font-face { + font-family: firasans; + src: url(../fonts/fira/FiraSans-Regular.otf); + } + vbox { + font-family: firasans; + font-size: 40px; + } + </html:style> +<vbox width="230"> + <label id="start" value="" /> + <label id="end" value="" /> + <label id="center" value="" /> +</vbox> +<script> +<![CDATA[ +function text(n) { + // Include U+FE0E variation selector to ensure font selection doesn't + // seek out a color-emoji font in preference to Fira. + return "\u{1F310}\u{FE0E}".repeat(n); +} +var e = "\u{2026}"; +document.getElementById("start").value = e + text(4); +document.getElementById("end").value = text(4) + e; +document.getElementById("center").value = text(2) + e + text(2); +document.documentElement.className = ""; +]]> +</script> +</window> diff --git a/layout/reftests/xul/text-crop.xhtml b/layout/reftests/xul/text-crop.xhtml new file mode 100644 index 0000000000..4057b2a48d --- /dev/null +++ b/layout/reftests/xul/text-crop.xhtml @@ -0,0 +1,34 @@ +<?xml version="1.0"?> +<window class="reftest-wait" + align="start" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <html:style type="text/css"> + @font-face { + font-family: firasans; + src: url(../fonts/fira/FiraSans-Regular.otf); + } + vbox { + font-family: firasans; + font-size: 40px; + } + </html:style> +<vbox width="230"> + <label id="start" value="" crop="start" /> + <label id="end" value="" crop="end" /> + <label id="center" value="" crop="center" /> +</vbox> +<script> +<![CDATA[ +function text(n) { + // Include U+FE0E variation selector to ensure font selection doesn't + // seek out a color-emoji font in preference to Fira. + return "\u{1F310}\u{FE0E}".repeat(n); +} +document.getElementById("start").value = text(10); +document.getElementById("end").value = text(10); +document.getElementById("center").value = text(10); +document.documentElement.className = ""; +]]> +</script> +</window> diff --git a/layout/reftests/xul/text-small-caps-1-ref.xhtml b/layout/reftests/xul/text-small-caps-1-ref.xhtml new file mode 100644 index 0000000000..8eb86ec55e --- /dev/null +++ b/layout/reftests/xul/text-small-caps-1-ref.xhtml @@ -0,0 +1,8 @@ +<?xml version="1.0"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="start"> +<hbox style="font: 40px monospace;" align="baseline"> + <label value="lowercase"/> + <label value="SMALLCAPS" style="font-size: 32px;"/> + <label value="CAPITALS"/> +</hbox> +</window> diff --git a/layout/reftests/xul/text-small-caps-1.xhtml b/layout/reftests/xul/text-small-caps-1.xhtml new file mode 100644 index 0000000000..7a7775f38e --- /dev/null +++ b/layout/reftests/xul/text-small-caps-1.xhtml @@ -0,0 +1,8 @@ +<?xml version="1.0"?> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="start"> +<hbox style="font: 40px monospace;"> + <label value="lowercase" style="font-variant: normal;"/> + <label value="smallcaps" style="font-variant: small-caps;"/> + <label value="CAPITALS" style="font-variant: small-caps;"/> +</hbox> +</window> diff --git a/layout/reftests/xul/textbox-overflow-1-ref.xhtml b/layout/reftests/xul/textbox-overflow-1-ref.xhtml new file mode 100644 index 0000000000..7b8b79650a --- /dev/null +++ b/layout/reftests/xul/textbox-overflow-1-ref.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<!-- bug 749658 - The cropped label should *not* cause a scroll bar to appear. + If it does, the scrollbars in the testcase and reference will differ + because the total scroll-overflow extent will be different. --> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="start"> + <hbox width="150px" style="overflow: scroll"> + <label value="A very long label for a small item" + width="120px" crop="right"/> + </hbox> +</window> diff --git a/layout/reftests/xul/textbox-overflow-1.xhtml b/layout/reftests/xul/textbox-overflow-1.xhtml new file mode 100644 index 0000000000..a37db77dd1 --- /dev/null +++ b/layout/reftests/xul/textbox-overflow-1.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<!-- bug 749658 - The cropped label should *not* cause a scroll bar to appear. + If it does, the scrollbars in the testcase and reference will differ + because the total scroll-overflow extent will be different. --> +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="start"> + <hbox width="150px" style="overflow: scroll"> + <label value="A very long label for a small item that should not trigger a scroll bar" + width="120px" crop="right"/> + </hbox> +</window> diff --git a/layout/reftests/xul/tree-row-outline-1-notref.xhtml b/layout/reftests/xul/tree-row-outline-1-notref.xhtml new file mode 100644 index 0000000000..736d42dae2 --- /dev/null +++ b/layout/reftests/xul/tree-row-outline-1-notref.xhtml @@ -0,0 +1,20 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + > + + <tree seltype="single" flex="1"> + <treecols> + <treecol flex="1"/> + <treecol flex="1"/> + </treecols> + <treechildren> + <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem> + <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem> + <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem> + </treechildren> + </tree> + +</window> diff --git a/layout/reftests/xul/tree-row-outline-1-ref.xhtml b/layout/reftests/xul/tree-row-outline-1-ref.xhtml new file mode 100644 index 0000000000..006d836ac2 --- /dev/null +++ b/layout/reftests/xul/tree-row-outline-1-ref.xhtml @@ -0,0 +1,30 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + > + + <html:style> + <![CDATA[ + + treechildren::-moz-tree-row(odd) { + border: 2px solid blue; + } + + ]]> + </html:style> + + <tree seltype="single" flex="1"> + <treecols> + <treecol flex="1"/> + <treecol flex="1"/> + </treecols> + <treechildren> + <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem> + <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem> + <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem> + </treechildren> + </tree> + +</window> diff --git a/layout/reftests/xul/tree-row-outline-1.xhtml b/layout/reftests/xul/tree-row-outline-1.xhtml new file mode 100644 index 0000000000..4b0af1d962 --- /dev/null +++ b/layout/reftests/xul/tree-row-outline-1.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + > + + <html:style> + <![CDATA[ + + treechildren::-moz-tree-row(odd) { + outline: 2px solid blue; + outline-offset: -2px; + } + + ]]> + </html:style> + + <tree seltype="single" flex="1"> + <treecols> + <treecol flex="1"/> + <treecol flex="1"/> + </treecols> + <treechildren> + <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem> + <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem> + <treeitem><treerow><treecell label="One"/><treecell label="Two"/></treerow></treeitem> + </treechildren> + </tree> + +</window> diff --git a/layout/reftests/xul/treecell-image-svg-1-ref.xhtml b/layout/reftests/xul/treecell-image-svg-1-ref.xhtml new file mode 100644 index 0000000000..029b140f01 --- /dev/null +++ b/layout/reftests/xul/treecell-image-svg-1-ref.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <tree seltype="single" flex="1"> + <treecols> + <treecol flex="1"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell src="colors-16x8.png"/> + </treerow> + </treeitem> + </treechildren> + </tree> +</window> diff --git a/layout/reftests/xul/treecell-image-svg-1a.xhtml b/layout/reftests/xul/treecell-image-svg-1a.xhtml new file mode 100644 index 0000000000..d481190345 --- /dev/null +++ b/layout/reftests/xul/treecell-image-svg-1a.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <tree seltype="single" flex="1"> + <treecols> + <treecol flex="1"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell src="colors-16x8.svg"/> + </treerow> + </treeitem> + </treechildren> + </tree> +</window> diff --git a/layout/reftests/xul/treecell-image-svg-1b.xhtml b/layout/reftests/xul/treecell-image-svg-1b.xhtml new file mode 100644 index 0000000000..f13c138fda --- /dev/null +++ b/layout/reftests/xul/treecell-image-svg-1b.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <tree seltype="single" flex="1"> + <treecols> + <treecol flex="1"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell src="colors-16x8-noSize.svg"/> + </treerow> + </treeitem> + </treechildren> + </tree> +</window> diff --git a/layout/reftests/xul/treechildren-padding-percent-1-ref.xhtml b/layout/reftests/xul/treechildren-padding-percent-1-ref.xhtml new file mode 100644 index 0000000000..31e803c7f3 --- /dev/null +++ b/layout/reftests/xul/treechildren-padding-percent-1-ref.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style> + </style> + <tree seltype="single" flex="1"> + <treecols> + <treecol flex="1"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell label="I am a treecell"></treecell> + </treerow> + </treeitem> + </treechildren> + </tree> +</window> diff --git a/layout/reftests/xul/treechildren-padding-percent-1.xhtml b/layout/reftests/xul/treechildren-padding-percent-1.xhtml new file mode 100644 index 0000000000..183471234a --- /dev/null +++ b/layout/reftests/xul/treechildren-padding-percent-1.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <style> + </style> + <tree seltype="single" flex="1"> + <treecols> + <treecol flex="1"/> + </treecols> + <treechildren style="padding: 5%"> + <treeitem> + <treerow> + <treecell label="I am a treecell"></treecell> + </treerow> + </treeitem> + </treechildren> + </tree> +</window> diff --git a/layout/reftests/xul/treetwisty-context-paint.svg b/layout/reftests/xul/treetwisty-context-paint.svg new file mode 100644 index 0000000000..c443b2b0fc --- /dev/null +++ b/layout/reftests/xul/treetwisty-context-paint.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" + fill="context-fill" stroke="context-stroke" fill-opacity="context-fill-opacity" stroke-opacity="context-stroke-opacity"> + <circle cx="8" cy="8" r="7"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/xul/treetwisty-no-context-paint.svg b/layout/reftests/xul/treetwisty-no-context-paint.svg new file mode 100644 index 0000000000..394f052a4a --- /dev/null +++ b/layout/reftests/xul/treetwisty-no-context-paint.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" + fill="green" stroke="purple" fill-opacity="0.5" stroke-opacity="0.2"> + <circle cx="8" cy="8" r="7"/> +</svg> diff --git a/layout/reftests/xul/treetwisty-svg-context-paint-1-not-ref.xhtml b/layout/reftests/xul/treetwisty-svg-context-paint-1-not-ref.xhtml new file mode 100644 index 0000000000..4021edb260 --- /dev/null +++ b/layout/reftests/xul/treetwisty-svg-context-paint-1-not-ref.xhtml @@ -0,0 +1,37 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <html:style> + treechildren::-moz-tree-twisty { + -moz-appearance: none !important; + -moz-context-properties: none !important; + list-style: none !important; + } + </html:style> + <tree seltype="single" flex="1"> + <treecols> + <treecol flex="1" primary="true"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell label="----"></treecell> + </treerow> + </treeitem> + <treeitem container="true" open="true"> + <treerow> + <treecell label="----"></treecell> + </treerow> + <treechildren> + <treeitem> + <treerow> + <treecell label="----"></treecell> + </treerow> + </treeitem> + </treechildren> + </treeitem> + </treechildren> + </tree> +</window> diff --git a/layout/reftests/xul/treetwisty-svg-context-paint-1-ref.xhtml b/layout/reftests/xul/treetwisty-svg-context-paint-1-ref.xhtml new file mode 100644 index 0000000000..fd951e3819 --- /dev/null +++ b/layout/reftests/xul/treetwisty-svg-context-paint-1-ref.xhtml @@ -0,0 +1,42 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <image src="treetwisty-no-context-paint.svg" id="preload-image"/> + <html:style> + #preload-image { + visibility: collapse; + } + + treechildren::-moz-tree-twisty { + -moz-appearance: none !important; + -moz-context-properties: none !important; + list-style-image: url(treetwisty-no-context-paint.svg); + } + </html:style> + <tree seltype="single" flex="1"> + <treecols> + <treecol flex="1" primary="true"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell label="----"></treecell> + </treerow> + </treeitem> + <treeitem container="true" open="true"> + <treerow> + <treecell label="----"></treecell> + </treerow> + <treechildren> + <treeitem> + <treerow> + <treecell label="----"></treecell> + </treerow> + </treeitem> + </treechildren> + </treeitem> + </treechildren> + </tree> +</window> diff --git a/layout/reftests/xul/treetwisty-svg-context-paint-1.xhtml b/layout/reftests/xul/treetwisty-svg-context-paint-1.xhtml new file mode 100644 index 0000000000..95a91b0d22 --- /dev/null +++ b/layout/reftests/xul/treetwisty-svg-context-paint-1.xhtml @@ -0,0 +1,47 @@ +<?xml version="1.0"?> +<?xml-stylesheet href="chrome://global/skin" type="text/css"?> + +<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml"> + <image src="treetwisty-context-paint.svg" id="preload-image"/> + <html:style> + #preload-image { + visibility: collapse; + } + + #preload-image, + treechildren::-moz-tree-twisty { + -moz-appearance: none !important; + -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important; + fill: green; + fill-opacity: 0.5; + stroke: purple; + stroke-opacity: 0.2; + list-style-image: url(treetwisty-context-paint.svg); + } + </html:style> + <tree seltype="single" flex="1"> + <treecols> + <treecol flex="1" primary="true"/> + </treecols> + <treechildren> + <treeitem> + <treerow> + <treecell label="----"></treecell> + </treerow> + </treeitem> + <treeitem container="true" open="true"> + <treerow> + <treecell label="----"></treecell> + </treerow> + <treechildren> + <treeitem> + <treerow> + <treecell label="----"></treecell> + </treerow> + </treeitem> + </treechildren> + </treeitem> + </treechildren> + </tree> +</window> |
