PresentationAvailability_onchange-manual.https.html (3434B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Monitoring the list of available presentation displays.</title> 4 <link rel="author" title="Tomoyuki Shimizu" href="https://github.com/tomoyukilabs"> 5 <link rel="help" href="http://w3c.github.io/presentation-api/#monitoring-the-list-of-available-presentation-displays"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="common.js"></script> 9 10 <p id="notice">Please wait for a moment...</p> 11 <p>The test passes if a "PASS" result appears.<br></p> 12 13 <script> 14 // prevent the default timeout 15 setup({explicit_timeout: true}); 16 17 const notice = document.getElementById('notice'); 18 19 promise_test(t => { 20 // clean up the instruction notice when the test ends 21 t.add_cleanup(() => { 22 notice.parentNode.removeChild(notice); 23 }); 24 25 // initialize a presentation request 26 const request = new PresentationRequest(presentationUrls); 27 28 let availability, previousState, timeout; 29 30 const wait = () => { 31 notice.textContent = 'Please wait for a moment... (It might take long time)'; 32 33 // set timeout to observe the presentation availability 34 timeout = t.step_timeout(function() { 35 t.force_timeout(); 36 t.done(); 37 }, 90000); 38 }; 39 40 const setup = () => { 41 // save the current value of the presentation availability 42 previousState = availability.value; 43 44 // show an instruction notice 45 notice.textContent = 'Please make your presentation displays ' 46 + (previousState ? 'unavailable' : 'available') 47 + ' and click this button: '; 48 const button = document.createElement('button'); 49 button.textContent = 'Start Monitoring'; 50 button.onclick = wait; 51 notice.appendChild(button); 52 }; 53 54 // check the event and its attributes 55 const checkEvent = evt => { 56 clearTimeout(timeout); 57 timeout = undefined; 58 59 assert_true(evt.isTrusted && !evt.bubbles && !evt.cancelable && evt instanceof Event, 'A simple event is fired.'); 60 assert_equals(evt.type, 'change', 'The event name is "change".'); 61 assert_equals(evt.target, availability, 'event.target is the presentation availability.'); 62 assert_not_equals(previousState, availability.value, 'Value of the presentation availability is changed.'); 63 setup(); 64 }; 65 66 const watchEvent = (obj, watcher, type) => { 67 const watchHandler = new Promise(resolve => { 68 obj['on' + type] = evt => { resolve(evt); }; 69 }); 70 return Promise.all([ watchHandler, watcher.wait_for(type) ]).then(results => { 71 assert_equals(results[0], results[1], 'Both on' + type + ' and addEventListener pass the same event object.'); 72 return results[0]; 73 }); 74 }; 75 76 // check the change of PresentationAvailability.value twice; "true to false" and "false to true" 77 return request.getAvailability().then(a => { 78 availability = a; 79 setup(); 80 81 // wait until a "change" event is fired twice 82 var eventWatcher = new EventWatcher(t, availability, 'change'); 83 return watchEvent(availability, eventWatcher, 'change') 84 .then(checkEvent) 85 .then(() => { return eventWatcher.wait_for('change'); }) 86 .then(checkEvent); 87 }); 88 }); 89 </script>