<!DOCTYPE html> <html> <body> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="resources/test-adapter.js"></script> <script src="resources/util.js"></script> <style> #j { position: relative; width: 300px; height: 100px; background-color: purple; } </style> <div id="j"></div> <script> function shiftFrame() { document.getElementById('j').style.top = '60px'; } function unshiftFrame() { document.getElementById('j').style.top = ''; } promise_test(async () => { const watcher = new ScoreWatcher; // Wait for the initial render to complete. await waitForAnimationFrames(2); shiftFrame(); const expectedScore = computeExpectedScore(300 * (100 + 60), 60); cls_expect(watcher, {score: 0}); await watcher.promise; cls_expect(watcher, {score: expectedScore}); unshiftFrame(); await watcher.promise; cls_expect(watcher, {score: expectedScore * 2}); window.parent.postMessage({ type: 'layout shift score', score: watcher.score, expectedScore: expectedScore * 2, }, '*'); }, 'We will see two layout shift with the same score in the subframe.'); </script> </body> </html>