| <!DOCTYPE HTML> |
| <meta charset=utf-8> |
| <title>Layout Instability: query layout shift value via the performance timeline</title> |
| <body> |
| <style> |
| #myDiv { position: relative; width: 300px; height: 100px; } |
| </style> |
| <div id='myDiv'></div> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <!-- Delay onload by inserting a slow image.--> |
| <img src="resources/slow-image.py"> |
| <script> |
| async_test(function (t) { |
| const startTime = performance.now(); |
| // Modify the position of the div. |
| document.getElementById('myDiv').style = "top: 60px"; |
| function testBufferedEntry() { |
| if (performance.getEntriesByType('layoutShift').length === 0) { |
| t.step_timeout(testBufferedEntry, 0); |
| return; |
| } |
| const endTime = performance.now(); |
| assert_equals(performance.getEntriesByType('layoutShift').length, 1); |
| assert_equals(performance.getEntries().filter( |
| entry => entry.entryType === 'layoutShift').length, 1); |
| const entry = performance.getEntriesByType('layoutShift')[0]; |
| assert_equals(entry.entryType, "layoutShift"); |
| assert_equals(entry.name, ""); |
| assert_greater_than_equal(entry.startTime, startTime) |
| assert_less_than_equal(entry.startTime, endTime) |
| assert_equals(entry.duration, 0.0); |
| // The layout shift value should be: 300 * (100 + 60) / viewport size. |
| assert_equals(entry.value, 300 * (100 + 60) / |
| (document.documentElement.clientWidth * document.documentElement.clientHeight)); |
| t.done(); |
| } |
| t.step(testBufferedEntry); |
| }, 'Layout shift before onload is buffered into the performance timeline.'); |
| </script> |
| |
| </body> |
