helper_bug1930342.html (1873B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <script src="/tests/SimpleTest/EventUtils.js"></script> 6 <script src="/tests/SimpleTest/NativeKeyCodes.js"></script> 7 <script src="/tests/SimpleTest/paint_listener.js"></script> 8 <script src="apz_test_utils.js"></script> 9 <script src="apz_test_native_event_utils.js"></script> 10 <title>What happens if main thread scrolls?</title> 11 <style> 12 body { 13 margin: 0; 14 } 15 16 .container { 17 width: 100vw; 18 height: 10vh; 19 min-height: 300px; 20 display: flex; 21 } 22 23 #stream { 24 width: 300px; 25 overflow-y: scroll; 26 } 27 </style> 28 <div class="container"> 29 <div id="stream"></div> 30 </div> 31 </div> 32 <script> 33 async function setup() { 34 // Setup a scroll container having 50 child elements, and scroll to 35 // the bottom. 36 for (let i = 0 ; i < 50; i++) { 37 const el = document.createElement("div"); 38 el.style.height = "20px"; 39 40 stream.append(el); 41 } 42 43 const scrollPromise = promiseOneEvent(stream, "scroll"); 44 stream.scrollTo(0, stream.scrollHeight); 45 await scrollPromise; 46 await promiseApzFlushedRepaints(); 47 } 48 49 async function test() { 50 await setup(); 51 52 // Remove the first element so that a scroll anchor adjustment happens, 53 // at the same time the scrollable range shrinks. 54 stream.firstElementChild.remove(); 55 56 await promiseApzFlushedRepaints(); 57 58 // The scroll offset on the main-thread is the expected value. 59 const expectedScrollOffset = stream.scrollTop; 60 61 // Collect sampled offsets on the compositor. 62 const records = collectSampledScrollOffsets(stream); 63 64 ok(records.some(record => SpecialPowers.wrap(record).scrollOffsetY == expectedScrollOffset), 65 `There should be ${expectedScrollOffset} in [${records.map(record => SpecialPowers.wrap(record).scrollOffsetY)}]`); 66 } 67 68 waitUntilApzStable() 69 .then(test) 70 .then(subtestDone, subtestFailed); 71 </script> 72 </html>