observe-css-generated-image.html (1108B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Largest Contentful Paint: observe element with css generated image</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="resources/largest-contentful-paint-helpers.js"></script> 7 <style> 8 #target { 9 content: url('/images/lcp-256x256.png'); 10 } 11 </style> 12 <body> 13 <script> 14 setup({"hide_test_state": true}); 15 async_test(function (t) { 16 assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); 17 18 const beforeLoad = performance.now(); 19 20 const observer = new PerformanceObserver( 21 t.step_func_done(function(entryList) { 22 const entries = entryList.getEntries(); 23 assert_equals(entries.length, 1); 24 const url = window.location.origin + '/images/lcp-256x256.png'; 25 checkImage(entries[0], url, 'target', 65536, beforeLoad); 26 })); 27 observer.observe({entryTypes: ['largest-contentful-paint']}); 28 }, 'Largest Contentful Paint: CSS generated image is observable.'); 29 </script> 30 <div id="target"></div> 31 </body>