image-src-change.html (3284B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-vendor.js"></script> 7 <script src="/soft-navigation-heuristics/resources/soft-navigation-test-helper.js"></script> 8 9 <button id="navigateButton">Click here!</button> 10 <img id="testImage" height="256" width="256" src="/images/lcp-256x256.png" elementtiming="test-image"></img> 11 12 <script> 13 async function waitForImageRender() { 14 let entries = await new Promise(resolve => { 15 new PerformanceObserver((list, observer) => { 16 resolve(list.getEntries()); 17 observer.disconnect(); 18 }).observe({type: 'element', buffered: true}); 19 }); 20 assert_equals( 21 entries.length, 1, 'Expected exactly one ElementTiming entry'); 22 assert_equals( 23 entries[0].identifier, 'test-image', 'Unexpected ElementTiming entry.'); 24 } 25 26 async function runTest(t, url, newImageSrc) { 27 navigateButton.addEventListener("click", () => { 28 history.pushState({}, '', url); 29 testImage.src = newImageSrc; 30 }, {once: true}); 31 32 const softNavPromise = 33 SoftNavigationTestHelper.getPerformanceEntries("soft-navigation"); 34 35 if (test_driver) { 36 test_driver.click(navigateButton); 37 } 38 39 const helper = new SoftNavigationTestHelper(t); 40 const entries = await helper.withTimeoutMessage( 41 softNavPromise, "Soft navigation entry never arrived.", 3000); 42 assert_equals(entries.length, 1, 'Expected exactly one soft navigation.'); 43 assert_true( 44 entries[0].name.endsWith(url), 45 'Unexpected Soft Navigation URL.'); 46 } 47 48 // Wait for the image to initially load and make its way through the image 49 // timing pipeline before changing its source. 50 promise_setup(waitForImageRender); 51 52 promise_test(async t => { 53 const url = '/image-src-change-1'; 54 const src = 'soft-navigation-heuristics/resources/images/lcp-256x256-alt-1.png'; 55 return runTest(t, url, src); 56 }, 'Soft Navigation Detection supports HTMLImageElment.src'); 57 58 promise_test(async t => { 59 const url = '/image-src-change-2'; 60 const src = 'soft-navigation-heuristics/resources/images/lcp-256x256-alt-2.png'; 61 return runTest(t, url, src); 62 }, 'Soft Navigation Detection supports a multiple soft navigations setting HTMLImageElment.src'); 63 64 promise_test(async t => { 65 const url = '/image-src-change-3'; 66 // base64 encoded /images/lcp-16x16.png. 67 const src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAArElEQVR4AZTQgQaEQBCA4b9pturiHPcu9/4PdMCp2trJybKwbMVi8Jn9TcXHeAdegWFn2HgE+o0+4Ix2O+ba6Na28V53Oi+3NI2XWxo1Lej2+QOiRgw13KKF3UDaHTW1yXmJWNI0i5zrzieNm7WgU8nxjmEWCXKlJOn9+CHqdkUt3x1LkkYnibsvatwkeXdB40bJuwuaatX8gukmucZ9NS8paOpR8pKCRv97DgBllRV8uazI0wAAAABJRU5ErkJggg=='; 68 return runTest(t, url, src); 69 }, 'Soft Navigation Detection supports a setting HTMLImageElment.src to a data URI'); 70 71 promise_test(async t => { 72 const url = '/image-src-change-1'; 73 const src = 'soft-navigation-heuristics/resources/images/lcp-256x256-alt-1.png'; 74 return runTest(t, url, src); 75 }, 'Soft Navigation Detection supports a setting HTMLImageElment.src to a previous value'); 76 </script>