Add m-esr52 at 52.6.0

17 files changed, 828 insertions, 0 deletions

diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg
new file mode 100644
index 000000000..db715d875
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-noSize.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has an aspect-ratio (from its viewBox attribute),
+     but no intrinsic size.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 16 8">
+  <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+  <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+  <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+  <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg
new file mode 100644
index 000000000..1b0bca073
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8-parDefault.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet).
+
+     If it's rendered via e.g. a square <img> element with 'object-fit: fill',
+     the SVG will receive the <img>'s full content-box to use as its viewport.
+     But, importantly, its viewBox-region should NOT be stretched/squashed to
+     fill this viewport; instead, the viewBox will scale *proportionally* until
+     it *just* fits inside the viewport (the <img>), without overflowing, and
+     it'll be centered inside the viewport in whichever dimension has extra
+     space available. (This is what "xMidYMid meet" requires.)
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="16" height="8" viewBox="0 0 16 8">
+  <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+  <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+  <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+  <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png
new file mode 100644
index 000000000..bd2384587
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.png
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg
new file mode 100644
index 000000000..08e365940
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-16x8.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file is meant to mimic colors-8x16.png as closely
+     as possible. In particular, this SVG has:
+      (1) an intrinsic size (from the 'width' & 'height' attributes)
+      (2) preserveAspectRatio="none", allowing it to stretch in the
+          same way that a raster image would.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
+     width="16" height="8" viewBox="0 0 16 8">
+  <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
+  <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
+  <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
+  <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-noSize.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-noSize.svg
new file mode 100644
index 000000000..e741537b9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-noSize.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has an aspect-ratio (from its viewBox attribute),
+     but no intrinsic size.
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 8 16">
+  <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+  <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+  <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+  <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg
new file mode 100644
index 000000000..ec8c59dcb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16-parDefault.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file has the default preserveAspectRatio (xMidyMid meet).
+
+     If it's rendered via e.g. a square <img> element with 'object-fit: fill',
+     the SVG will receive the <img>'s full content-box to use as its viewport.
+     But, importantly, its viewBox-region should NOT be stretched/squashed to
+     fill this viewport; instead, the viewBox will scale *proportionally* until
+     it *just* fits inside the viewport (the <img>), without overflowing, and
+     it'll be centered inside the viewport in whichever dimension has extra
+     space available. (This is what "xMidYMid meet" requires.)
+-->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="8" height="16" viewBox="0 0 8 16">
+  <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+  <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+  <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+  <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png
new file mode 100644
index 000000000..596fdb389
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.png
diff --git a/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg
new file mode 100644
index 000000000..c336e3af1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/colors-8x16.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- This SVG file is meant to mimic colors-8x16.png as closely
+     as possible. In particular, this SVG has:
+      (1) an intrinsic size (from the 'width' & 'height' attributes)
+      (2) preserveAspectRatio="none", allowing it to stretch in the
+          same way that a raster image would.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
+     width="8" height="16" viewBox="0 0 8 16">
+  <rect x="0" y="0" width="4px" height="8px" style="fill: blue"/>
+  <rect x="4" y="0" width="4px" height="8px" style="fill: black"/>
+  <rect x="0" y="8" width="4px" height="8px" style="fill: rgb(255,128,128)"/>
+  <rect x="4" y="8" width="4px" height="8px" style="fill: lime"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh
new file mode 100644
index 000000000..b66ea4726
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-and-position-canvas-tests.sh
@@ -0,0 +1,72 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# Script to generate <canvas src> reftest files for "object-fit" and
+# "object-position", from corresponding reftest files that use <object>.
+#
+# This script expects to be run from this working directory:
+#  mozilla-central/layout/reftests/w3c-css/submitted/images3
+
+# Array of image files that we'll use
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+canvasAttributeArr=('width="16" height="8"'   'width="8" height="16"')
+numImageFiles=${#imageFileArr[@]}
+
+
+for ((i = 0; i < $numImageFiles; i++)); do
+
+  imageFile=${imageFileArr[$i]}
+  canvasAttrs=${canvasAttributeArr[$i]}
+
+  # Loop across <object> tests:
+  # (We assume that tests that end with "001" use the first PNG image in
+  # $imageFileArr, and tests that end with "002" use the second PNG image.)
+  let testNum=$i+1
+  for origTestName in object-*-png-*00${testNum}o.html; do
+    # Find the corresponding reference case:
+    origReferenceName=$(echo $origTestName |
+                        sed "s/o.html/-ref.html/")
+
+    # Replace "o" suffix in filename with "c" (for "canvas")
+    canvasTestName=$(echo $origTestName |
+                     sed "s/o.html/c.html/")
+
+    # Generate testcase
+    # (converting <object data="..."> to <canvas width="..." height="...">
+    echo "Generating $canvasTestName from $origTestName."
+    hg cp $origTestName $canvasTestName
+
+    # Do string-replacements in testcase to convert it to test canvas:
+    # Adjust html & body nodes:
+    sed -i "s|<html>|<html class=\"reftest-wait\">|" $canvasTestName
+    sed -i "s|<body>|<body onload=\"drawImageToCanvases('$imageFile')\">|" $canvasTestName
+    # Adjust <title>:
+    sed -i "s|object element|canvas element|g" $canvasTestName
+    # Tweak the actual tags (open & close tags, and CSS rule):
+    sed -i "s|object {|canvas {|" $canvasTestName
+    sed -i "s|<object|<canvas|" $canvasTestName
+    sed -i "s|</object>|</canvas>|" $canvasTestName
+    # Drop "data" attr (pointing to image URI) and replace with
+    # width/height attrs to establish the canvas's intrinsic size:
+    sed -i "s|data=\"$imageFile\"|$canvasAttrs|" $canvasTestName
+
+    # Add a <script> block to draw an image into each canvas:
+    sed -i "/<\/style>/a \\
+    <script>\n\
+      function drawImageToCanvases(imageURI) {\n\
+        var image = new Image();\n\
+        image.onload = function() {\n\
+          var canvasElems = document.getElementsByTagName(\"canvas\");\n\
+          for (var i = 0; i < canvasElems.length; i++) {\n\
+            var ctx = canvasElems[i].getContext(\"2d\");\n\
+            ctx.drawImage(image, 0, 0);\n\
+          }\n\
+          document.documentElement.removeAttribute(\"class\");\n\
+        }\n\
+        image.src = imageURI;\n\
+      }\n\
+    <\/script>" $canvasTestName
+  done
+done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh
new file mode 100644
index 000000000..476977c89
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh
@@ -0,0 +1,109 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position", using a template testcase
+# file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+# (One exception: since there is no "background-size" equivalent of
+# "object-fit: scale-down", we add an extra CSS rule for the "scale-down"
+# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html
+
+imageFileFormat="png"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of "object-fit" values, & of corresponding "background-size" values.
+# (Note: background-size has no equivalent for "object-fit: scale-down". We use
+# "auto auto" here, which is equivalent *some* of the time; and for the cases
+# where it's *not* equivalent, we use an extra CSS rule in the reference case.
+# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+objectFitArr=(           "fill"      "contain" "cover" "none"      "scale-down" )
+backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto"  )
+numObjectFitVals=${#objectFitArr[@]}
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+# FIRST: Add 'default-preferences' line to the top of our reftest manifest:
+echo "default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
+# Tests for 'object-fit' / 'object-position' with a PNG image" \
+ >> $REFTEST_LIST_FILE
+
+for ((i = 0; i < $numObjectFitVals; i++)); do
+  objectFit=${objectFitArr[$i]}
+  backgroundSizeEquiv=${backgroundSizeEquivArr[$i]}
+
+  # The reference case for "scale-down" needs an additional style rule, to
+  # look like "object-fit: scale-down" on small objects. (This is necessary
+  # because "background-size" doesn't have a value that exactly maps to
+  # "object-fit: scale-down".)
+  if [[ $objectFit == "scale-down" ]]; then
+      scaledownRule=".objectOuter > .small { background-size: contain; }"
+      scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/"
+  else
+      # (We're not testing "scale-down" in this generated file, so just delete
+      # the template's placeholder line for a "scale-down"-specific CSS rule.)
+      scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d"
+  fi
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \
+      | sed "$scaledownSedCmd" \
+      > $FILE_PATH/$filenameRef;
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="'object-fit: $objectFit' on $tagName element, with a PNG image and with various 'object-position' values"
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
+done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh
new file mode 100644
index 000000000..c4d51877e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh
@@ -0,0 +1,116 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position", using a template testcase
+# file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+# (One exception: since there is no "background-size" equivalent of
+# "object-fit: scale-down", we add an extra CSS rule for the "scale-down"
+# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html
+
+imageFileFormat="svg"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.svg"
+              "support/colors-8x16.svg"
+              "support/colors-16x8-noSize.svg"
+              "support/colors-8x16-noSize.svg"
+              "support/colors-16x8-parDefault.svg"
+              "support/colors-8x16-parDefault.svg")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of "object-fit" values, & of corresponding "background-size" values.
+# (Note: background-size has no equivalent for "object-fit: scale-down". We use
+# "auto auto" here, which is equivalent *some* of the time; and for the cases
+# where it's *not* equivalent, we use an extra CSS rule in the reference case.
+# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
+objectFitArr=(           "fill"      "contain" "cover" "none"      "scale-down" )
+backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto"  )
+numObjectFitVals=${#objectFitArr[@]}
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+# FIRST: Add blank line & descriptive comment to reftest manifest:
+echo "
+# Tests for 'object-fit' / 'object-position' with an SVG image" \
+ >> $REFTEST_LIST_FILE
+
+for ((i = 0; i < $numObjectFitVals; i++)); do
+  objectFit=${objectFitArr[$i]}
+  backgroundSizeEquiv=${backgroundSizeEquivArr[$i]}
+
+  # The reference case for "scale-down" needs an additional style rule, to
+  # look like "object-fit: scale-down" on small objects. (This is necessary
+  # because "background-size" doesn't have a value that exactly maps to
+  # "object-fit: scale-down".)
+  if [[ $objectFit == "scale-down" ]]; then
+      scaledownRule=".objectOuter > .small { background-size: contain; }"
+      scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/"
+  else
+      # (We're not testing "scale-down" in this generated file, so just delete
+      # the template's placeholder line for a "scale-down"-specific CSS rule.)
+      scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d"
+  fi
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \
+      | sed "$scaledownSedCmd" \
+      | sed "/image-rendering:/d" \
+      > $FILE_PATH/$filenameRef;
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="'object-fit: $objectFit' on $tagName element, with a SVG image and with various 'object-position' values"
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \
+        | sed "/image-rendering:/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
+done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh
new file mode 100644
index 000000000..4763fabf7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-png-tests.sh
@@ -0,0 +1,88 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position" (focusing on edge-case
+# object-position values that require pixel rounding), using a template
+# testcase file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html
+
+imageFileFormat="png"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of CSS classes to delete from the template, for a given image-file.
+# DETAILS: The template files contain some elements/styles that exercise
+# object-position x-values (op_x), and other elements/styles that exercise
+# object-position y-values (op_y). But actually, we'll only have extra space
+# for these percent values to resolve against in *one* dimension (since our
+# image-files are rectangular, and the container element is square, and we
+# scale the image up with "object-fit: contain"). So, we delete the
+# elements/styles in the dimension where object-position % values will just
+# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image).
+classPatternToDeleteArr=("op_x" "op_y")
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+
+    classPatternToDelete=${classPatternToDeleteArr[$j]}
+
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-position-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "/$classPatternToDelete/d" \
+      > $FILE_PATH/$filenameRef
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="various 'object-position' values on a fixed-size $tagName element, with a PNG image and 'object-fit:contain'."
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "/$classPatternToDelete/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh
new file mode 100644
index 000000000..e00385a47
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/generate-object-position-svg-tests.sh
@@ -0,0 +1,88 @@
+#!/bin/bash
+#
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+#
+# This is a script that I used to generate a suite of tests for the CSS
+# properties "object-fit" and "object-position" (focusing on edge-case
+# object-position values that require pixel rounding), using a template
+# testcase file and reference case file.
+#
+# The reference case uses the "background-size" & "background-position"
+# equivalent of the tested "object-fit" / "object-position" values.
+
+FILE_PATH="./"
+REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
+
+TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-position-test.html
+TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-position-ref.html
+
+imageFileFormat="svg"
+
+# Array of image files to use for testing:
+imageFileArr=("support/colors-16x8.svg" "support/colors-8x16.svg")
+numImageFiles=${#imageFileArr[@]}
+
+# Array of CSS classes to delete from the template, for a given image-file.
+# DETAILS: The template files contain some elements/styles that exercise
+# object-position x-values (op_x), and other elements/styles that exercise
+# object-position y-values (op_y). But actually, we'll only have extra space
+# for these percent values to resolve against in *one* dimension (since our
+# image-files are rectangular, and the container element is square, and we
+# scale the image up with "object-fit: contain"). So, we delete the
+# elements/styles in the dimension where object-position % values will just
+# resolve to 0 ("op_x" for the fat image, and "op_y" for the tall image).
+classPatternToDeleteArr=("op_x" "op_y")
+
+# Array of tag-names for elements that we'd like to test:
+# (Also: array of a single-letter abbreviation for each element, an array of
+# the close tag for each element -- if a close tag is needed -- and an array
+# indicating the attribute that each element uses to specify its image source.)
+tagNameArr=(       "embed" "img" "object"    "video" )
+tagLetterArr=(     "e"     "i"   "o"         "p" )
+tagCloseTokenArr=( ""      ""    "</object>" "</video>" )
+tagSrcAttrArr=(        "src"   "src" "data"      "poster" )
+numTags=${#tagNameArr[@]}
+
+  for ((j = 0; j < $numImageFiles; j++)); do
+    imageFile=${imageFileArr[$j]}
+
+    classPatternToDelete=${classPatternToDeleteArr[$j]}
+
+    let testNum=$j+1
+    testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
+
+    filenameStub="object-position-$imageFileFormat-$testNum"
+
+    # Generate a reference case:
+    filenameRef="$filenameStub-ref.html"
+    echo Generating ${filenameRef}.
+    cat $TEMPLATE_REFERENCE_FILENAME \
+      | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+      | sed "/$classPatternToDelete/d" \
+      > $FILE_PATH/$filenameRef
+
+    # Generate a test for each of our tags:
+    for ((k = 0; k < $numTags; k++)); do
+      tagName=${tagNameArr[$k]}
+      tagLetter=${tagLetterArr[$k]}
+      tagCloseToken=${tagCloseTokenArr[$k]}
+      tagSrcAttr=${tagSrcAttrArr[$k]}
+
+      filenameTest="$filenameStub$tagLetter.html"
+      testTitle="various 'object-position' values on a fixed-size $tagName element, with a SVG image and 'object-fit:contain'."
+      echo Generating ${filenameTest}.
+      cat $TEMPLATE_TESTCASE_FILENAME \
+        | sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
+        | sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
+        | sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
+        | sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
+        | sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken,"  \
+        | sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
+        | sed "/$classPatternToDelete/d" \
+        > $FILE_PATH/$filenameTest
+
+      echo "== $filenameTest $filenameRef" \
+        >> $REFTEST_LIST_FILE
+    done
+  done
diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html
new file mode 100644
index 000000000..94caf1ecb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-ref.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      .objectOuter {
+        border: 1px dashed gray;
+        padding: 1px;
+        float: left;
+      }
+      .objectOuter > * {
+        background-image: url("REPLACEME_IMAGE_FILENAME");
+        background-size: REPLACEME_BACKGROUND_SIZE_VAL;
+        background-repeat: no-repeat;
+        image-rendering: -moz-crisp-edges;
+      }
+      REPLACEME_SCALE_DOWN_EXTRA_RULE
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { background-position: top right }
+      .bl { background-position: bottom left }
+      .tl { background-position: top 25% left 25% }
+      .br { background-position: bottom 1px right 2px }
+
+      .tc { background-position: top 3px center }
+      .cr { background-position: center right 25% }
+      .default { background-position: 50% 50% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <div class="objectOuter"><div class="bigWide tr"></div></div>
+    <div class="objectOuter"><div class="bigWide bl"></div></div>
+    <div class="objectOuter"><div class="bigWide tl"></div></div>
+    <div class="objectOuter"><div class="bigWide br"></div></div>
+    <div class="objectOuter"><div class="bigWide tc"></div></div>
+    <div class="objectOuter"><div class="bigWide cr"></div></div>
+    <div class="objectOuter"><div class="bigWide default"></div></div>
+    <br>
+    <!-- big/tall: -->
+    <div class="objectOuter"><div class="bigTall tr"></div></div>
+    <div class="objectOuter"><div class="bigTall bl"></div></div>
+    <div class="objectOuter"><div class="bigTall tl"></div></div>
+    <div class="objectOuter"><div class="bigTall br"></div></div>
+    <div class="objectOuter"><div class="bigTall tc"></div></div>
+    <div class="objectOuter"><div class="bigTall cr"></div></div>
+    <div class="objectOuter"><div class="bigTall default"></div></div>
+    <br>
+    <!-- small: -->
+    <div class="objectOuter"><div class="small tr"></div></div>
+    <div class="objectOuter"><div class="small bl"></div></div>
+    <div class="objectOuter"><div class="small tl"></div></div>
+    <div class="objectOuter"><div class="small br"></div></div>
+    <div class="objectOuter"><div class="small tc"></div></div>
+    <div class="objectOuter"><div class="small cr"></div></div>
+    <div class="objectOuter"><div class="small default"></div></div>
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html
new file mode 100644
index 000000000..fe1518235
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-fit-test.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: REPLACEME_TEST_TITLE</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="REPLACEME_REFERENCE_FILENAME">
+    <style type="text/css">
+      REPLACEME_CONTAINER_TAG {
+        border: 1px dashed gray;
+        padding: 1px;
+        object-fit: REPLACEME_OBJECT_FIT_VAL;
+        image-rendering: -moz-crisp-edges;
+        float: left;
+      }
+
+      .bigWide {
+        width: 48px;
+        height: 32px;
+      }
+      .bigTall {
+        width: 32px;
+        height: 48px;
+      }
+      .small {
+        width: 8px;
+        height: 8px;
+      }
+
+      br { clear: both; }
+
+      .tr { object-position: top right }
+      .bl { object-position: bottom left }
+      .tl { object-position: top 25% left 25% }
+      .br { object-position: bottom 1px right 2px }
+
+      .tc { object-position: top 3px center }
+      .cr { object-position: center right 25% }
+    </style>
+  </head>
+  <body>
+    <!-- big/wide: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+    <!-- big/tall: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+    <!-- small: -->
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small bl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tl">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small br">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tc">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small cr">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small">REPLACEME_CONTAINER_CLOSETAG
+    <br>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html
new file mode 100644
index 000000000..19661f41f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <style type="text/css">
+      div {
+        background: lightgray;
+        margin-right: 2px;
+        background-image: url("REPLACEME_IMAGE_FILENAME");
+        background-size: contain;
+        background-repeat: no-repeat;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { background-position:  -7% 50% }
+      .op_x13  { background-position:  13% 50% }
+      .op_x23  { background-position:  23% 50% }
+      .op_x50  { background-position:  50% 50% }
+      .op_x75  { background-position:  75% 50% }
+      .op_x88  { background-position:  88% 50% }
+      .op_x111 { background-position: 111% 50% }
+      .op_y-7  { background-position: 50%  -7% }
+      .op_y13  { background-position: 50%  13% }
+      .op_y23  { background-position: 50%  23% }
+      .op_y50  { background-position: 50%  50% }
+      .op_y75  { background-position: 50%  75% }
+      .op_y88  { background-position: 50%  88% }
+      .op_y111 { background-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <div class="op_x-7"></div>
+    <div class="op_x13"></div>
+    <div class="op_x23"></div>
+    <div class="op_x50"></div>
+    <div class="op_x75"></div>
+    <div class="op_x88"></div>
+    <div class="op_x111"></div>
+    <div class="op_y-7"></div>
+    <div class="op_y13"></div>
+    <div class="op_y23"></div>
+    <div class="op_y50"></div>
+    <div class="op_y75"></div>
+    <div class="op_y88"></div>
+    <div class="op_y111"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html
new file mode 100644
index 000000000..fb4b3ad3c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/images3/support/template-object-position-test.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Test: REPLACEME_TEST_TITLE</title>
+    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
+    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
+    <link rel="match" href="REPLACEME_REFERENCE_FILENAME">
+    <style type="text/css">
+      REPLACEME_CONTAINER_TAG {
+        background: lightgray;
+        margin-right: 2px;
+        object-fit: contain;
+        float: left;
+        width: 20px;
+        height: 20px;
+      }
+
+      .op_x-7  { object-position: -7%  50% }
+      .op_x13  { object-position: 13%  50% }
+      .op_x23  { object-position: 23%  50% }
+      .op_x50  { object-position: 50%  50% }
+      .op_x75  { object-position: 75%  50% }
+      .op_x88  { object-position: 88%  50% }
+      .op_x111 { object-position: 111% 50% }
+      .op_y-7  { object-position: 50%  -7% }
+      .op_y13  { object-position: 50%  13% }
+      .op_y23  { object-position: 50%  23% }
+      .op_y50  { object-position: 50%  50% }
+      .op_y75  { object-position: 50%  75% }
+      .op_y88  { object-position: 50%  88% }
+      .op_y111 { object-position: 50% 111% }
+
+    </style>
+  </head>
+  <body>
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x-7">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x13">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x23">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x50">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x75">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x88">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_x111">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y-7">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y13">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y23">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y50">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y75">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y88">REPLACEME_CONTAINER_CLOSETAG
+    <REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="op_y111">REPLACEME_CONTAINER_CLOSETAG
+  </body>
+</html>