shift-outside-viewport.html (950B)
1 <!DOCTYPE html> 2 <title>Layout Instability: shift outside viewport</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <style> 5 6 body { margin: 0; } 7 #j { position: absolute; width: 600px; height: 200px; top: 100%; background: blue; } 8 9 </style> 10 <div id='j'></div> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="resources/util.js"></script> 14 <script> 15 16 promise_test(async () => { 17 const watcher = new ScoreWatcher; 18 19 // Wait for the initial render to complete. 20 await waitForAnimationFrames(2); 21 22 // Move div even further out of viewport. 23 document.querySelector("#j").style.top = 24 document.documentElement.clientHeight + 200 + "px"; 25 26 // Since the element moves entirely outside of the viewport, it shouldn't 27 // generate a score. 28 await waitForAnimationFrames(3); 29 assert_equals(watcher.score, 0); 30 }, "Shift outside viewport."); 31 32 </script>