test_multipleFilePicker.html (2020B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test for single filepicker per event</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="/tests/SimpleTest/EventUtils.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 8 </head> 9 <body> 10 <div id='foo'><a href='#'>Click here to test this issue</a></div> 11 <script> 12 13 SimpleTest.requestFlakyTimeout("Timeouts are needed to simulate user-interaction"); 14 SimpleTest.waitForExplicitFinish(); 15 16 let clickCount = 0; 17 let foo = document.getElementById('foo'); 18 foo.addEventListener('click', _ => { 19 if (++clickCount < 10) { 20 let input = document.createElement('input'); 21 input.type = 'file'; 22 foo.appendChild(input); 23 24 SpecialPowers.wrap(document).notifyUserGestureActivation(); 25 input.click(); 26 } 27 }); 28 29 let MockFilePicker = SpecialPowers.MockFilePicker; 30 MockFilePicker.init(SpecialPowers.wrap(window).browsingContext); 31 32 let pickerCount = 0; 33 34 SpecialPowers.pushPrefEnv({ 35 set: [["dom.disable_open_during_load", true]], 36 }) 37 // Let's do the first click. 38 .then(() => { 39 return new Promise(resolve => { 40 MockFilePicker.showCallback = function(filepicker) { 41 ++pickerCount; 42 resolve(); 43 } 44 setTimeout(_ => { 45 is(pickerCount, 0, "No file picker initially"); 46 synthesizeMouseAtCenter(foo, {}); 47 }, 0); 48 }) 49 }) 50 51 // Let's wait a bit more, then let's do a click. 52 .then(() => { 53 return new Promise(resolve => { 54 MockFilePicker.showCallback = function(filepicker) { 55 ++pickerCount; 56 resolve(); 57 } 58 59 setTimeout(() => { 60 is(pickerCount, 1, "Only 1 file picker"); 61 is(clickCount, 10, "10 clicks triggered"); 62 clickCount = 0; 63 pickerCount = 0; 64 synthesizeMouseAtCenter(foo, {}); 65 }, 1000); 66 }); 67 }) 68 69 // Another click... 70 .then(_ => { 71 setTimeout(() => { 72 is(pickerCount, 1, "Only 1 file picker"); 73 is(clickCount, 10, "10 clicks triggered"); 74 MockFilePicker.cleanup(); 75 SimpleTest.finish(); 76 }, 1000); 77 }); 78 79 </script> 80 </body> 81 </html>