background-image-set-image.html (1293B)
1 <!doctype html> 2 <title>Background image-set images should be LCP candidates</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 .background { 7 width: calc(100vw - 40px); 8 height: calc(100vw - 40px); 9 max-width: 100px; 10 max-height: 100px; 11 background: #eee image-set("/images/lcp-100x50.png" type("image/png")) center center no-repeat; 12 background-size: cover; 13 } 14 </style> 15 <body> 16 <div class="background"></div> 17 <p>fallback</p> 18 </body> 19 20 <script> 21 promise_test(async (t) => { 22 await Promise.race([ 23 new Promise((resolve) => { 24 const entries = []; 25 new PerformanceObserver((list) => { 26 entries.push(...list.getEntries()); 27 for (const entry of entries) { 28 if (entry.url.includes("lcp-100x50")) { 29 resolve(entry.url); 30 return; 31 } 32 } 33 }).observe({ type: "largest-contentful-paint", buffered: true }); 34 }), 35 new Promise((resolve, reject) => { 36 t.step_timeout(() => { 37 reject(new Error("Timed out waiting for LCP entry for background image-set image.")); 38 }, 3000); 39 }), 40 ]); 41 }, "Background image-set images should be eligible for LCP candidates"); 42 </script>