shift-with-counter-scroll-and-translate.html (1522B)
1 <!DOCTYPE html> 2 <title>Layout Instability: shift with counter scroll and translate not counted</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: 600px; 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 changer1.style.top = "250px"; 49 changer1.style.translate = "0 -50px"; 50 // 250 - 50 = 200; old position is 100; hence scrollTop to counter is 100. 51 scroller1.scrollTop = 100; 52 53 changer2.style.left = "220px"; 54 changer2.style.translate = "80px 0"; 55 // 220 + 80 = 300; old position is 10; hence scrollTop to counter is 290. 56 scroller2.scrollLeft = 290; 57 58 await waitForAnimationFrames(3); 59 assert_equals(watcher.score, 0); 60 }, "Shift with counter scroll and translate not counted."); 61 62 </script>