observe-css-generated-text.html (3932B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 #css-generated-text::before { 7 content: 'This is some text generated via css'; 8 font-size: 12px; 9 } 10 11 #css-generated-text-attr::before { 12 content: attr(data-text); 13 font-size: 12px; 14 } 15 16 #css-generated-text-inline-elem::before { 17 content: 'This is some more text generated via css that should be displayed via a span tag'; 18 font-size: 12px; 19 } 20 </style> 21 <body> 22 <script> 23 setup({"hide_test_state": true}); 24 const checkText = (entry, expectedSize, expectedID, beforeRender) => { 25 assert_equals(entry.entryType, 'largest-contentful-paint', 26 'Entry should be of type largest-contentful-paint'); 27 assert_greater_than_equal(entry.renderTime, beforeRender, 28 'Render time should be greater than time just before rendering'); 29 assert_greater_than_equal(performance.now(), entry.renderTime, 30 'renderTime should be less than current time'); 31 assert_approx_equals(entry.startTime, entry.renderTime, 0.001, 32 'startTime should be equal to renderTime to the precision of 1 millisecond.'); 33 assert_equals(entry.duration, 0, 'duration should be 0'); 34 assert_greater_than_equal(entry.size, expectedSize, 35 'Size should match expected size'); 36 assert_equals(entry.loadTime, 0, 'loadTime should be zero'); 37 assert_equals(entry.id, expectedID, 'ID should match expected ID'); 38 assert_equals(entry.url, '', 'URL should be empty'); 39 assert_equals(entry.element, document.getElementById(expectedID), 40 'Entry element is expected element'); 41 } 42 43 const runTest = (element, testName) => { 44 const elementId = element.id; 45 // The element should be atleast 12px in width 46 // and 100px across based on font size and text length. 47 const elemSizeLowerBound = 1200; 48 promise_test(t => { 49 return new Promise((resolve, reject) => { 50 assert_implements(window.LargestContentfulPaint, 51 "LargestContentfulPaint is not implemented"); 52 const observer = new PerformanceObserver(resolve); 53 observer.observe({ type: 'largest-contentful-paint' }); 54 beforeRender = performance.now(); 55 document.body.appendChild(element); 56 57 step_timeout(() => { 58 reject(new Error('timeout, LCP candidate not detected')); 59 }, 1000) 60 }).then(entryList => { 61 assert_equals(entryList.getEntries().length, 1); 62 const entry = entryList.getEntries()[0]; 63 checkText(entry, elemSizeLowerBound, elementId, beforeRender); 64 }); 65 }, testName); 66 } 67 68 const cssGeneratedTextElem = document.createElement('p'); 69 cssGeneratedTextElem.id = 'css-generated-text'; 70 runTest(cssGeneratedTextElem, 71 "CSS generated text is observable as a LargestContentfulPaint candidate"); 72 73 const cssGeneratedTextAttrElem = document.createElement('p'); 74 cssGeneratedTextAttrElem.id = 'css-generated-text-attr'; 75 cssGeneratedTextAttrElem.setAttribute('data-text', 76 'This is some text generated using content:attr() via css'); 77 runTest(cssGeneratedTextAttrElem, 78 "Text generated with CSS using content:attr() is observable as a LargestContentfulPaint candidate"); 79 80 const cssGeneratedTextAttrInlineElemBlockWrapper = document.createElement('div'); 81 cssGeneratedTextAttrInlineElemBlockWrapper.id = 'css-generated-text-inline-elem-block-wrapper'; 82 const cssGeneratedTextInlineElem = document.createElement('span'); 83 cssGeneratedTextInlineElem.id = 'css-generated-text-inline-elem'; 84 cssGeneratedTextAttrInlineElemBlockWrapper.appendChild(cssGeneratedTextInlineElem); 85 runTest(cssGeneratedTextAttrInlineElemBlockWrapper, 86 "CSS generated text on a inline element is observable as a LargestContentfulPaint candidate"); 87 </script> 88 </body>