test_frame_reconstruction.html (6062B)
1 <!DOCTYPE html> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1235899 5 --> 6 <head> 7 <title>Test for bug 1235899</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <script src="/tests/SimpleTest/paint_listener.js"></script> 11 <script type="application/javascript" src="apz_test_utils.js"></script> 12 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 13 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 14 <style> 15 .outer { 16 height: 400px; 17 width: 415px; 18 overflow: hidden; 19 position: relative; 20 } 21 .inner { 22 height: 100%; 23 outline: none; 24 overflow-x: hidden; 25 overflow-y: scroll; 26 position: relative; 27 scroll-behavior: smooth; 28 } 29 .outer.contentBefore::before { 30 top: 0; 31 content: ''; 32 display: block; 33 height: 2px; 34 position: absolute; 35 width: 100%; 36 z-index: 99; 37 } 38 </style> 39 </head> 40 <body> 41 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1235899">Mozilla Bug 1235899</a> 42 <p id="display"></p> 43 <div id="content"> 44 <p>You should be able to fling this list without it stopping abruptly</p> 45 <div class="outer"> 46 <div class="inner"> 47 <ol> 48 <li>Some text</li> 49 <li>Some text</li> 50 <li>Some text</li> 51 <li>Some text</li> 52 <li>Some text</li> 53 <li>Some text</li> 54 <li>Some text</li> 55 <li>Some text</li> 56 <li>Some text</li> 57 <li>Some text</li> 58 <li>Some text</li> 59 <li>Some text</li> 60 <li>Some text</li> 61 <li>Some text</li> 62 <li>Some text</li> 63 <li>Some text</li> 64 <li>Some text</li> 65 <li>Some text</li> 66 <li>Some text</li> 67 <li>Some text</li> 68 <li>Some text</li> 69 <li>Some text</li> 70 <li>Some text</li> 71 <li>Some text</li> 72 <li>Some text</li> 73 <li>Some text</li> 74 <li>Some text</li> 75 <li>Some text</li> 76 <li>Some text</li> 77 <li>Some text</li> 78 <li>Some text</li> 79 <li>Some text</li> 80 <li>Some text</li> 81 <li>Some text</li> 82 <li>Some text</li> 83 <li>Some text</li> 84 <li>Some text</li> 85 <li>Some text</li> 86 <li>Some text</li> 87 <li>Some text</li> 88 <li>Some text</li> 89 <li>Some text</li> 90 <li>Some text</li> 91 <li>Some text</li> 92 <li>Some text</li> 93 <li>Some text</li> 94 <li>Some text</li> 95 <li>Some text</li> 96 <li>Some text</li> 97 <li>Some text</li> 98 <li>Some text</li> 99 <li>Some text</li> 100 <li>Some text</li> 101 <li>Some text</li> 102 <li>Some text</li> 103 <li>Some text</li> 104 <li>Some text</li> 105 <li>Some text</li> 106 <li>Some text</li> 107 <li>Some text</li> 108 <li>Some text</li> 109 <li>Some text</li> 110 <li>Some text</li> 111 <li>Some text</li> 112 <li>Some text</li> 113 <li>Some text</li> 114 <li>Some text</li> 115 <li>Some text</li> 116 <li>Some text</li> 117 <li>Some text</li> 118 <li>Some text</li> 119 <li>Some text</li> 120 <li>Some text</li> 121 <li>Some text</li> 122 <li>Some text</li> 123 <li>Some text</li> 124 <li>Some text</li> 125 <li>Some text</li> 126 <li>Some text</li> 127 <li>Some text</li> 128 <li>Some text</li> 129 <li>Some text</li> 130 <li>Some text</li> 131 <li>Some text</li> 132 <li>Some text</li> 133 <li>Some text</li> 134 <li>Some text</li> 135 <li>Some text</li> 136 <li>Some text</li> 137 <li>Some text</li> 138 <li>Some text</li> 139 <li>Some text</li> 140 <li>Some text</li> 141 <li>Some text</li> 142 <li>Some text</li> 143 <li>Some text</li> 144 <li>Some text</li> 145 <li>Some text</li> 146 <li>Some text</li> 147 <li>Some text</li> 148 <li>Some text</li> 149 <li>Some text</li> 150 </ol> 151 </div> 152 </div> 153 </div> 154 155 <pre id="test"> 156 <script type="application/javascript"> 157 async function test() { 158 var elm = document.getElementsByClassName("inner")[0]; 159 elm.scrollTop = 0; 160 await promiseOnlyApzControllerFlushed(); 161 162 // Take over control of the refresh driver and compositor 163 var utils = SpecialPowers.DOMWindowUtils; 164 utils.advanceTimeAndRefresh(0); 165 166 // Kick off an APZ smooth-scroll to 0,200 167 elm.scrollTo(0, 200); 168 await promiseAllPaintsDone(); 169 170 // Let's do a couple of frames of the animation, and make sure it's going 171 utils.advanceTimeAndRefresh(16); 172 utils.advanceTimeAndRefresh(16); 173 await promiseOnlyApzControllerFlushed(); 174 ok(elm.scrollTop > 0, "APZ animation in progress, scrollTop is now " + elm.scrollTop); 175 ok(elm.scrollTop < 200, "APZ animation not yet completed, scrollTop is now " + elm.scrollTop); 176 177 var frameReconstructionTriggered = 0; 178 // Register the listener that triggers the frame reconstruction 179 elm.onscroll = function() { 180 // Do the reconstruction 181 elm.parentNode.classList.add("contentBefore"); 182 frameReconstructionTriggered++; 183 // schedule a thing to undo the changes above 184 setTimeout(function() { 185 elm.parentNode.classList.remove("contentBefore"); 186 }, 0); 187 }; 188 189 // and do a few more frames of the animation, this should trigger the listener 190 // and the frame reconstruction 191 utils.advanceTimeAndRefresh(16); 192 utils.advanceTimeAndRefresh(16); 193 await promiseOnlyApzControllerFlushed(); 194 ok(elm.scrollTop < 200, "APZ animation not yet completed, scrollTop is now " + elm.scrollTop); 195 ok(frameReconstructionTriggered > 0, "Frame reconstruction triggered, reconstruction triggered " + frameReconstructionTriggered + " times"); 196 197 // and now run to completion 198 for (var i = 0; i < 100; i++) { 199 utils.advanceTimeAndRefresh(16); 200 } 201 utils.restoreNormalRefresh(); 202 await promiseAllPaintsDone(); 203 await promiseOnlyApzControllerFlushed(); 204 205 is(elm.scrollTop, 200, "Element should have scrolled by 200px"); 206 } 207 208 if (isApzEnabled()) { 209 SimpleTest.waitForExplicitFinish(); 210 SimpleTest.expectAssertions(0, 1); // this test triggers an assertion, see bug 1247050 211 SpecialPowers.pushPrefEnv({ set: [ ["layout.disable-pixel-alignment", true] ]}) 212 .then(waitUntilApzStable) 213 .then(test) 214 .then(SimpleTest.finish, SimpleTest.finishWithFailure); 215 } 216 217 </script> 218 </body> 219 </html>