| author | Daniel Holbert <dholbert@cs.stanford.edu> |
| Tue, 25 Nov 2014 16:46:15 -0800 | |
| changeset 241854 | 7ac2902afded1bcd69bd654cafe9de8cf5e419ed |
| parent 241853 | ea1bc74871c0b205a9ccd741b8e0888baf1afcef |
| child 241855 | 3ec328e9feda8be4bd1cb4a59de8e7c7af4edbfe |
| push id | 4311 |
| push user | raliiev@mozilla.com |
| push date | Mon, 12 Jan 2015 19:37:41 +0000 |
| treeherder | mozilla-beta@150c9fed433b [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | seth |
| bugs | 1098417 |
| milestone | 36.0a1 |
| first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
| last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("support/colors-16x8.png"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { background-position: 50% -7% } + .op_y13 { background-position: 50% 13% } + .op_y23 { background-position: 50% 23% } + .op_y50 { background-position: 50% 50% } + .op_y75 { background-position: 50% 75% } + .op_y88 { background-position: 50% 88% } + .op_y111 { background-position: 50% 111% } + + </style> + </head> + <body> + <div class="op_y-7"></div> + <div class="op_y13"></div> + <div class="op_y23"></div> + <div class="op_y50"></div> + <div class="op_y75"></div> + <div class="op_y88"></div> + <div class="op_y111"></div> + </body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001e.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-001-ref.html"> + <style type="text/css"> + embed { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <embed src="support/colors-16x8.png" class="op_y-7"> + <embed src="support/colors-16x8.png" class="op_y13"> + <embed src="support/colors-16x8.png" class="op_y23"> + <embed src="support/colors-16x8.png" class="op_y50"> + <embed src="support/colors-16x8.png" class="op_y75"> + <embed src="support/colors-16x8.png" class="op_y88"> + <embed src="support/colors-16x8.png" class="op_y111"> + </body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001i.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-001-ref.html"> + <style type="text/css"> + img { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <img src="support/colors-16x8.png" class="op_y-7"> + <img src="support/colors-16x8.png" class="op_y13"> + <img src="support/colors-16x8.png" class="op_y23"> + <img src="support/colors-16x8.png" class="op_y50"> + <img src="support/colors-16x8.png" class="op_y75"> + <img src="support/colors-16x8.png" class="op_y88"> + <img src="support/colors-16x8.png" class="op_y111"> + </body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001o.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-001-ref.html"> + <style type="text/css"> + object { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <object data="support/colors-16x8.png" class="op_y-7"></object> + <object data="support/colors-16x8.png" class="op_y13"></object> + <object data="support/colors-16x8.png" class="op_y23"></object> + <object data="support/colors-16x8.png" class="op_y50"></object> + <object data="support/colors-16x8.png" class="op_y75"></object> + <object data="support/colors-16x8.png" class="op_y88"></object> + <object data="support/colors-16x8.png" class="op_y111"></object> + </body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-001p.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size video element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-001-ref.html"> + <style type="text/css"> + video { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <video poster="support/colors-16x8.png" class="op_y-7"></video> + <video poster="support/colors-16x8.png" class="op_y13"></video> + <video poster="support/colors-16x8.png" class="op_y23"></video> + <video poster="support/colors-16x8.png" class="op_y50"></video> + <video poster="support/colors-16x8.png" class="op_y75"></video> + <video poster="support/colors-16x8.png" class="op_y88"></video> + <video poster="support/colors-16x8.png" class="op_y111"></video> + </body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("support/colors-8x16.png"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { background-position: -7% 50% } + .op_x13 { background-position: 13% 50% } + .op_x23 { background-position: 23% 50% } + .op_x50 { background-position: 50% 50% } + .op_x75 { background-position: 75% 50% } + .op_x88 { background-position: 88% 50% } + .op_x111 { background-position: 111% 50% } + + </style> + </head> + <body> + <div class="op_x-7"></div> + <div class="op_x13"></div> + <div class="op_x23"></div> + <div class="op_x50"></div> + <div class="op_x75"></div> + <div class="op_x88"></div> + <div class="op_x111"></div> + </body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002e.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size embed element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-002-ref.html"> + <style type="text/css"> + embed { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <embed src="support/colors-8x16.png" class="op_x-7"> + <embed src="support/colors-8x16.png" class="op_x13"> + <embed src="support/colors-8x16.png" class="op_x23"> + <embed src="support/colors-8x16.png" class="op_x50"> + <embed src="support/colors-8x16.png" class="op_x75"> + <embed src="support/colors-8x16.png" class="op_x88"> + <embed src="support/colors-8x16.png" class="op_x111"> + </body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002i.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size img element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-002-ref.html"> + <style type="text/css"> + img { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <img src="support/colors-8x16.png" class="op_x-7"> + <img src="support/colors-8x16.png" class="op_x13"> + <img src="support/colors-8x16.png" class="op_x23"> + <img src="support/colors-8x16.png" class="op_x50"> + <img src="support/colors-8x16.png" class="op_x75"> + <img src="support/colors-8x16.png" class="op_x88"> + <img src="support/colors-8x16.png" class="op_x111"> + </body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002o.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size object element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-002-ref.html"> + <style type="text/css"> + object { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <object data="support/colors-8x16.png" class="op_x-7"></object> + <object data="support/colors-8x16.png" class="op_x13"></object> + <object data="support/colors-8x16.png" class="op_x23"></object> + <object data="support/colors-8x16.png" class="op_x50"></object> + <object data="support/colors-8x16.png" class="op_x75"></object> + <object data="support/colors-8x16.png" class="op_x88"></object> + <object data="support/colors-8x16.png" class="op_x111"></object> + </body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/object-position-png-002p.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: various 'object-position' values on a fixed-size video element, with a PNG image and 'object-fit:contain'.</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="object-position-png-002-ref.html"> + <style type="text/css"> + video { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + + </style> + </head> + <body> + <video poster="support/colors-8x16.png" class="op_x-7"></video> + <video poster="support/colors-8x16.png" class="op_x13"></video> + <video poster="support/colors-8x16.png" class="op_x23"></video> + <video poster="support/colors-8x16.png" class="op_x50"></video> + <video poster="support/colors-8x16.png" class="op_x75"></video> + <video poster="support/colors-8x16.png" class="op_x88"></video> + <video poster="support/colors-8x16.png" class="op_x111"></video> + </body> +</html>
--- a/layout/reftests/w3c-css/submitted/images3/reftest.list +++ b/layout/reftests/w3c-css/submitted/images3/reftest.list @@ -157,8 +157,16 @@ fails == object-fit-fill-svg-006p.html o == object-fit-scale-down-svg-005e.html object-fit-scale-down-svg-005-ref.html == object-fit-scale-down-svg-005i.html object-fit-scale-down-svg-005-ref.html == object-fit-scale-down-svg-005o.html object-fit-scale-down-svg-005-ref.html == object-fit-scale-down-svg-005p.html object-fit-scale-down-svg-005-ref.html == object-fit-scale-down-svg-006e.html object-fit-scale-down-svg-006-ref.html == object-fit-scale-down-svg-006i.html object-fit-scale-down-svg-006-ref.html == object-fit-scale-down-svg-006o.html object-fit-scale-down-svg-006-ref.html == object-fit-scale-down-svg-006p.html object-fit-scale-down-svg-006-ref.html +== object-position-png-001e.html object-position-png-001-ref.html +== object-position-png-001i.html object-position-png-001-ref.html +== object-position-png-001o.html object-position-png-001-ref.html +== object-position-png-001p.html object-position-png-001-ref.html +== object-position-png-002e.html object-position-png-002-ref.html +== object-position-png-002i.html object-position-png-002-ref.html +== object-position-png-002o.html object-position-png-002-ref.html +== object-position-png-002p.html object-position-png-002-ref.html
copy from layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh copy to layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh --- a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh +++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh @@ -1,109 +1,88 @@ #!/bin/bash # # Any copyright is dedicated to the Public Domain. # http://creativecommons.org/publicdomain/zero/1.0/ # # This is a script that I used to generate a suite of tests for the CSS -# properties "object-fit" and "object-position", using a template testcase -# file and reference case file. +# properties "object-fit" and "object-position" (focusing on edge-case +# object-position values that require pixel rounding), using a template +# testcase file and reference case file. # # The reference case uses the "background-size" & "background-position" # equivalent of the tested "object-fit" / "object-position" values. -# (One exception: since there is no "background-size" equivalent of -# "object-fit: scale-down", we add an extra CSS rule for the "scale-down" -# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.) FILE_PATH="./" REFTEST_LIST_FILE="$FILE_PATH/reftest.list" -TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html -TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html +TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html +TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html imageFileFormat="png" # Array of image files to use for testing: imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png") numImageFiles=${#imageFileArr[@]} -# Array of "object-fit" values, & of corresponding "background-size" values. -# (Note: background-size has no equivalent for "object-fit: scale-down". We use -# "auto auto" here, which is equivalent *some* of the time; and for the cases -# where it's *not* equivalent, we use an extra CSS rule in the reference case. -# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.) -objectFitArr=( "fill" "contain" "cover" "none" "scale-down" ) -backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto" ) -numObjectFitVals=${#objectFitArr[@]} +# Array of CSS classes to delete from the template, for a given image-file. +# DETAILS: The template files contain some elements/styles that exercise +# object-position x-values (op_x), and other elements/styles that exercise +# object-position y-values (op_y). But actually, we'll only have extra space +# for these percent values to resolve against in *one* dimension (since our +# image-files are rectangular, and the container element is square, and we +# scale the image up with "object-fit: contain"). So, we delete the +# elements/styles in the dimension where object-position % values will just +# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image). +classPatternToDeleteArr=("op_x" "op_y") # Array of tag-names for elements that we'd like to test: # (Also: array of a single-letter abbreviation for each element, an array of # the close tag for each element -- if a close tag is needed -- and an array # indicating the attribute that each element uses to specify its image source.) tagNameArr=( "embed" "img" "object" "video" ) tagLetterArr=( "e" "i" "o" "p" ) tagCloseTokenArr=( "" "" "</object>" "</video>" ) tagSrcAttrArr=( "src" "src" "data" "poster" ) numTags=${#tagNameArr[@]} -# FIRST: Add 'default-preferences' line to the top of our reftest manifest: -echo "default-preferences test-pref(layout.css.object-fit-and-position.enabled,true) -# Tests for 'object-fit' / 'object-position' with a PNG image" \ - >> $REFTEST_LIST_FILE - -for ((i = 0; i < $numObjectFitVals; i++)); do - objectFit=${objectFitArr[$i]} - backgroundSizeEquiv=${backgroundSizeEquivArr[$i]} - - # The reference case for "scale-down" needs an additional style rule, to - # look like "object-fit: scale-down" on small objects. (This is necessary - # because "background-size" doesn't have a value that exactly maps to - # "object-fit: scale-down".) - if [[ $objectFit == "scale-down" ]]; then - scaledownRule=".objectOuter > .small { background-size: contain; }" - scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/" - else - # (We're not testing "scale-down" in this generated file, so just delete - # the template's placeholder line for a "scale-down"-specific CSS rule.) - scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d" - fi - for ((j = 0; j < $numImageFiles; j++)); do imageFile=${imageFileArr[$j]} + + classPatternToDelete=${classPatternToDeleteArr[$j]} + let testNum=$j+1 testNum="00$testNum" # zero-pad to 3 digits, per w3c convention - filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum" + filenameStub="object-position-$imageFileFormat-$testNum" # Generate a reference case: filenameRef="$filenameStub-ref.html" echo Generating ${filenameRef}. cat $TEMPLATE_REFERENCE_FILENAME \ | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ - | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \ - | sed "$scaledownSedCmd" \ - > $FILE_PATH/$filenameRef; + | sed "/$classPatternToDelete/d" \ + > $FILE_PATH/$filenameRef # Generate a test for each of our tags: for ((k = 0; k < $numTags; k++)); do tagName=${tagNameArr[$k]} tagLetter=${tagLetterArr[$k]} tagCloseToken=${tagCloseTokenArr[$k]} tagSrcAttr=${tagSrcAttrArr[$k]} filenameTest="$filenameStub$tagLetter.html" - testTitle="'object-fit: $objectFit' on $tagName element, with a PNG image and with various 'object-position' values" + testTitle="various 'object-position' values on a fixed-size $tagName element, with a PNG image and 'object-fit:contain'." echo Generating ${filenameTest}. cat $TEMPLATE_TESTCASE_FILENAME \ | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \ | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \ | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \ | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken," \ | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \ - | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \ + | sed "/$classPatternToDelete/d" \ > $FILE_PATH/$filenameTest echo "== $filenameTest $filenameRef" \ >> $REFTEST_LIST_FILE done done -done
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("REPLACEME_IMAGE_FILENAME"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { background-position: -7% 50% } + .op_x13 { background-position: 13% 50% } + .op_x23 { background-position: 23% 50% } + .op_x50 { background-position: 50% 50% } + .op_x75 { background-position: 75% 50% } + .op_x88 { background-position: 88% 50% } + .op_x111 { background-position: 111% 50% } + .op_y-7 { background-position: 50% -7% } + .op_y13 { background-position: 50% 13% } + .op_y23 { background-position: 50% 23% } + .op_y50 { background-position: 50% 50% } + .op_y75 { background-position: 50% 75% } + .op_y88 { background-position: 50% 88% } + .op_y111 { background-position: 50% 111% } + + </style> + </head> + <body> + <div class="op_x-7"></div> + <div class="op_x13"></div> + <div class="op_x23"></div> + <div class="op_x50"></div> + <div class="op_x75"></div> + <div class="op_x88"></div> + <div class="op_x111"></div> + <div class="op_y-7"></div> + <div class="op_y13"></div> + <div class="op_y23"></div> + <div class="op_y50"></div> + <div class="op_y75"></div> + <div class="op_y88"></div> + <div class="op_y111"></div> + </body> +</html>
new file mode 100644 --- /dev/null +++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: REPLACEME_TEST_TITLE</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="REPLACEME_REFERENCE_FILENAME"> + <style type="text/css"> + REPLACEME_CONTAINER_TAG { + background: lightgray; + margin-right: 2px; + object-fit: contain; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { object-position: -7% 50% } + .op_x13 { object-position: 13% 50% } + .op_x23 { object-position: 23% 50% } + .op_x50 { object-position: 50% 50% } + .op_x75 { object-position: 75% 50% } + .op_x88 { object-position: 88% 50% } + .op_x111 { object-position: 111% 50% } + .op_y-7 { object-position: 50% -7% } + .op_y13 { object-position: 50% 13% } + .op_y23 { object-position: 50% 23% } + .op_y50 { object-position: 50% 50% } + .op_y75 { object-position: 50% 75% } + .op_y88 { object-position: 50% 88% } + .op_y111 { object-position: 50% 111% } + + </style> + </head> + <body> + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x-7">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x13">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x23">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x50">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x75">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x88">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x111">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y-7">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y13">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y23">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y50">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y75">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y88">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y111">REPLACEME_CONTAINER_CLOSETAG + </body> +</html>