test_scroll_animation_restore.html (3061B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1247074 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1247074</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="/tests/SimpleTest/paint_listener.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 12 <style> 13 .outer { 14 direction: ltr; 15 height: 400px; 16 width: 415px; 17 overflow: hidden; 18 position: relative; 19 } 20 .inner { 21 height: 100%; 22 outline: none; 23 overflow-x: hidden; 24 overflow-y: scroll; 25 position: relative; 26 scroll-behavior: smooth; 27 } 28 .outer.contentBefore::before { 29 top: 0; 30 content: ''; 31 display: block; 32 height: 2px; 33 position: absolute; 34 width: 100%; 35 z-index: 99; 36 } 37 </style> 38 </head> 39 <body> 40 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1247074">Mozilla Bug 1247074</a> 41 <p id="display"></p> 42 <div class="outer"> 43 <div class="inner"> 44 <ol> 45 <li>Some text</li> 46 <li>Some text</li> 47 <li>Some text</li> 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 </ol> 98 </div> 99 </div> 100 <script> 101 SimpleTest.waitForExplicitFinish(); 102 window.onload = function() { 103 var elm = document.getElementsByClassName('inner')[0]; 104 105 // Take control of the refresh driver 106 var utils = SpecialPowers.DOMWindowUtils; 107 utils.advanceTimeAndRefresh(0); 108 109 // Start a smooth scroll and advance a couple of frames so we're in the 110 // middle of the scroll animation 111 elm.scrollTop = 500; 112 utils.advanceTimeAndRefresh(16); 113 utils.advanceTimeAndRefresh(16); 114 115 // Trigger a frame reconstruction 116 elm.parentNode.classList.add('contentBefore'); 117 118 // Reach a stable state and verify the scroll position is 500 119 utils.restoreNormalRefresh(); 120 waitForAllPaintsFlushed(function() { 121 SimpleTest.is(elm.scrollTop, 500, "Scroll position ended up at 500"); 122 SimpleTest.finish(); 123 }); 124 } 125 126 </script> 127 </body> 128 </html>