diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-images/tools')
20 files changed, 1414 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-images/tools/generate-object-fit-and-position-canvas-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-and-position-canvas-tests.sh new file mode 100644 index 0000000000..aeeee5284c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-and-position-canvas-tests.sh @@ -0,0 +1,71 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# Script to generate <canvas src> reftest files for "object-fit" and +# "object-position", from corresponding reftest files that use <object>. +# +# This script expects to be run from the parent directory. + +# Array of image files that we'll use +imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png") +canvasAttributeArr=('width="16" height="8"' 'width="8" height="16"') +numImageFiles=${#imageFileArr[@]} + + +for ((i = 0; i < $numImageFiles; i++)); do + + imageFile=${imageFileArr[$i]} + canvasAttrs=${canvasAttributeArr[$i]} + + # Loop across <object> tests: + # (We assume that tests that end with "001" use the first PNG image in + # $imageFileArr, and tests that end with "002" use the second PNG image.) + let testNum=$i+1 + for origTestName in object-*-png-*00${testNum}o.html; do + # Find the corresponding reference case: + origReferenceName=$(echo $origTestName | + sed "s/o.html/-ref.html/") + + # Replace "o" suffix in filename with "c" (for "canvas") + canvasTestName=$(echo $origTestName | + sed "s/o.html/c.html/") + + # Generate testcase + # (converting <object data="..."> to <canvas width="..." height="..."> + echo "Generating $canvasTestName from $origTestName." + hg cp $origTestName $canvasTestName + + # Do string-replacements in testcase to convert it to test canvas: + # Adjust html & body nodes: + sed -i "s|<html>|<html class=\"reftest-wait\">|" $canvasTestName + sed -i "s|<body>|<body onload=\"drawImageToCanvases('$imageFile')\">|" $canvasTestName + # Adjust <title>: + sed -i "s|object element|canvas element|g" $canvasTestName + # Tweak the actual tags (open & close tags, and CSS rule): + sed -i "s|object {|canvas {|" $canvasTestName + sed -i "s|<object|<canvas|" $canvasTestName + sed -i "s|</object>|</canvas>|" $canvasTestName + # Drop "data" attr (pointing to image URI) and replace with + # width/height attrs to establish the canvas's intrinsic size: + sed -i "s|data=\"$imageFile\"|$canvasAttrs|" $canvasTestName + + # Add a <script> block to draw an image into each canvas: + sed -i "/<\/style>/a \\ + <script>\n\ + function drawImageToCanvases(imageURI) {\n\ + var image = new Image();\n\ + image.onload = function() {\n\ + var canvasElems = document.getElementsByTagName(\"canvas\");\n\ + for (var i = 0; i < canvasElems.length; i++) {\n\ + var ctx = canvasElems[i].getContext(\"2d\");\n\ + ctx.drawImage(image, 0, 0);\n\ + }\n\ + document.documentElement.removeAttribute(\"class\");\n\ + }\n\ + image.src = imageURI;\n\ + }\n\ + <\/script>" $canvasTestName + done +done diff --git a/testing/web-platform/tests/css/css-images/tools/generate-object-fit-png-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-png-tests.sh new file mode 100644 index 0000000000..af20d0212a --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-png-tests.sh @@ -0,0 +1,108 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# This is a script that I used to generate a suite of tests for the CSS +# properties "object-fit" and "object-position", using a template testcase +# file and reference case file. +# +# The reference case uses the "background-size" & "background-position" +# equivalent of the tested "object-fit" / "object-position" values. +# (One exception: since there is no "background-size" equivalent of +# "object-fit: scale-down", we add an extra CSS rule for the "scale-down" +# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.) + +FILE_PATH="./" +REFTEST_LIST_FILE="$FILE_PATH/reftest.list" + +TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html +TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html + +imageFileFormat="png" + +# Array of image files to use for testing: +imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png") +numImageFiles=${#imageFileArr[@]} + +# Array of "object-fit" values, & of corresponding "background-size" values. +# (Note: background-size has no equivalent for "object-fit: scale-down". We use +# "auto auto" here, which is equivalent *some* of the time; and for the cases +# where it's *not* equivalent, we use an extra CSS rule in the reference case. +# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.) +objectFitArr=( "fill" "contain" "cover" "none" "scale-down" ) +backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto" ) +numObjectFitVals=${#objectFitArr[@]} + +# Array of tag-names for elements that we'd like to test: +# (Also: array of a single-letter abbreviation for each element, an array of +# the close tag for each element -- if a close tag is needed -- and an array +# indicating the attribute that each element uses to specify its image source.) +tagNameArr=( "embed" "img" "object" "video" ) +tagLetterArr=( "e" "i" "o" "p" ) +tagCloseTokenArr=( "" "" "</object>" "</video>" ) +tagSrcAttrArr=( "src" "src" "data" "poster" ) +numTags=${#tagNameArr[@]} + +# FIRST: Add title to the top of our reftest manifest: +echo "# Tests for 'object-fit' / 'object-position' with a PNG image" \ + >> $REFTEST_LIST_FILE + +for ((i = 0; i < $numObjectFitVals; i++)); do + objectFit=${objectFitArr[$i]} + backgroundSizeEquiv=${backgroundSizeEquivArr[$i]} + + # The reference case for "scale-down" needs an additional style rule, to + # look like "object-fit: scale-down" on small objects. (This is necessary + # because "background-size" doesn't have a value that exactly maps to + # "object-fit: scale-down".) + if [[ $objectFit == "scale-down" ]]; then + scaledownRule=".objectOuter > .small { background-size: contain; }" + scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/" + else + # (We're not testing "scale-down" in this generated file, so just delete + # the template's placeholder line for a "scale-down"-specific CSS rule.) + scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d" + fi + + for ((j = 0; j < $numImageFiles; j++)); do + imageFile=${imageFileArr[$j]} + let testNum=$j+1 + testNum="00$testNum" # zero-pad to 3 digits, per w3c convention + + filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum" + + # Generate a reference case: + filenameRef="$filenameStub-ref.html" + echo Generating ${filenameRef}. + cat $TEMPLATE_REFERENCE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \ + | sed "$scaledownSedCmd" \ + > $FILE_PATH/$filenameRef; + + # Generate a test for each of our tags: + for ((k = 0; k < $numTags; k++)); do + tagName=${tagNameArr[$k]} + tagLetter=${tagLetterArr[$k]} + tagCloseToken=${tagCloseTokenArr[$k]} + tagSrcAttr=${tagSrcAttrArr[$k]} + + filenameTest="$filenameStub$tagLetter.html" + testTitle="'object-fit: $objectFit' on $tagName element, with a PNG image and with various 'object-position' values" + echo Generating ${filenameTest}. + cat $TEMPLATE_TESTCASE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \ + | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \ + | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \ + | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken," \ + | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \ + | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \ + > $FILE_PATH/$filenameTest + + echo "== $filenameTest $filenameRef" \ + >> $REFTEST_LIST_FILE + done + done +done diff --git a/testing/web-platform/tests/css/css-images/tools/generate-object-fit-svg-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-svg-tests.sh new file mode 100644 index 0000000000..c4d51877e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/generate-object-fit-svg-tests.sh @@ -0,0 +1,116 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# This is a script that I used to generate a suite of tests for the CSS +# properties "object-fit" and "object-position", using a template testcase +# file and reference case file. +# +# The reference case uses the "background-size" & "background-position" +# equivalent of the tested "object-fit" / "object-position" values. +# (One exception: since there is no "background-size" equivalent of +# "object-fit: scale-down", we add an extra CSS rule for the "scale-down" +# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.) + +FILE_PATH="./" +REFTEST_LIST_FILE="$FILE_PATH/reftest.list" + +TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html +TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html + +imageFileFormat="svg" + +# Array of image files to use for testing: +imageFileArr=("support/colors-16x8.svg" + "support/colors-8x16.svg" + "support/colors-16x8-noSize.svg" + "support/colors-8x16-noSize.svg" + "support/colors-16x8-parDefault.svg" + "support/colors-8x16-parDefault.svg") +numImageFiles=${#imageFileArr[@]} + +# Array of "object-fit" values, & of corresponding "background-size" values. +# (Note: background-size has no equivalent for "object-fit: scale-down". We use +# "auto auto" here, which is equivalent *some* of the time; and for the cases +# where it's *not* equivalent, we use an extra CSS rule in the reference case. +# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.) +objectFitArr=( "fill" "contain" "cover" "none" "scale-down" ) +backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto" ) +numObjectFitVals=${#objectFitArr[@]} + +# Array of tag-names for elements that we'd like to test: +# (Also: array of a single-letter abbreviation for each element, an array of +# the close tag for each element -- if a close tag is needed -- and an array +# indicating the attribute that each element uses to specify its image source.) +tagNameArr=( "embed" "img" "object" "video" ) +tagLetterArr=( "e" "i" "o" "p" ) +tagCloseTokenArr=( "" "" "</object>" "</video>" ) +tagSrcAttrArr=( "src" "src" "data" "poster" ) +numTags=${#tagNameArr[@]} + +# FIRST: Add blank line & descriptive comment to reftest manifest: +echo " +# Tests for 'object-fit' / 'object-position' with an SVG image" \ + >> $REFTEST_LIST_FILE + +for ((i = 0; i < $numObjectFitVals; i++)); do + objectFit=${objectFitArr[$i]} + backgroundSizeEquiv=${backgroundSizeEquivArr[$i]} + + # The reference case for "scale-down" needs an additional style rule, to + # look like "object-fit: scale-down" on small objects. (This is necessary + # because "background-size" doesn't have a value that exactly maps to + # "object-fit: scale-down".) + if [[ $objectFit == "scale-down" ]]; then + scaledownRule=".objectOuter > .small { background-size: contain; }" + scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/" + else + # (We're not testing "scale-down" in this generated file, so just delete + # the template's placeholder line for a "scale-down"-specific CSS rule.) + scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d" + fi + + for ((j = 0; j < $numImageFiles; j++)); do + imageFile=${imageFileArr[$j]} + let testNum=$j+1 + testNum="00$testNum" # zero-pad to 3 digits, per w3c convention + + filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum" + + # Generate a reference case: + filenameRef="$filenameStub-ref.html" + echo Generating ${filenameRef}. + cat $TEMPLATE_REFERENCE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \ + | sed "$scaledownSedCmd" \ + | sed "/image-rendering:/d" \ + > $FILE_PATH/$filenameRef; + + # Generate a test for each of our tags: + for ((k = 0; k < $numTags; k++)); do + tagName=${tagNameArr[$k]} + tagLetter=${tagLetterArr[$k]} + tagCloseToken=${tagCloseTokenArr[$k]} + tagSrcAttr=${tagSrcAttrArr[$k]} + + filenameTest="$filenameStub$tagLetter.html" + testTitle="'object-fit: $objectFit' on $tagName element, with a SVG image and with various 'object-position' values" + echo Generating ${filenameTest}. + cat $TEMPLATE_TESTCASE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \ + | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \ + | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \ + | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken," \ + | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \ + | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \ + | sed "/image-rendering:/d" \ + > $FILE_PATH/$filenameTest + + echo "== $filenameTest $filenameRef" \ + >> $REFTEST_LIST_FILE + done + done +done diff --git a/testing/web-platform/tests/css/css-images/tools/generate-object-position-png-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-position-png-tests.sh new file mode 100644 index 0000000000..4763fabf7f --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/generate-object-position-png-tests.sh @@ -0,0 +1,88 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# This is a script that I used to generate a suite of tests for the CSS +# properties "object-fit" and "object-position" (focusing on edge-case +# object-position values that require pixel rounding), using a template +# testcase file and reference case file. +# +# The reference case uses the "background-size" & "background-position" +# equivalent of the tested "object-fit" / "object-position" values. + +FILE_PATH="./" +REFTEST_LIST_FILE="$FILE_PATH/reftest.list" + +TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html +TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html + +imageFileFormat="png" + +# Array of image files to use for testing: +imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png") +numImageFiles=${#imageFileArr[@]} + +# Array of CSS classes to delete from the template, for a given image-file. +# DETAILS: The template files contain some elements/styles that exercise +# object-position x-values (op_x), and other elements/styles that exercise +# object-position y-values (op_y). But actually, we'll only have extra space +# for these percent values to resolve against in *one* dimension (since our +# image-files are rectangular, and the container element is square, and we +# scale the image up with "object-fit: contain"). So, we delete the +# elements/styles in the dimension where object-position % values will just +# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image). +classPatternToDeleteArr=("op_x" "op_y") + +# Array of tag-names for elements that we'd like to test: +# (Also: array of a single-letter abbreviation for each element, an array of +# the close tag for each element -- if a close tag is needed -- and an array +# indicating the attribute that each element uses to specify its image source.) +tagNameArr=( "embed" "img" "object" "video" ) +tagLetterArr=( "e" "i" "o" "p" ) +tagCloseTokenArr=( "" "" "</object>" "</video>" ) +tagSrcAttrArr=( "src" "src" "data" "poster" ) +numTags=${#tagNameArr[@]} + + for ((j = 0; j < $numImageFiles; j++)); do + imageFile=${imageFileArr[$j]} + + classPatternToDelete=${classPatternToDeleteArr[$j]} + + let testNum=$j+1 + testNum="00$testNum" # zero-pad to 3 digits, per w3c convention + + filenameStub="object-position-$imageFileFormat-$testNum" + + # Generate a reference case: + filenameRef="$filenameStub-ref.html" + echo Generating ${filenameRef}. + cat $TEMPLATE_REFERENCE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "/$classPatternToDelete/d" \ + > $FILE_PATH/$filenameRef + + # Generate a test for each of our tags: + for ((k = 0; k < $numTags; k++)); do + tagName=${tagNameArr[$k]} + tagLetter=${tagLetterArr[$k]} + tagCloseToken=${tagCloseTokenArr[$k]} + tagSrcAttr=${tagSrcAttrArr[$k]} + + filenameTest="$filenameStub$tagLetter.html" + testTitle="various 'object-position' values on a fixed-size $tagName element, with a PNG image and 'object-fit:contain'." + echo Generating ${filenameTest}. + cat $TEMPLATE_TESTCASE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \ + | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \ + | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \ + | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken," \ + | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \ + | sed "/$classPatternToDelete/d" \ + > $FILE_PATH/$filenameTest + + echo "== $filenameTest $filenameRef" \ + >> $REFTEST_LIST_FILE + done + done diff --git a/testing/web-platform/tests/css/css-images/tools/generate-object-position-svg-tests.sh b/testing/web-platform/tests/css/css-images/tools/generate-object-position-svg-tests.sh new file mode 100644 index 0000000000..e00385a474 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/generate-object-position-svg-tests.sh @@ -0,0 +1,88 @@ +#!/bin/bash +# +# Any copyright is dedicated to the Public Domain. +# http://creativecommons.org/publicdomain/zero/1.0/ +# +# This is a script that I used to generate a suite of tests for the CSS +# properties "object-fit" and "object-position" (focusing on edge-case +# object-position values that require pixel rounding), using a template +# testcase file and reference case file. +# +# The reference case uses the "background-size" & "background-position" +# equivalent of the tested "object-fit" / "object-position" values. + +FILE_PATH="./" +REFTEST_LIST_FILE="$FILE_PATH/reftest.list" + +TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html +TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html + +imageFileFormat="svg" + +# Array of image files to use for testing: +imageFileArr=("support/colors-16x8.svg" "support/colors-8x16.svg") +numImageFiles=${#imageFileArr[@]} + +# Array of CSS classes to delete from the template, for a given image-file. +# DETAILS: The template files contain some elements/styles that exercise +# object-position x-values (op_x), and other elements/styles that exercise +# object-position y-values (op_y). But actually, we'll only have extra space +# for these percent values to resolve against in *one* dimension (since our +# image-files are rectangular, and the container element is square, and we +# scale the image up with "object-fit: contain"). So, we delete the +# elements/styles in the dimension where object-position % values will just +# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image). +classPatternToDeleteArr=("op_x" "op_y") + +# Array of tag-names for elements that we'd like to test: +# (Also: array of a single-letter abbreviation for each element, an array of +# the close tag for each element -- if a close tag is needed -- and an array +# indicating the attribute that each element uses to specify its image source.) +tagNameArr=( "embed" "img" "object" "video" ) +tagLetterArr=( "e" "i" "o" "p" ) +tagCloseTokenArr=( "" "" "</object>" "</video>" ) +tagSrcAttrArr=( "src" "src" "data" "poster" ) +numTags=${#tagNameArr[@]} + + for ((j = 0; j < $numImageFiles; j++)); do + imageFile=${imageFileArr[$j]} + + classPatternToDelete=${classPatternToDeleteArr[$j]} + + let testNum=$j+1 + testNum="00$testNum" # zero-pad to 3 digits, per w3c convention + + filenameStub="object-position-$imageFileFormat-$testNum" + + # Generate a reference case: + filenameRef="$filenameStub-ref.html" + echo Generating ${filenameRef}. + cat $TEMPLATE_REFERENCE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "/$classPatternToDelete/d" \ + > $FILE_PATH/$filenameRef + + # Generate a test for each of our tags: + for ((k = 0; k < $numTags; k++)); do + tagName=${tagNameArr[$k]} + tagLetter=${tagLetterArr[$k]} + tagCloseToken=${tagCloseTokenArr[$k]} + tagSrcAttr=${tagSrcAttrArr[$k]} + + filenameTest="$filenameStub$tagLetter.html" + testTitle="various 'object-position' values on a fixed-size $tagName element, with a SVG image and 'object-fit:contain'." + echo Generating ${filenameTest}. + cat $TEMPLATE_TESTCASE_FILENAME \ + | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \ + | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \ + | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \ + | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \ + | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken," \ + | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \ + | sed "/$classPatternToDelete/d" \ + > $FILE_PATH/$filenameTest + + echo "== $filenameTest $filenameRef" \ + >> $REFTEST_LIST_FILE + done + done diff --git a/testing/web-platform/tests/css/css-images/tools/generate_object_view_box_tests.py b/testing/web-platform/tests/css/css-images/tools/generate_object_view_box_tests.py new file mode 100644 index 0000000000..452e87bab1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/generate_object_view_box_tests.py @@ -0,0 +1,63 @@ +import os +import sys + +HERE = os.path.abspath(os.path.dirname(__file__)) + +def generate_file(source, destination, tag, name, image_source): + with open(os.path.join(HERE, source)) as file: + lines = file.read() + + replaced_lines = lines.replace('__TAG__', + tag).replace('__NAME__', name).replace( + '__IMAGE_SOURCE__', image_source) + replaced_lines = '<!-- This is an autogen file. Run support/generate_object_view_box_tests.py to update -->\n' + replaced_lines + with open(os.path.join(HERE, destination), "w") as new_file: + new_file.write(replaced_lines) + + +def generate_for_object_fit(object_fit): + names = ['img', 'svg', 'canvas', 'video'] + tags = ['img', 'img', 'canvas', 'video'] + image_sources = [ + 'support/exif-orientation-6-ru.jpg', + 'support/blue-green-red-yellow-50x100.svg', '', '' + ] + + for i in range(len(names)): + source = f'object-view-box-fit-{object_fit}-template.html' + destination = f'../object-view-box-fit-{object_fit}-{names[i]}.html' + generate_file(source, destination, tags[i], names[i], image_sources[i]) + + source = f'object-view-box-fit-{object_fit}-ref-template.html' + destination = f'../object-view-box-fit-{object_fit}-{names[i]}-ref.html' + generate_file(source, destination, tags[i], names[i], image_sources[i]) + + +def generate_for_writing_mode(): + names = ['img', 'svg', 'canvas', 'video'] + tags = ['img', 'img', 'canvas', 'video'] + image_sources = [ + 'support/exif-orientation-6-ru.jpg', + 'support/blue-green-red-yellow-50x100.svg', '', '' + ] + + for i in range(len(names)): + source = 'object-view-box-writing-mode-template.html' + destination = f'../object-view-box-writing-mode-{names[i]}.html' + generate_file(source, destination, tags[i], names[i], image_sources[i]) + + source = 'object-view-box-writing-mode-ref-template.html' + destination = f'../object-view-box-writing-mode-{names[i]}-ref.html' + generate_file(source, destination, tags[i], names[i], image_sources[i]) + + +def main(): + object_fit_types = ['fill', 'cover', 'contain', 'none'] + for object_fit in object_fit_types: + generate_for_object_fit(object_fit) + + generate_for_writing_mode() + + +if __name__ == '__main__': + sys.exit(main()) diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-ref-template.html new file mode 100644 index 0000000000..2f11249570 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-ref-template.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 100px; + height: 200px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_scaling { + position: relative; + top: 25px; + left: 25px; + width: 100px; + height: 200px; +} +</style> +<div class="container_view_box_subset"> + <__TAG__ class="view_box_subset"></__TAG__> +</div> +<div class="container_view_box_subset_with_position"> + <__TAG__ class="view_box_subset_with_position"></__TAG__> +</div> +<div class="container_view_box_subset_with_scaling"> + <__TAG__ class="view_box_subset_with_scaling"></__TAG__> +</div> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-template.html new file mode 100644 index 0000000000..f874e65b88 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-contain-template.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-contain-__NAME__-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + width: 50px; + height: 100px; + background-color: grey; + margin: 5px; + + object-position: 0% 0%; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: contain; + background-color: grey; + margin: 5px; + + width: 100px; + height: 200px; + object-position: 25px 125px; +} +</style> +<__TAG__ class="view_box_subset"></__TAG__> +<__TAG__ class="view_box_subset_with_position"></__TAG__> +<__TAG__ class="view_box_subset_with_scaling"></__TAG__> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-ref-template.html new file mode 100644 index 0000000000..2e830c0bae --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-ref-template.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:contain (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + width: 50px; + height: 100px; + position: relative; + left: -5px; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 40px; + height: 50px; + overflow: hidden; + display: inline-block; +} +.view_box_subset_with_position { + width: 50px; + height: 100px; + position: relative; + top: -50px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + width: 100px; + height: 200px; + position: relative; + left: -25px; + top: -100px; +} +</style> +<div class="container_view_box_subset"> + <__TAG__ class="view_box_subset"></__TAG__> +</div> +<div class="container_view_box_subset_with_position"> + <__TAG__ class="view_box_subset_with_position"></__TAG__> +</div> +<div class="container_view_box_subset_with_scaling"> + <__TAG__ class="view_box_subset_with_scaling"></__TAG__> +</div> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-template.html new file mode 100644 index 0000000000..85664a20b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-cover-template.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:contain</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-cover-__NAME__-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + width: 40px; + height: 50px; + margin: 5px; + object-position: 0% 0%; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: cover; + margin: 5px; + width: 50px; + height: 100px; + /* The top row of pixels can have minor differences due to mismatch in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} +</style> +</body> +<__TAG__ class="view_box_subset"></__TAG__> +<__TAG__ class="view_box_subset_with_position"></__TAG__> +<__TAG__ class="view_box_subset_with_scaling"></__TAG__> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-ref-template.html new file mode 100644 index 0000000000..574e291286 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-ref-template.html @@ -0,0 +1,142 @@ +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:fill (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset { + position: relative; + top: -50px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 50px; + overflow: hidden; + background-color: grey; + display: inline-block; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} + +.container_view_box_subset_with_scaling { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + clip-path: inset(1px 0px 0px 0px); +} +.view_box_subset_with_scaling { + position: relative; + top: -100px; + width: 50px; + height: 200px; +} + +.container_view_box_superset { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} + +.container_view_box_superset_with_position { + width: 100px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_position { + position: relative; + top: 10px; + left: 10px; +} + +.container_view_box_superset_with_scaling { + width: 50px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_superset_with_scaling { + width: 25px; + height: 50px; + object-fit: fill; +} + +.container_view_box_intersection { + width: 25px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} +.view_box_intersection { + width: 50px; + height: 100px; + position: relative; + top: 50px; +} + +.container_view_box_no_intersection { + width: 25px; + height: 50px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +</style> +<div class="container_view_box_subset"> + <__TAG__ class="view_box_subset"></__TAG__> +</div> +<div class="container_view_box_subset_with_position"> + <__TAG__ class="view_box_subset_with_position"></__TAG__> +</div> +<div class="container_view_box_subset_with_scaling"> + <__TAG__ class="view_box_subset_with_scaling"></__TAG__> +</div> + +<div class="container_view_box_superset"> + <__TAG__></__TAG__> +</div> +<div class="container_view_box_superset_with_position"> + <__TAG__ class="view_box_superset_with_position"></__TAG__> +</div> +<div class="container_view_box_superset_with_scaling"> + <__TAG__ class="view_box_superset_with_scaling"></__TAG__> +</div> + +<div class="container_view_box_intersection"> + <__TAG__ class="view_box_intersection"></__TAG__> +</div> + +<div class="container_view_box_no_intersection"> +</div> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-template.html new file mode 100644 index 0000000000..ee2d83e8f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-fill-template.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:fill</title> +<script src="support/testHelper.js"></script> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-fill-__NAME__-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +/* The test uses clip-path to avoid comparing edges with minor pixel differences + due to differences in scaling on highdpi devices */ + +.view_box_subset { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_subset_with_position { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + object-position: 10px 10px; + background-color: grey; +} + +.view_box_subset_with_scaling { + object-view-box: inset(50px 0px 0px 0px); + object-fit: fill; + margin: 5px; + width: 50px; + height: 100px; + + /* The top row of pixels can have minor differences due to difference in order + of clipping and scaling operations */ + clip-path: inset(1px 0px 0px 0px); +} + +.view_box_superset { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} + +.view_box_superset_with_position { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + object-position: 10px 10px; +} + +.view_box_superset_with_scaling { + object-view-box: inset(0px -50px 0px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + width: 50px; + height: 50px; +} + +.view_box_intersection { + object-view-box: inset(-50px 25px 50px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; + clip-path: inset(0px 0px 1px 0px); +} + +.view_box_no_intersection { + object-view-box: inset(-50px 25px 100px 0px); + object-fit: fill; + margin: 5px; + background-color: grey; +} +</style> +<__TAG__ class="view_box_subset"></__TAG__> +<__TAG__ class="view_box_subset_with_position"></__TAG__> +<__TAG__ class="view_box_subset_with_scaling"></__TAG__> + +<__TAG__ class="view_box_superset"></__TAG__> +<__TAG__ class="view_box_superset_with_position"></__TAG__> +<__TAG__ class="view_box_superset_with_scaling"></__TAG__> + +<__TAG__ class="view_box_intersection"></__TAG__> + +<__TAG__ class="view_box_no_intersection"></__TAG__> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-ref-template.html new file mode 100644 index 0000000000..861d9230a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-ref-template.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<title>CSS object-view-box with object-fit:none (ref)</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +div { + margin: 5px; +} + +video { + object-fit: fill; +} + +.container_view_box_subset { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset { + position: relative; + top: -25px; +} + +.container_view_box_subset_with_position { + width: 50px; + height: 100px; + overflow: hidden; + display: inline-block; + background-color: grey; +} +.view_box_subset_with_position { + position: relative; + top: -40px; + left: 10px; +} +</style> +<div class="container_view_box_subset"> + <__TAG__ class="view_box_subset"></__TAG__> +</div> +<div class="container_view_box_subset_with_position"> + <__TAG__ class="view_box_subset_with_position"></__TAG__> +</div> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-template.html new file mode 100644 index 0000000000..ab0c083d21 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-fit-none-template.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with object-fit:none</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-fit-none-__NAME__-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +.view_box_subset { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; +} + +.view_box_subset_with_position { + width: 50px; + height: 100px; + object-view-box: inset(50px 0px 0px 0px); + object-fit: none; + background-color: grey; + margin: 5px; + object-position: 10px 10px; +} +</style> +</body> +<__TAG__ class="view_box_subset"></__TAG__> +<__TAG__ class="view_box_subset_with_position"></__TAG__> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-ref-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-ref-template.html new file mode 100644 index 0000000000..764ba985fd --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-ref-template.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode : ref</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.container_view_box_subset { + width: 50px; + height: 75px; + overflow: hidden; + display: inline-block; +} +.view_box_subset { + position: relative; + top: -25px; +} +</style> +<div class="container_view_box_subset"> + <__TAG__ class="view_box_subset"></__TAG__> +</div> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-template.html b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-template.html new file mode 100644 index 0000000000..a8c1189a96 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/object-view-box-writing-mode-template.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<title>CSS object-view-box with vertical writing mode</title> +<link rel="author" href="mailto:khushalsagar@chromium.org"> +<link rel="match" href="object-view-box-writing-mode-__NAME__-ref.html"> +<script src="support/testHelper.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> + +<body> +<style> +html { + writing-mode: vertical-lr; +} +.view_box_subset { + object-view-box: inset(25px 0px 0px 0px); + object-fit: fill; + background-color: black; +} +</style> +<__TAG__ class="view_box_subset"></__TAG__> +</body> +<script> + populateElements("__IMAGE_SOURCE__"); +</script> diff --git a/testing/web-platform/tests/css/css-images/tools/template-object-fit-ref.html b/testing/web-platform/tests/css/css-images/tools/template-object-fit-ref.html new file mode 100644 index 0000000000..068c74b4e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/template-object-fit-ref.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + .objectOuter { + border: 1px dashed gray; + padding: 1px; + float: left; + } + .objectOuter > * { + background-image: url("REPLACEME_IMAGE_FILENAME"); + background-size: REPLACEME_BACKGROUND_SIZE_VAL; + background-repeat: no-repeat; + image-rendering: crisp-edges; + } + REPLACEME_SCALE_DOWN_EXTRA_RULE + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { background-position: top right } + .bl { background-position: bottom left } + .tl { background-position: top 25% left 25% } + .br { background-position: bottom 1px right 2px } + + .tc { background-position: top 3px center } + .cr { background-position: center right 25% } + .default { background-position: 50% 50% } + </style> + </head> + <body> + <!-- big/wide: --> + <div class="objectOuter"><div class="bigWide tr"></div></div> + <div class="objectOuter"><div class="bigWide bl"></div></div> + <div class="objectOuter"><div class="bigWide tl"></div></div> + <div class="objectOuter"><div class="bigWide br"></div></div> + <div class="objectOuter"><div class="bigWide tc"></div></div> + <div class="objectOuter"><div class="bigWide cr"></div></div> + <div class="objectOuter"><div class="bigWide default"></div></div> + <br> + <!-- big/tall: --> + <div class="objectOuter"><div class="bigTall tr"></div></div> + <div class="objectOuter"><div class="bigTall bl"></div></div> + <div class="objectOuter"><div class="bigTall tl"></div></div> + <div class="objectOuter"><div class="bigTall br"></div></div> + <div class="objectOuter"><div class="bigTall tc"></div></div> + <div class="objectOuter"><div class="bigTall cr"></div></div> + <div class="objectOuter"><div class="bigTall default"></div></div> + <br> + <!-- small: --> + <div class="objectOuter"><div class="small tr"></div></div> + <div class="objectOuter"><div class="small bl"></div></div> + <div class="objectOuter"><div class="small tl"></div></div> + <div class="objectOuter"><div class="small br"></div></div> + <div class="objectOuter"><div class="small tc"></div></div> + <div class="objectOuter"><div class="small cr"></div></div> + <div class="objectOuter"><div class="small default"></div></div> + <br> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/tools/template-object-fit-test.html b/testing/web-platform/tests/css/css-images/tools/template-object-fit-test.html new file mode 100644 index 0000000000..8ec4664db9 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/template-object-fit-test.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: REPLACEME_TEST_TITLE</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit"> + <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position"> + <link rel="match" href="REPLACEME_REFERENCE_FILENAME"> + <style type="text/css"> + REPLACEME_CONTAINER_TAG { + border: 1px dashed gray; + padding: 1px; + object-fit: REPLACEME_OBJECT_FIT_VAL; + image-rendering: crisp-edges; + float: left; + } + + .bigWide { + width: 48px; + height: 32px; + } + .bigTall { + width: 32px; + height: 48px; + } + .small { + width: 8px; + height: 8px; + } + + br { clear: both; } + + .tr { object-position: top right } + .bl { object-position: bottom left } + .tl { object-position: top 25% left 25% } + .br { object-position: bottom 1px right 2px } + + .tc { object-position: top 3px left 50% } + .cr { object-position: top 50% right 25% } + </style> + </head> + <body> + <!-- big/wide: --> + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide bl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide br">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tc">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide cr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide">REPLACEME_CONTAINER_CLOSETAG + <br> + <!-- big/tall: --> + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall bl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall br">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tc">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall cr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall">REPLACEME_CONTAINER_CLOSETAG + <br> + <!-- small: --> + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small bl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tl">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small br">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tc">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small cr">REPLACEME_CONTAINER_CLOSETAG + <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small">REPLACEME_CONTAINER_CLOSETAG + <br> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/tools/template-object-position-ref.html b/testing/web-platform/tests/css/css-images/tools/template-object-position-ref.html new file mode 100644 index 0000000000..19661f41f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/template-object-position-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style type="text/css"> + div { + background: lightgray; + margin-right: 2px; + background-image: url("REPLACEME_IMAGE_FILENAME"); + background-size: contain; + background-repeat: no-repeat; + float: left; + width: 20px; + height: 20px; + } + + .op_x-7 { background-position: -7% 50% } + .op_x13 { background-position: 13% 50% } + .op_x23 { background-position: 23% 50% } + .op_x50 { background-position: 50% 50% } + .op_x75 { background-position: 75% 50% } + .op_x88 { background-position: 88% 50% } + .op_x111 { background-position: 111% 50% } + .op_y-7 { background-position: 50% -7% } + .op_y13 { background-position: 50% 13% } + .op_y23 { background-position: 50% 23% } + .op_y50 { background-position: 50% 50% } + .op_y75 { background-position: 50% 75% } + .op_y88 { background-position: 50% 88% } + .op_y111 { background-position: 50% 111% } + + </style> + </head> + <body> + <div class="op_x-7"></div> + <div class="op_x13"></div> + <div class="op_x23"></div> + <div class="op_x50"></div> + <div class="op_x75"></div> + <div class="op_x88"></div> + <div class="op_x111"></div> + <div class="op_y-7"></div> + <div class="op_y13"></div> + <div class="op_y23"></div> + <div class="op_y50"></div> + <div class="op_y75"></div> + <div class="op_y88"></div> + <div class="op_y111"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/tools/template-object-position-test.html b/testing/web-platform/tests/css/css-images/tools/template-object-position-test.html new file mode 100644 index 0000000000..fb4b3ad3c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/tools/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> |