| Nicolás Peña Moreno | b26c53a | 2019-07-19 00:15:45 | [diff] [blame] | 1 | <!DOCTYPE HTML> |
| 2 | <meta charset=utf-8> |
| 3 | <title>Largest Contentful Paint: contracted image bounded by display size.</title> |
| 4 | <style type="text/css"> |
| 5 | #image_id { |
| 6 | width: 50px; |
| 7 | height: 50px; |
| 8 | } |
| 9 | </style> |
| 10 | <body> |
| 11 | <script src="/resources/testharness.js"></script> |
| 12 | <script src="/resources/testharnessreport.js"></script> |
| Nicolás Peña Moreno | 4ad4e60 | 2019-08-29 18:55:14 | [diff] [blame] | 13 | <script src="resources/largest-contentful-paint-helpers.js"></script> |
| Nicolás Peña Moreno | b26c53a | 2019-07-19 00:15:45 | [diff] [blame] | 14 | <script> |
| 15 | async_test(function (t) { |
| Nicolás Peña Moreno | bd2c049 | 2020-01-23 16:37:25 | [diff] [blame] | 16 | assert_precondition(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented"); |
| Nicolás Peña Moreno | 4ad4e60 | 2019-08-29 18:55:14 | [diff] [blame] | 17 | const beforeLoad = performance.now(); |
| Nicolás Peña Moreno | b26c53a | 2019-07-19 00:15:45 | [diff] [blame] | 18 | const observer = new PerformanceObserver( |
| 19 | t.step_func_done(function(entryList) { |
| 20 | assert_equals(entryList.getEntries().length, 1); |
| 21 | const entry = entryList.getEntries()[0]; |
| Nicolás Peña Moreno | 4ad4e60 | 2019-08-29 18:55:14 | [diff] [blame] | 22 | const url = window.location.origin + '/images/black-rectangle.png'; |
| Nicolás Peña Moreno | b26c53a | 2019-07-19 00:15:45 | [diff] [blame] | 23 | // black-rectangle.png is 100 x 50. It occupies 50 x 50 so size will be bounded by the displayed size. |
| Nicolás Peña Moreno | 4ad4e60 | 2019-08-29 18:55:14 | [diff] [blame] | 24 | const size = 50 * 50; |
| 25 | checkImage(entry, url, 'image_id', size, beforeLoad); |
| Nicolás Peña Moreno | b26c53a | 2019-07-19 00:15:45 | [diff] [blame] | 26 | }) |
| 27 | ); |
| 28 | observer.observe({type: 'largest-contentful-paint', buffered: true}); |
| 29 | }, 'Largest Contentful Paint: |size| attribute is bounded by display size.'); |
| 30 | </script> |
| 31 | <img src='/images/black-rectangle.png' id='image_id'/> |
| 32 | </body> |
