1 files changed, 107 insertions, 0 deletions
diff --git a/testing/web-platform/tests/largest-contentful-paint/image-upscaling.html b/testing/web-platform/tests/largest-contentful-paint/image-upscaling.html
new file mode 100644
index 0000000000..b3ce16f03f
--- /dev/null
+++ b/testing/web-platform/tests/largest-contentful-paint/image-upscaling.html
@@ -0,0 +1,107 @@
+<!DOCTYPE HTML>
+<meta charset=utf-8>
+<title>Largest Contentful Paint: largest image is reported.</title>
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/largest-contentful-paint-helpers.js"></script>
+<script src="/common/utils.js"></script>
+<script>
+    setup({"hide_test_state": true});
+    setup(() =>
+        assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"));
+
+    const imageURL = `${window.location.origin}/images/blue.png`;
+    async function load_image_and_get_lcp_size(t, imageStyle = {}, containerStyle = {}) {
+        const popup = window.open();
+        t.add_cleanup(() => popup.close());
+        const image = popup.document.createElement('img');
+        image.src = imageURL;
+
+        // We decode the image to get the natural size (though it's a constant)
+        await image.decode();
+        const naturalSize = image.width * image.height;
+
+        const container = popup.document.createElement('div');
+        container.appendChild(image);
+        const applyStyle = (el, style = {}) =>
+            Object.entries(style).forEach(([k, v]) => el.style.setProperty(k, v));
+
+        applyStyle(image, imageStyle);
+        applyStyle(container, containerStyle);
+        image.id = token();
+        container.id = token();
+        const entryReported = new Promise(resolve => new popup.PerformanceObserver(entryList => {
+            entryList.getEntries().forEach(entry => {
+                if (entry.id === image.id || entry.id === container.id)
+                    resolve(entry.size);
+            });
+        }).observe({type: 'largest-contentful-paint'}));
+        popup.document.body.appendChild(container);
+        return {
+            lcpSize: (await await_with_timeout(1000, 'not reported', entryReported)),
+            naturalSize
+        };
+    }
+
+    // We set the image to display: none when testing background, so that only the background is reported
+    // and not the image itself
+    const load_background_image_and_get_lcp_size = (t, style) =>
+        load_image_and_get_lcp_size(t, {display: 'none'},
+            {
+                position: 'absolute',
+                'background-image': `url(${imageURL})`,
+                ...style,
+            });
+
+    promise_test(async t => {
+        const {naturalSize, lcpSize} = await load_image_and_get_lcp_size(t);
+        assert_equals(lcpSize, naturalSize);
+    }, 'Non-scaled image should report the natural size');
+
+    promise_test(async t => {
+        const {naturalSize, lcpSize} = await load_image_and_get_lcp_size(t, {width: '50px', height: '50px'});
+        assert_equals(lcpSize, 50 * 50);
+    }, 'A downscaled image (width/height) should report the displayed size');
+
+    promise_test(async t => {
+        const {naturalSize, lcpSize} = await load_image_and_get_lcp_size(t, {transform: 'scale(0.5)'});
+        assert_equals(Math.floor(lcpSize), Math.floor(naturalSize / 4));
+    }, 'A downscaled image (using scale) should report the displayed size');
+
+    promise_test(async t => {
+        const {naturalSize, lcpSize} = await load_image_and_get_lcp_size(t, {width: '500px', height: '500px'});
+        assert_equals(lcpSize, naturalSize);
+    }, 'An upscaled image (width/height) should report the natural size');
+
+    promise_test(async t => {
+        const {naturalSize, lcpSize} = await load_image_and_get_lcp_size(t, {transform: 'scale(2)'});
+        assert_equals(Math.floor(lcpSize), Math.floor(naturalSize));
+    }, 'An upscaled image (using scale) should report the natural size');
+
+    promise_test(async t => {
+        const {naturalSize, lcpSize} = await load_image_and_get_lcp_size(t, {'object-size': '300px 300px'});
+        assert_equals(Math.floor(lcpSize), Math.floor(naturalSize));
+    }, 'An upscaled image (using object-size) should report the natural size');
+
+    promise_test(async t => {
+        const {naturalSize, lcpSize} = await load_image_and_get_lcp_size(t, {'object-position': '-100px 0'});
+        assert_equals(lcpSize, 3498);
+    }, 'An intersecting element with a partial-intersecting image (object-position) should report the image intersection');
+
+    promise_test(async t => {
+        const {naturalSize, lcpSize} = await load_background_image_and_get_lcp_size(t, {width: '50px', height: '50px'});
+        assert_equals(lcpSize, 50 * 50);
+    }, 'A background image larger than the container should report the container size');
+
+    promise_test(async t => {
+        const {naturalSize, lcpSize} = await load_background_image_and_get_lcp_size(t, {width: '300px', height: '300px'});
+        assert_equals(lcpSize, naturalSize);
+    }, 'A background image smaller than the container should report the natural size');
+
+    promise_test(async t => {
+        const {naturalSize, lcpSize} = await load_background_image_and_get_lcp_size(t, {width: '300px', height: '300px', 'background-size': '10px 10x'});
+        assert_equals(lcpSize, 100);
+    }, 'A scaled-down background image should report the background size');
+</script>
+</body>