first-contentful-paint.html (2927B)
1 <!DOCTYPE html> 2 <head> 3 <title>Performance Paint Timing Test: FP followed by FCP</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 <div id="image"></div> 10 11 <script> 12 setup({"hide_test_state": true}); 13 async_test(function (t) { 14 assert_implements(window.PerformancePaintTiming, "Paint Timing isn't supported."); 15 const bufferedEntries = performance.getEntriesByType('paint'); 16 assert_equals(bufferedEntries.length, 0, "No paint entries yet"); 17 const div = document.createElement("div"); 18 div.style.width = "100px"; 19 div.style.height = "100px"; 20 div.style.backgroundColor = "red"; 21 div.style.color = "blue"; 22 document.getElementById("main").appendChild(div); 23 function testPaintEntries() { 24 const bufferedEntries = performance.getEntriesByType('paint'); 25 if (bufferedEntries.length < 1) { 26 t.step_timeout(function() { 27 testPaintEntries(); 28 }, 20); 29 return; 30 } 31 t.step(function() { 32 assert_equals(bufferedEntries.length, 1, "FP only."); 33 assert_equals(bufferedEntries[0].entryType, "paint"); 34 assert_equals(bufferedEntries[0].name, "first-paint"); 35 }); 36 const img = document.createElement("IMG"); 37 img.src = "../resources/circles.png"; 38 img.onload = function() { 39 function secondTestPaintEntries() { 40 const moreBufferedEntries = performance.getEntriesByType('paint'); 41 if (moreBufferedEntries.length < 2) { 42 t.step_timeout(function() { 43 secondTestPaintEntries(); 44 }, 20); 45 return; 46 } 47 t.step(function() { 48 assert_equals(moreBufferedEntries.length, 2, "FP and FCP."); 49 assert_equals(moreBufferedEntries[0].entryType, "paint"); 50 assert_equals(moreBufferedEntries[0].name, "first-paint"); 51 const fpEntriesGotByName = 52 performance.getEntriesByName('first-paint'); 53 assert_equals(fpEntriesGotByName.length, 1); 54 assert_equals(moreBufferedEntries[0], fpEntriesGotByName[0]); 55 assert_equals(moreBufferedEntries[1].entryType, "paint"); 56 assert_equals(moreBufferedEntries[1].name, "first-contentful-paint"); 57 const fcpEntriesGotByName = 58 performance.getEntriesByName('first-contentful-paint'); 59 assert_equals(fcpEntriesGotByName.length, 1); 60 assert_equals(moreBufferedEntries[1], fcpEntriesGotByName[0]); 61 t.done(); 62 }); 63 } 64 t.step(function() { 65 secondTestPaintEntries(); 66 }); 67 }; 68 document.getElementById('image').appendChild(img); 69 } 70 t.step(function() { 71 testPaintEntries(); 72 }); 73 }, "First Paint triggered by non-contentful paint. Image load triggers First Contentful Paint."); 74 </script> 75 </body> 76 </html>