test_bug1756831.html (5404B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1756831 5 --> 6 <head> 7 <title>Test for Bug 1756831</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 11 </head> 12 <body> 13 14 15 <style> 16 .scroller { 17 height: 300px; 18 width: 300px; 19 overflow: hidden; 20 border: 1px solid grey; 21 } 22 23 .long-content { 24 height: 300vh; 25 } 26 27 .modal { 28 position: fixed; 29 top: 0; 30 left: 0; 31 right: 0; 32 bottom: 0; 33 background: rgba(0,0,0,0.1); 34 z-index: 10; 35 } 36 37 </style> 38 <div id="sc" class="scroller"> 39 40 <div class="long-content"> 41 <div style="width: 30px; height: 30px; background: blue;"></div> 42 <div class="modal"></div> 43 </div> 44 45 </div> 46 47 48 <script> 49 SimpleTest.requestFlakyTimeout("need to wait for overlay scrollbars to fade out"); 50 SimpleTest.waitForExplicitFinish(); 51 // Test that mousing over content descendants that are not scrollable does not 52 // scroll the overlay scrollbars. 53 54 /* We are testing overlay scrollbars here, specifically those that display when 55 the mouse is moved over scrollable content. The first two prefs are for 56 that. We set the prefs that determine the duration of the scrollbar fade out 57 so they are uniform for us. It would be nice if we could set a very short 58 duration so we didn't have to wait, or a very long duration so as to prevent 59 the possibility of the scrollbars disappearing before we take a screenshot 60 to compare against, however neither of those are workable. If the duration 61 is too short we risk the scrollbars disappearing before we can screenshot 62 them. If the duration is too long the test takes a long time. We can't 63 change the duration prefs part way through the test because the prefs are 64 only read when the a scroll frame is created or when a scroll frame is 65 reflowed and we've switched to/from overlay scrollbars. Both of these would 66 cause the scrollbars to be shown again which would interrupt the test. 67 */ 68 69 add_task(async function() { 70 await SimpleTest.promiseFocus(window); 71 await SpecialPowers.pushPrefEnv({"set": [["ui.useOverlayScrollbars", 1], 72 ["ui.scrollbarDisplayOnMouseMove", 1], 73 ["ui.scrollbarFadeDuration", 500], 74 ["ui.scrollbarFadeBeginDelay", 500]]}); 75 let utils = SpecialPowers.DOMWindowUtils; 76 77 let sc = document.getElementById("sc"); 78 let boundingClientRect = sc.getBoundingClientRect(); 79 80 // The div is initially overflow hidden, so it doesn't have scrollbars, 81 // capture that so we can compare against it later. 82 let noscrollbars = document.createElement("canvas"); 83 noscrollbars.setAttribute("width", boundingClientRect.width); 84 noscrollbars.setAttribute("height", boundingClientRect.height); 85 let ctx = noscrollbars.getContext("2d"); 86 SpecialPowers.wrap(ctx).drawWindow(window, boundingClientRect.x, boundingClientRect.y, 87 boundingClientRect.width, 88 boundingClientRect.height, 89 "rgb(255,255,255)"); 90 91 // dump("noscrollbars " + noscrollbars.toDataURL() + "\n"); 92 93 await new Promise(resolve => setTimeout(resolve, 0)); 94 95 // make div scrollable 96 sc.style.overflow = "auto"; 97 98 // and make sure it's reconstructed so the prefs get applied 99 document.documentElement.style.display = "table"; 100 document.documentElement.getBoundingClientRect(); 101 document.documentElement.style.display = ""; 102 document.documentElement.getBoundingClientRect(); 103 104 105 const maxRetries = 5; 106 let retries = 0; 107 let canvasesSame = false; 108 while (!canvasesSame && retries < maxRetries) { 109 // wait for the scrollbars to fade away, 500+500 from prefs, then a bit more. 110 await new Promise(resolve => setTimeout(resolve, 1500)); 111 112 let canvas = document.createElement("canvas"); 113 canvas.setAttribute("width", boundingClientRect.width); 114 canvas.setAttribute("height", boundingClientRect.height); 115 // take screen shot 116 ctx = canvas.getContext("2d"); 117 SpecialPowers.wrap(ctx).drawWindow(window, boundingClientRect.x, boundingClientRect.y, 118 boundingClientRect.width, 119 boundingClientRect.height, 120 "rgb(255,255,255)"); 121 canvasesSame = (utils.compareCanvases(noscrollbars, canvas, {}) == 0); 122 retries++; 123 // dump("differences " + utils.compareCanvases(noscrollbars, canvas, {})); 124 // dump("canvas " + canvas.toDataURL() + "\n"); 125 } 126 127 ok(canvasesSame, "scrollbars disappeared: canvasesSame " + canvasesSame + " retries " + retries) 128 129 // send mouse move that should not show scrollbar 130 await synthesizeMouseAtCenter(document.documentElement, { type: "mousemove" }); 131 await new Promise(r => requestAnimationFrame(r)); 132 133 let canvas = document.createElement("canvas"); 134 canvas.setAttribute("width", boundingClientRect.width); 135 canvas.setAttribute("height", boundingClientRect.height); 136 ctx = canvas.getContext("2d"); 137 SpecialPowers.wrap(ctx).drawWindow(window, boundingClientRect.x, boundingClientRect.y, 138 boundingClientRect.width, 139 boundingClientRect.height, 140 "rgb(255,255,255)"); 141 142 let differences = utils.compareCanvases(noscrollbars, canvas, {}); 143 // dump("canvas " + canvas.toDataURL() + "\n"); 144 145 ok(differences == 0, "differences " + differences); 146 }); 147 </script> 148 </body> 149 </html>