diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/largest-contentful-paint/image-upscaling.html | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/largest-contentful-paint/image-upscaling.html')
| -rw-r--r-- | testing/web-platform/tests/largest-contentful-paint/image-upscaling.html | 103 |
1 files changed, 103 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..a4f7d8079d --- /dev/null +++ b/testing/web-platform/tests/largest-contentful-paint/image-upscaling.html @@ -0,0 +1,103 @@ +<!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(() => + 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('about:blank'); + 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(); + const entryReported = new Promise(resolve => new popup.PerformanceObserver(entryList => { + entryList.getEntries().forEach(entry => { + if (entry.id === image.id) + resolve(entry.size); + }); + }).observe({type: 'largest-contentful-paint'})); + popup.document.body.appendChild(container); + const timeout = new Promise(resolve => t.step_timeout(() => resolve('not reported'), 1000)); + return {lcpSize: (await Promise.any([entryReported, timeout])), 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> |