shift-with-counterscroll-2.html (1413B)
1 <!DOCTYPE html> 2 <title>Layout Instability: shift with counterscroll not counted, with 2 scrollers</title> 3 <link rel="help" href="https://wicg.github.io/layout-instability/" /> 4 <style> 5 .scroller { 6 overflow: scroll; 7 position: absolute; 8 left: 20px; 9 top: 20px; 10 width: 200px; 11 height: 200px; 12 } 13 .content { 14 width: 170px; 15 height: 600px; 16 } 17 .changer { 18 position: relative; 19 background: yellow; 20 left: 10px; 21 top: 100px; 22 width: 150px; 23 height: 150px; 24 } 25 26 </style> 27 <div id="scroller1" class="scroller"> 28 <div class="content"> 29 <div id="changer1" class="changer"></div> 30 </div> 31 </div> 32 <div id="scroller2" class="scroller"> 33 <div class="content"> 34 <div id="changer2" class="changer"></div> 35 </div> 36 </div> 37 <script src="/resources/testharness.js"></script> 38 <script src="/resources/testharnessreport.js"></script> 39 <script src="resources/util.js"></script> 40 <script> 41 42 promise_test(async () => { 43 const watcher = new ScoreWatcher; 44 45 // Wait for the initial render to complete. 46 await waitForAnimationFrames(2); 47 48 // Top goes from 100 to 200. scroll by 100 to counter it. 49 changer1.style.top = "200px"; 50 scroller1.scrollTop = 100; 51 // Top goes from 100 to 300. scroll by 200 to counter it. 52 changer2.style.top = "300px"; 53 scroller2.scrollTop = 200; 54 55 await waitForAnimationFrames(3); 56 assert_equals(watcher.score, 0); 57 }, "Shift with counterscroll not counted, with 2 scrollers."); 58 59 </script>