test_bug1304689.html (4655B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1304689 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1285070</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="/tests/SimpleTest/paint_listener.js"></script> 11 <script type="application/javascript" src="apz_test_utils.js"></script> 12 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 13 <style type="text/css"> 14 #outer { 15 height: 400px; 16 width: 415px; 17 overflow: scroll; 18 position: relative; 19 scroll-behavior: smooth; 20 } 21 #outer.instant { 22 scroll-behavior: auto; 23 } 24 #outer.contentBefore::before { 25 top: 0; 26 content: ''; 27 display: block; 28 height: 2px; 29 position: absolute; 30 width: 100%; 31 z-index: 99; 32 } 33 </style> 34 <script type="application/javascript"> 35 36 async function test() { 37 var utils = SpecialPowers.DOMWindowUtils; 38 var elm = document.getElementById("outer"); 39 40 // Set margins on the element, to ensure it is layerized 41 utils.setDisplayPortMarginsForElement(0, 0, 0, 0, elm, /* priority*/ 1); 42 await promiseAllPaintsDone(); 43 await promiseOnlyApzControllerFlushed(); 44 45 // Take control of the refresh driver 46 utils.advanceTimeAndRefresh(0); 47 48 // Start a smooth-scroll animation in the compositor and let it go a few 49 // frames, so that there is some "user scrolling" going on (per the comment 50 // in AsyncPanZoomController::NotifyLayersUpdated) 51 elm.scrollTop = 10; 52 utils.advanceTimeAndRefresh(16); 53 utils.advanceTimeAndRefresh(16); 54 utils.advanceTimeAndRefresh(16); 55 utils.advanceTimeAndRefresh(16); 56 57 // Do another scroll update but also do a frame reconstruction within the same 58 // tick of the refresh driver. 59 elm.classList.add("instant"); 60 elm.scrollTop = 100; 61 elm.classList.add("contentBefore"); 62 63 // Now let everything settle and all the animations run out 64 for (var i = 0; i < 60; i++) { 65 utils.advanceTimeAndRefresh(16); 66 } 67 utils.restoreNormalRefresh(); 68 69 await promiseOnlyApzControllerFlushed(); 70 is(elm.scrollTop, 100, "The scrollTop now should be y=100"); 71 } 72 73 if (isApzEnabled()) { 74 SimpleTest.waitForExplicitFinish(); 75 pushPrefs([ 76 ["apz.displayport_expiry_ms", 0], 77 ["layout.disable-pixel-alignment", true], 78 ]) 79 .then(waitUntilApzStable) 80 .then(test) 81 .then(SimpleTest.finish, SimpleTest.finishWithFailure); 82 } 83 84 </script> 85 </head> 86 <body> 87 <div id="outer"> 88 <div id="inner"> 89 this is some scrollable text.<br> 90 this is a second line to make the scrolling more obvious.<br> 91 and a third for good measure.<br> 92 this is some scrollable text.<br> 93 this is a second line to make the scrolling more obvious.<br> 94 and a third for good measure.<br> 95 this is some scrollable text.<br> 96 this is a second line to make the scrolling more obvious.<br> 97 and a third for good measure.<br> 98 this is some scrollable text.<br> 99 this is a second line to make the scrolling more obvious.<br> 100 and a third for good measure.<br> 101 this is some scrollable text.<br> 102 this is a second line to make the scrolling more obvious.<br> 103 and a third for good measure.<br> 104 this is some scrollable text.<br> 105 this is a second line to make the scrolling more obvious.<br> 106 and a third for good measure.<br> 107 this is some scrollable text.<br> 108 this is a second line to make the scrolling more obvious.<br> 109 and a third for good measure.<br> 110 this is some scrollable text.<br> 111 this is a second line to make the scrolling more obvious.<br> 112 and a third for good measure.<br> 113 this is some scrollable text.<br> 114 this is a second line to make the scrolling more obvious.<br> 115 and a third for good measure.<br> 116 this is some scrollable text.<br> 117 this is a second line to make the scrolling more obvious.<br> 118 and a third for good measure.<br> 119 this is some scrollable text.<br> 120 this is a second line to make the scrolling more obvious.<br> 121 and a third for good measure.<br> 122 this is some scrollable text.<br> 123 this is a second line to make the scrolling more obvious.<br> 124 and a third for good measure.<br> 125 this is some scrollable text.<br> 126 this is a second line to make the scrolling more obvious.<br> 127 and a third for good measure.<br> 128 this is some scrollable text.<br> 129 this is a second line to make the scrolling more obvious.<br> 130 and a third for good measure.<br> 131 this is some scrollable text.<br> 132 this is a second line to make the scrolling more obvious.<br> 133 and a third for good measure.<br> 134 </div> 135 </div> 136 </body> 137 </html>