image-upscaling-empty-url.html (5457B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Largest Contentful Paint: Largest image is reported.</title> 4 <body> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="resources/largest-contentful-paint-helpers.js"></script> 10 <script src="/common/utils.js"></script> 11 <script> 12 setup({"hide_test_state": true}); 13 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint not implemented"); 14 const imageURL = `${window.location.origin}/images/blue.png`; 15 16 async function load_image_and_get_lcp_size(t, imageStyle = {}, containerStyle = {}) { 17 let popup; 18 await test_driver.bless('Open a popup', () => { 19 popup = window.open(); 20 t.add_cleanup(() => popup.close()); 21 }); 22 23 const image = popup.document.createElement('img'); 24 image.src = imageURL; 25 26 // We decode the image to get the natural size (though it's a constant) 27 await image.decode(); 28 const naturalSize = image.width * image.height; 29 const container = popup.document.createElement('div'); 30 container.appendChild(image); 31 32 const applyStyle = (el, style = {}) => 33 Object.entries(style).forEach(([k, v]) => el.style.setProperty(k, v)); 34 applyStyle(image, imageStyle); 35 applyStyle(container, containerStyle); 36 image.id = token(); 37 container.id = token(); 38 39 const entryReported = new Promise(resolve => 40 new popup.PerformanceObserver(entryList => { 41 entryList.getEntries().forEach(entry => { 42 if (entry.id === image.id || entry.id === container.id) { 43 resolve(entry.size); 44 } 45 }); 46 }).observe({ type: 'largest-contentful-paint', buffered: true }) 47 ); 48 49 popup.document.body.appendChild(container); 50 51 return { 52 lcpSize: await entryReported, 53 naturalSize 54 }; 55 } 56 57 /* We set the image to display: none when testing background, 58 so that only the background is reported 59 and not the image itself */ 60 const load_background_image_and_get_lcp_size = (t, style) => 61 load_image_and_get_lcp_size(t, { display: 'none' }, { 62 position: 'absolute', 63 'background-image': `url(${imageURL})`, 64 ...style, 65 }); 66 67 promise_test(async t => { 68 const { naturalSize, lcpSize } = await load_image_and_get_lcp_size(t); 69 assert_equals(lcpSize, naturalSize); 70 }, 'Non-scaled image should report the natural size'); 71 72 promise_test(async t => { 73 const { naturalSize, lcpSize } = await load_image_and_get_lcp_size(t, 74 { width: '50px', height: '50px' }); 75 assert_equals(lcpSize, 50 * 50); 76 }, 'A downscaled image (width/height) should report the displayed size'); 77 78 promise_test(async t => { 79 const { naturalSize, lcpSize } = await load_image_and_get_lcp_size(t, 80 { transform: 'scale(0.5)' }); 81 assert_approx_equals(Math.floor(lcpSize), Math.floor(naturalSize / 4), 2); 82 }, 'A downscaled image (using scale) should report the displayed size'); 83 84 promise_test(async t => { 85 const { naturalSize, lcpSize } = await load_image_and_get_lcp_size(t, 86 { width: '500px', height: '500px' }); 87 assert_equals(lcpSize, naturalSize); 88 }, 'An upscaled image (width/height) should report the natural size'); 89 90 /* TODO(crbug.com/1484431): 91 Need to dig deeper into this test, to verify the implementation of scale() 92 Currently unable to upscale image*/ 93 promise_test(async t => { 94 const { naturalSize, lcpSize } = await load_image_and_get_lcp_size(t, 95 { transform: 'scale(1.0)' }); 96 assert_equals(Math.floor(lcpSize), Math.floor(naturalSize)); 97 }, 'An upscaled image (using scale) should report the natural size'); 98 99 promise_test(async t => { 100 const { naturalSize, lcpSize } = await load_image_and_get_lcp_size(t, 101 { 'object-size': '300px 300px' }); 102 assert_equals(Math.floor(lcpSize), Math.floor(naturalSize)); 103 }, 'An upscaled image (using object-size) should report the natural size'); 104 105 promise_test(async t => { 106 const { naturalSize, lcpSize } = await load_image_and_get_lcp_size(t, 107 { 'object-position': '-100px 0' }); 108 assert_equals(lcpSize, 3498); 109 }, 'Intersecting element with partial-intersecting image to report image intersection'); 110 111 promise_test(async t => { 112 const { naturalSize, lcpSize } = await load_background_image_and_get_lcp_size(t, 113 { width: '50px', height: '50px' }); 114 assert_equals(lcpSize, 50 * 50); 115 }, 'A background image larger than the container should report the container size'); 116 117 promise_test(async t => { 118 const { naturalSize, lcpSize } = await load_background_image_and_get_lcp_size(t, 119 { width: '300px', height: '300px' }); 120 assert_equals(lcpSize, naturalSize); 121 }, 'A background image smaller than the container should report the natural size'); 122 123 promise_test(async t => { 124 const { naturalSize, lcpSize } = await load_background_image_and_get_lcp_size(t, 125 { 126 width: '300px', 127 height: '300px', 128 'background-size': '10px 10px', 129 'background-repeat': 'no-repeat' 130 }); 131 assert_equals(lcpSize, 100); 132 }, 'A scaled-down background image should report the background size'); 133 </script> 134 </body>