css-generated-text.html (1399B)
1 <!DOCTYPE HTML> 2 <meta charset=utf-8> 3 <title>Element Timing: observe generated CSS text</title> 4 <style> 5 p::before { 6 content: "Generated text prefix"; 7 } 8 body { 9 margin: 20px; 10 } 11 </style> 12 <body> 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <script src="resources/element-timing-helpers.js"></script> 16 <p elementtiming='my_text' id='text_id'></p> 17 <script> 18 async_test(function (t) { 19 const beforeRender = performance.now(); 20 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 21 const observer = new PerformanceObserver( 22 t.step_func_done(function(entryList) { 23 assert_equals(entryList.getEntries().length, 1); 24 const entry = entryList.getEntries()[0]; 25 checkTextElement(entry, 'my_text', 'text_id', beforeRender, document.getElementById('text_id')); 26 assert_equals(entry.intersectionRect.left, 20, 'left should be 20.'); 27 assert_equals(entry.intersectionRect.top, 20, 'top should be 20.'); 28 // Try a lower bound of height=10, width=80 for the generated text. 29 assert_greater_than_equal(entry.intersectionRect.right, 100); 30 assert_greater_than_equal(entry.intersectionRect.bottom, 30); 31 }) 32 ); 33 observer.observe({type: 'element', buffered: true}); 34 }, 'Generated text content is observable.'); 35 </script> 36 </body>