first-letter-background.html (3451B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Largest Contentful Paint: observe element with background image in its first letter</title> 4 <body> 5 <style> 6 div::first-letter { 7 background-image: url('/images/black-rectangle.png'); 8 } 9 div { 10 font-size: 12px; 11 } 12 </style> 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <script src="resources/largest-contentful-paint-helpers.js"></script> 16 <script> 17 setup({"hide_test_state": true}); 18 async_test(function (t) { 19 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 20 let beforeLoad = performance.now(); 21 let observedFirstLetter = false; 22 const observer = new PerformanceObserver( 23 t.step_func(function(entryList) { 24 const entry = entryList.getEntries()[entryList.getEntries().length -1]; 25 if (!observedFirstLetter) { 26 // When we haven't observed first-letter as LCP... 27 // If we happen to get a text entry due to text happening before the image, return. 28 if (entry.url === '') { 29 assert_equals(entry.entryType, 'largest-contentful-paint'); 30 assert_greater_than_equal(entry.renderTime, beforeLoad); 31 assert_greater_than_equal(performance.now(), entry.renderTime); 32 assert_approx_equals(entry.startTime, entry.renderTime, 0.001, 33 'startTime should be equal to renderTime to the precision of 1 millisecond.'); 34 assert_equals(entry.duration, 0); 35 assert_equals(entry.loadTime, 0); 36 assert_equals(entry.id, 'target'); 37 assert_equals(entry.element, document.getElementById('target')); 38 } else { 39 const url = window.location.origin + '/images/black-rectangle.png'; 40 checkImage(entry, url, 'target', 0, beforeLoad, ['sizeLowerBound']); 41 } 42 43 // Now change the div content to proceed to the second part of the test. 44 beforeLoad = performance.now(); 45 const div = document.createElement('div'); 46 div.id = 'target2'; 47 div.innerHTML = 'long text will now be LCP'; 48 document.body.appendChild(div); 49 observedFirstLetter = true; 50 } else { 51 // Ignore entries that are caused by the initial 'target'. 52 if (entry.id === 'target') 53 return; 54 // The LCP must now be text. 55 if (entry.url !== '') 56 assert_unreached('First-letter background should not be LCP!'); 57 58 assert_equals(entry.entryType, 'largest-contentful-paint'); 59 assert_greater_than_equal(entry.renderTime, beforeLoad, 'blaaa'); 60 assert_greater_than_equal(performance.now(), entry.renderTime, 'bleee'); 61 assert_approx_equals(entry.startTime, entry.renderTime, 0.001, 62 'startTime should be equal to renderTime to the precision of 1 millisecond.'); 63 assert_equals(entry.duration, 0); 64 assert_equals(entry.id, 'target2'); 65 const div = document.getElementById('target2'); 66 // Estimate the text size: 12 * 100 67 assert_greater_than_equal(entry.size, 1200); 68 assert_equals(entry.loadTime, 0); 69 assert_equals(entry.element, div); 70 t.done(); 71 } 72 })); 73 observer.observe({entryTypes: ['largest-contentful-paint']}); 74 }, 'Largest Contentful Paint: first-letter is observable.'); 75 </script> 76 <div id='target'>A</div> 77 </body>