| <!doctype html> |
| <meta charset=utf-8> |
| <title>Largest Contentful Paint: observe element with css generated image</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="resources/largest-contentful-paint-helpers.js"></script> |
| <style> |
| #target { |
| content: url('/images/lcp-256x256.png'); |
| } |
| </style> |
| <body> |
| <script> |
| setup({"hide_test_state": true}); |
| async_test(function (t) { |
| assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); |
| |
| const beforeLoad = performance.now(); |
| |
| const observer = new PerformanceObserver( |
| t.step_func_done(function(entryList) { |
| const entries = entryList.getEntries(); |
| assert_equals(entries.length, 1); |
| const url = window.location.origin + '/images/lcp-256x256.png'; |
| checkImage(entries[0], url, 'target', 65536, beforeLoad); |
| })); |
| observer.observe({entryTypes: ['largest-contentful-paint']}); |
| }, 'Largest Contentful Paint: CSS generated image is observable.'); |
| </script> |
| <div id="target"></div> |
| </body> |
