first-contentful-bg-image.html (1533B)
1 <!DOCTYPE html> 2 <head> 3 <title>Performance Paint Timing Test: FCP due to background image</title> 4 </head> 5 <body> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="main"></div> 9 </body> 10 11 <footer> 12 <script> 13 setup({"hide_test_state": true}); 14 async_test(function (t) { 15 assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); 16 const body = document.getElementsByTagName('body')[0]; 17 body.style.backgroundImage = 'url(../resources/circles.png)'; 18 window.onload = function() { 19 function testPaintEntries() { 20 const bufferedEntries = performance.getEntriesByType('paint'); 21 if (bufferedEntries.length < 2) { 22 t.step_timeout(function() { 23 testPaintEntries(); 24 }, 20); 25 return; 26 } 27 t.step(function() { 28 assert_equals(bufferedEntries.length, 2, "There should be two paint timing instances."); 29 assert_equals(bufferedEntries[0].entryType, "paint"); 30 assert_equals(bufferedEntries[0].name, "first-paint"); 31 assert_equals(bufferedEntries[1].entryType, "paint"); 32 assert_equals(bufferedEntries[1].name, "first-contentful-paint"); 33 t.done(); 34 }); 35 } 36 t.step(function() { 37 testPaintEntries(); 38 }); 39 }; 40 }, "First contentful paint fires due to background image render."); 41 </script> 42 <footer> 43 </html>