Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /layout-instability/sub-frame.html - WPT Dashboard Interop Dashboard
<!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>