first-letter-background.html (2273B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: observe element with background image in its first letter</title> 4 <body> 5 <style> 6 #target::first-letter { 7 background-image: url('/images/black-rectangle.png'); 8 } 9 #target { 10 font-size: 12px; 11 } 12 </style> 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <script src="resources/element-timing-helpers.js"></script> 16 <script> 17 let beforeRender = performance.now(); 18 async_test(function (t) { 19 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 20 const div = document.getElementById('target'); 21 let textObserved = false; 22 let imageObserved = false; 23 function calculateSize(entry) { 24 const ir = entry.intersectionRect; 25 return (ir.right - ir.left) * (ir.bottom - ir.top); 26 } 27 const observer = new PerformanceObserver( 28 t.step_func(function(entryList) { 29 entryList.getEntries().forEach(entry => { 30 if (entry.name === 'text-paint') { 31 checkTextElement(entry, 'my_div', 'target', beforeRender, div); 32 textObserved = true; 33 const size = calculateSize(entry); 34 // Assume average width is between 4px and 15px. 35 // Therefore, text size must be between 12 * (35*4) and 12 * (35*15). 36 assert_between_inclusive(size, 1680, 6300); 37 } 38 else { 39 assert_equals(entry.name, 'image-paint'); 40 const pathname = window.location.origin + '/images/black-rectangle.png'; 41 checkElement(entry, pathname, 'my_div', 'target', beforeRender, div); 42 checkNaturalSize(entry, 100, 50); 43 imageObserved = true; 44 const size = calculateSize(entry); 45 // Background image size should only be approximately the size of a single letter. 46 assert_between_inclusive(size, 48, 180); 47 } 48 }); 49 if (textObserved && imageObserved) 50 t.done(); 51 }) 52 ); 53 observer.observe({entryTypes: ['element']}); 54 }, 'Element with elementtiming attribute and background image in first-letter is observable.'); 55 </script> 56 <div id='target' elementtiming='my_div'>This is some text that I care about</div> 57 </body>