observe-text.html (1779B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: observe text</title> 4 <body> 5 <style> 6 body { 7 margin: 20px; 8 } 9 p { 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 async_test((t) => { 18 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 19 let paragraph; 20 let beforeRender; 21 const observer = new PerformanceObserver( 22 t.step_func_done((entryList) => { 23 assert_equals(entryList.getEntries().length, 1); 24 const entry = entryList.getEntries()[0]; 25 checkTextElement(entry, 'my_text', 'text_id', beforeRender, paragraph); 26 assert_equals(entry.intersectionRect.left, 20, 'left should be 20.'); 27 // Text box size will vary from device to device, so try lower bounding height by 12, width by 100. 28 assert_greater_than_equal(entry.intersectionRect.right, 120); 29 30 assert_equals(entry.intersectionRect.top, 20, 'top should be 20.'); 31 assert_greater_than_equal(entry.intersectionRect.bottom, 32); 32 }) 33 ); 34 observer.observe({entryTypes: ['element']}); 35 // We add the iframe during onload to be sure that the observer is registered 36 // in time for it to observe the element timing. 37 window.onload = () => { 38 paragraph = document.createElement('p'); 39 paragraph.innerHTML = 'This is text I care about'; 40 paragraph.setAttribute('elementtiming', 'my_text'); 41 paragraph.setAttribute('id', 'text_id'); 42 document.body.appendChild(paragraph); 43 beforeRender = performance.now(); 44 }; 45 }, 'Paragraph with elementtiming attribute is observed.'); 46 </script> 47 48 </body>