| Nicolás Peña | 92d1f6c | 2019-02-13 20:05:53 | [diff] [blame] | 1 | <!DOCTYPE HTML> |
| 2 | <meta charset=utf-8> |
| Nicolás Peña Moreno | c13852e | 2019-07-08 18:51:04 | [diff] [blame] | 3 | <title>Layout Instability entries are not available via the performance timeline</title> |
| Nicolás Peña | 92d1f6c | 2019-02-13 20:05:53 | [diff] [blame] | 4 | <body> |
| 5 | <style> |
| 6 | #myDiv { position: relative; width: 300px; height: 100px; } |
| 7 | </style> |
| 8 | <div id='myDiv'></div> |
| 9 | <script src="/resources/testharness.js"></script> |
| 10 | <script src="/resources/testharnessreport.js"></script> |
| Nicolás Peña Moreno | 11f1a59 | 2019-12-27 22:36:57 | [diff] [blame] | 11 | <script src="resources/util.js"></script> |
| Nicolás Peña | 92d1f6c | 2019-02-13 20:05:53 | [diff] [blame] | 12 | <script> |
| Nicolás Peña Moreno | 0432a10 | 2020-01-27 17:01:49 | [diff] [blame] | 13 | promise_test(async t => { |
| 14 | assert_precondition(window.LayoutShift, 'Layout Instability is not supported.'); |
| Nicolás Peña Moreno | 11f1a59 | 2019-12-27 22:36:57 | [diff] [blame] | 15 | // Wait for the initial render to complete. |
| 16 | await waitForAnimationFrames(2); |
| Nicolás Peña Moreno | c13852e | 2019-07-08 18:51:04 | [diff] [blame] | 17 | |
| Nicolás Peña Moreno | 11f1a59 | 2019-12-27 22:36:57 | [diff] [blame] | 18 | const startTime = performance.now(); |
| Nicolás Peña Moreno | 0432a10 | 2020-01-27 17:01:49 | [diff] [blame] | 19 | return new Promise(resolve => { |
| 20 | new PerformanceObserver(t.step_func(list => { |
| 21 | const endTime = performance.now(); |
| 22 | assert_equals(list.getEntries().length, 1); |
| 23 | const entry = list.getEntries()[0]; |
| 24 | assert_equals(entry.entryType, "layout-shift"); |
| 25 | assert_equals(entry.name, ""); |
| 26 | assert_greater_than_equal(entry.startTime, startTime); |
| 27 | assert_less_than_equal(entry.startTime, endTime); |
| 28 | assert_equals(entry.duration, 0.0); |
| 29 | // The layout shift value should be: |
| 30 | // 300 * (100 + 60) * (60 / maxDimension) / viewport size. |
| 31 | assert_equals(entry.value, computeExpectedScore(300 * (100 + 60), 60)); |
| Nicolás Peña Moreno | 11f1a59 | 2019-12-27 22:36:57 | [diff] [blame] | 32 | |
| Nicolás Peña Moreno | 0432a10 | 2020-01-27 17:01:49 | [diff] [blame] | 33 | // The entry should not be available via getEntries* methods. |
| 34 | assert_equals(performance.getEntriesByType('layout-shift').length, 0, 'getEntriesByType should have no layout-shift entries'); |
| 35 | assert_equals(performance.getEntriesByName('', 'layout-shift').length, 0, 'getEntriesByName should have no layout-shift entries'); |
| 36 | assert_equals(performance.getEntries().filter(e => e.entryType === 'layout-shift').length, 0, 'getEntries should have no layout-shift entries'); |
| 37 | resolve(); |
| 38 | })).observe({type: 'layout-shift'}); |
| 39 | // Modify the position of the div. |
| 40 | document.getElementById('myDiv').style = "top: 60px"; |
| 41 | }); |
| Nicolás Peña Moreno | 11f1a59 | 2019-12-27 22:36:57 | [diff] [blame] | 42 | }, 'Layout shift before onload is not buffered into the performance timeline.'); |
| Nicolás Peña | 92d1f6c | 2019-02-13 20:05:53 | [diff] [blame] | 43 | </script> |
| 44 | |
| 45 | </body> |
