| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script src="./resources/paint-api-utils.js"></script> |
| </head> |
| <body> |
| <script> |
| description("Ensure PerformanceObservers are notified once for first-contentful-paint."); |
| window.jsTestIsAsync = true; |
| |
| (async () => { |
| window.didReceiveFirstContentfulPaint = false; |
| window.startTime = performance.now(); |
| await waitForFCP(); |
| await new Promise(resolve => { |
| const observer = new PerformanceObserver(entryList => { |
| window.entryList = entryList; |
| shouldBe('entryList.getEntries().length', "1"); |
| shouldBe('entryList.getEntriesByName("first-contentful-paint").length', 1); |
| shouldBe('entryList.getEntriesByType("paint").length', "1"); |
| window.fcpEntry = entryList.getEntries()[0]; |
| shouldBeFalse('didReceiveFirstContentfulPaint'); |
| shouldBe('fcpEntry.name', '"first-contentful-paint"'); |
| shouldBe('fcpEntry.entryType', '"paint"'); |
| shouldBeTrue('fcpEntry.startTime > window.startTime'); |
| shouldBeTrue('fcpEntry.startTime < performance.now()'); |
| shouldBe('fcpEntry.duration', "0"); |
| didReceiveFirstContentfulPaint = true; |
| resolve(); |
| }); |
| |
| observer.observe({entryTypes: ['paint']}); |
| document.body.innerText = 'TEXT'; |
| }) |
| document.body.innerText = 'TEXT2'; |
| await waitForFCP(); |
| shouldBeTrue('didReceiveFirstContentfulPaint'); |
| shouldBe('performance.getEntries().length', "2"); |
| shouldBe('performance.getEntriesByName("first-contentful-paint").length', "1"); |
| shouldBe('performance.getEntriesByName("first-contentful-paint", "paint").length', "1"); |
| shouldBe('performance.getEntriesByType("paint").length', "1"); |
| testPassed("PerformanceObserver first-contentful-paint callback wasn't fired again "); |
| finishJSTest(); |
| })(); |
| |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
