sub-frame.html (1197B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="resources/test-adapter.js"></script> 7 <script src="resources/util.js"></script> 8 <style> 9 #j { 10 position: relative; 11 width: 300px; 12 height: 100px; 13 background-color: purple; 14 } 15 </style> 16 <div id="j"></div> 17 <script> 18 function shiftFrame() { 19 document.getElementById('j').style.top = '60px'; 20 } 21 function unshiftFrame() { 22 document.getElementById('j').style.top = ''; 23 } 24 25 promise_test(async () => { 26 const watcher = new ScoreWatcher; 27 28 // Wait for the initial render to complete. 29 await waitForAnimationFrames(2); 30 shiftFrame(); 31 32 const expectedScore = computeExpectedScore(300 * (100 + 60), 60); 33 34 cls_expect(watcher, {score: 0}); 35 await watcher.promise; 36 cls_expect(watcher, {score: expectedScore}); 37 38 unshiftFrame(); 39 await watcher.promise; 40 cls_expect(watcher, {score: expectedScore * 2}); 41 42 window.parent.postMessage({ 43 type: 'layout shift score', 44 score: watcher.score, 45 expectedScore: expectedScore * 2, 46 }, '*'); 47 }, 'We will see two layout shift with the same score in the subframe.'); 48 </script> 49 </body> 50 </html>