| Nicolás Peña Moreno | 93e7ae0 | 2019-08-19 15:17:03 | [diff] [blame] | 1 | <!DOCTYPE HTML> |
| 2 | <meta charset=utf-8> |
| 3 | <title>Largest Contentful Paint: largest text is reported.</title> |
| 4 | <body> |
| 5 | <script src="/resources/testharness.js"></script> |
| 6 | <script src="/resources/testharnessreport.js"></script> |
| 7 | <style type="text/css"> |
| 8 | #text2 { |
| 9 | position: absolute; |
| 10 | width: auto; |
| 11 | white-space: nowrap; |
| 12 | } |
| 13 | </style> |
| 14 | <!-- There is some text and some tiny images. We care about the largest text. --> |
| 15 | <img src='/images/green-1x1.png'/> |
| 16 | <div id='text1'>This is some text.</div> |
| 17 | <div id='text2'>This is more text so it will be the Largest Contentful Paint!</div> |
| 18 | <img src='/images/green-2x2.png'/> |
| 19 | <script> |
| 20 | async_test(function (t) { |
| 21 | if (!window.LargestContentfulPaint) { |
| 22 | assert_unreached("LargestContentfulPaint is not implemented"); |
| 23 | } |
| 24 | let beforeRender; |
| 25 | const observer = new PerformanceObserver( |
| 26 | t.step_func(entryList => { |
| 27 | entryList.getEntries().forEach(entry => { |
| 28 | // The tiny images or text1 could be reported as LCP if it is rendered before text2. |
| 29 | if (entry.id !== 'text2') |
| 30 | return; |
| 31 | |
| 32 | assert_equals(entry.entryType, 'largest-contentful-paint'); |
| 33 | assert_greater_than_equal(entry.renderTime, beforeRender); |
| 34 | assert_greater_than_equal(performance.now(), entry.renderTime); |
| 35 | assert_equals(entry.startTime, entry.renderTime, 'startTime should equal renderTime'); |
| 36 | assert_equals(entry.duration, 0); |
| 37 | const div = document.getElementById('text2'); |
| 38 | // The div styling makes it approximate the text size. |
| 39 | assert_greater_than_equal(entry.size, (div.clientHeight - 5) * (div.clientWidth - 5)); |
| 40 | assert_less_than_equal(entry.size, (div.clientHeight + 1) * (div.clientWidth + 1)); |
| 41 | assert_equals(entry.loadTime, 0); |
| 42 | assert_equals(entry.id, 'text2'); |
| 43 | assert_equals(entry.url, ''); |
| 44 | assert_equals(entry.element, div); |
| 45 | t.done(); |
| 46 | }) |
| 47 | }) |
| 48 | ); |
| 49 | observer.observe({type: 'largest-contentful-paint', buffered: true}); |
| 50 | beforeRender = performance.now(); |
| 51 | }, 'Largest Contentful Paint: largest text is reported.'); |
| 52 | </script> |
| 53 | </body> |
