test_bug1304689-2.html (4510B)
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.contentBefore::before { 22 top: 0; 23 content: ''; 24 display: block; 25 height: 2px; 26 position: absolute; 27 width: 100%; 28 z-index: 99; 29 } 30 </style> 31 <script type="application/javascript"> 32 33 async function test() { 34 var utils = SpecialPowers.DOMWindowUtils; 35 var elm = document.getElementById("outer"); 36 37 // Set margins on the element, to ensure it is layerized 38 utils.setDisplayPortMarginsForElement(0, 0, 0, 0, elm, /* priority*/ 1); 39 await promiseAllPaintsDone(); 40 await promiseOnlyApzControllerFlushed(); 41 42 // Take control of the refresh driver 43 utils.advanceTimeAndRefresh(0); 44 45 // Start a smooth-scroll animation in the compositor and let it go a few 46 // frames, so that there is some "user scrolling" going on (per the comment 47 // in AsyncPanZoomController::NotifyLayersUpdated) 48 elm.scrollTop = 10; 49 utils.advanceTimeAndRefresh(16); 50 utils.advanceTimeAndRefresh(16); 51 utils.advanceTimeAndRefresh(16); 52 utils.advanceTimeAndRefresh(16); 53 54 // Do another scroll update but also do a frame reconstruction within the same 55 // tick of the refresh driver. 56 elm.scrollTop = 100; 57 elm.classList.add("contentBefore"); 58 59 // Now let everything settle and all the animations run out 60 for (var i = 0; i < 60; i++) { 61 utils.advanceTimeAndRefresh(16); 62 } 63 utils.restoreNormalRefresh(); 64 65 await promiseOnlyApzControllerFlushed(); 66 is(elm.scrollTop, 100, "The scrollTop now should be y=100"); 67 } 68 69 if (isApzEnabled()) { 70 SimpleTest.waitForExplicitFinish(); 71 pushPrefs([["apz.displayport_expiry_ms", 0]]) 72 .then(waitUntilApzStable) 73 .then(test) 74 .then(SimpleTest.finish, SimpleTest.finishWithFailure); 75 } 76 77 </script> 78 </head> 79 <body> 80 <div id="outer"> 81 <div id="inner"> 82 this is some scrollable text.<br> 83 this is a second line to make the scrolling more obvious.<br> 84 and a third for good measure.<br> 85 this is some scrollable text.<br> 86 this is a second line to make the scrolling more obvious.<br> 87 and a third for good measure.<br> 88 this is some scrollable text.<br> 89 this is a second line to make the scrolling more obvious.<br> 90 and a third for good measure.<br> 91 this is some scrollable text.<br> 92 this is a second line to make the scrolling more obvious.<br> 93 and a third for good measure.<br> 94 this is some scrollable text.<br> 95 this is a second line to make the scrolling more obvious.<br> 96 and a third for good measure.<br> 97 this is some scrollable text.<br> 98 this is a second line to make the scrolling more obvious.<br> 99 and a third for good measure.<br> 100 this is some scrollable text.<br> 101 this is a second line to make the scrolling more obvious.<br> 102 and a third for good measure.<br> 103 this is some scrollable text.<br> 104 this is a second line to make the scrolling more obvious.<br> 105 and a third for good measure.<br> 106 this is some scrollable text.<br> 107 this is a second line to make the scrolling more obvious.<br> 108 and a third for good measure.<br> 109 this is some scrollable text.<br> 110 this is a second line to make the scrolling more obvious.<br> 111 and a third for good measure.<br> 112 this is some scrollable text.<br> 113 this is a second line to make the scrolling more obvious.<br> 114 and a third for good measure.<br> 115 this is some scrollable text.<br> 116 this is a second line to make the scrolling more obvious.<br> 117 and a third for good measure.<br> 118 this is some scrollable text.<br> 119 this is a second line to make the scrolling more obvious.<br> 120 and a third for good measure.<br> 121 this is some scrollable text.<br> 122 this is a second line to make the scrolling more obvious.<br> 123 and a third for good measure.<br> 124 this is some scrollable text.<br> 125 this is a second line to make the scrolling more obvious.<br> 126 and a third for good measure.<br> 127 </div> 128 </div> 129 </body> 130 </html>