text-with-display-style.html (3232B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Largest Contentful Paint: observe text with display style.</title> 4 <body> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #title { 9 display: flex; 10 } 11 </style> 12 <h1 id='title'>I am a title!</h1> 13 <script> 14 async_test(function (t) { 15 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 16 let beforeRender; 17 /* In this test, we first observe a header with style 'display: flex'. 18 * Once observed, we remove it and add a header with style 'display: grid'. 19 * And once that is observed, we remove it and add a header with style 'display: block'. 20 * At each step, we check the values of the entries received. 21 */ 22 let observedFlex = false; 23 let observedGrid = false; 24 const observer = new PerformanceObserver( 25 t.step_func(function(entryList) { 26 assert_equals(entryList.getEntries().length, 1); 27 const entry = entryList.getEntries()[0]; 28 assert_equals(entry.entryType, 'largest-contentful-paint'); 29 assert_greater_than_equal(entry.renderTime, beforeRender); 30 assert_greater_than_equal(performance.now(), entry.renderTime); 31 assert_approx_equals(entry.startTime, entry.renderTime, 0.001, 32 'startTime should be equal to renderTime to the precision of 1 millisecond.'); 33 assert_equals(entry.duration, 0); 34 // TODO: find a good way to bound text size. 35 assert_greater_than_equal(entry.size, 500); 36 assert_equals(entry.url, ''); 37 assert_equals(entry.loadTime, 0); 38 if (!observedFlex) { 39 observedFlex = true; 40 assert_equals(entry.id, 'title'); 41 const title = document.getElementById('title'); 42 assert_equals(entry.element, title); 43 // Remove 'display: flex' and add 'display: grid' text. 44 title.parentNode.removeChild(title); 45 const title2 = document.createElement('h1'); 46 title2.id = 'title2'; 47 title2.style = 'display: grid'; 48 title2.innerHTML = 'I am a second title!'; 49 document.body.appendChild(title2); 50 beforeRender = performance.now(); 51 } else if (!observedGrid) { 52 observedGrid = true; 53 assert_equals(entry.id, 'title2'); 54 const title2 = document.getElementById('title2'); 55 assert_equals(entry.element, title2); 56 // Remove 'display: grid' and add 'display: block' text. 57 title2.parentNode.removeChild(title2); 58 const title3 = document.createElement('h1'); 59 title3.id = 'title3'; 60 title3.style = 'display: block'; 61 title3.innerHTML = 'I am the third and last title!'; 62 document.body.appendChild(title3); 63 beforeRender = performance.now(); 64 } else { 65 assert_equals(entry.id, 'title3'); 66 const title3 = document.getElementById('title3'); 67 assert_equals(entry.element, title3); 68 t.done(); 69 } 70 }) 71 ); 72 observer.observe({type: 'largest-contentful-paint', buffered: true}); 73 beforeRender = performance.now(); 74 }, 'Text with display style is observable.'); 75 </script> 76 </body>