| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Reconnecting presentations on two distinct displays</title> |
| <link rel="author" title="Tomoyuki Shimizu" href="https://github.com/tomoyukilabs"> |
| <link rel="help" href="http://w3c.github.io/presentation-api/#dom-presentationrequest-reconnect"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="common.js"></script> |
| <style> |
| #second-step { |
| display: none; |
| } |
| </style> |
| |
| <p id="first-step">Click the button below and select the available presentation display, to start the manual test.</p> |
| <p id="second-step">Click the button below and select the other available presentation display, to continue the manual test.</p> |
| <p>This test asks you to click the button twice, unless the test fails.<br> |
| <em>This test requires two or more available displays.<em></p> |
| <button id="presentBtn">Start Presentation Test</button> |
| |
| |
| <script> |
| promise_test(async t => { |
| const presentBtn = document.getElementById("presentBtn"); |
| |
| const request1 = new PresentationRequest(presentationUrls); |
| const request2 = new PresentationRequest(presentationUrls); |
| const clickWatcher = new EventWatcher(t, presentBtn, 'click'); |
| let connection1, connection2, eventWatcher1, eventWatcher2, timer; |
| |
| t.add_cleanup(() => { |
| [ |
| { connection: connection1, request: request1 }, |
| { connection: connection2, request: request2 } |
| ].forEach(p => { |
| if (p.connection) { |
| p.connection.onconnect = () => { p.connection.terminate(); }; |
| if (p.connection.state == 'closed') |
| p.request.reconnect(p.connection.id); |
| else |
| p.connection.terminate(); |
| } |
| }); |
| }); |
| |
| const disableTimeout = () => { |
| setup({explicit_timeout: true}); |
| if (timer) { |
| clearTimeout(timer); |
| timer = null; |
| } |
| }; |
| |
| const enableTimeout = () => { |
| timer = t.step_timeout(() => { |
| t.force_timeout(); |
| t.done(); |
| }, 5000); |
| } |
| |
| disableTimeout(); |
| |
| await clickWatcher.wait_for('click'); |
| presentBtn.disabled = true; |
| connection1 = await request1.start(); |
| |
| presentBtn.disabled = false; |
| document.getElementById('first-step').style.display = 'none'; |
| document.getElementById('second-step').style.display = 'block'; |
| presentBtn.innerText = 'Continue Presentation Test'; |
| eventWatcher1 = new EventWatcher(t, connection1, ['connect', 'close', 'terminate']); |
| |
| await Promise.all([ |
| eventWatcher1.wait_for('connect'), |
| (async () => { |
| await clickWatcher.wait_for('click'); |
| presentBtn.disabled = true; |
| |
| connection2 = await request2.start(); |
| enableTimeout(); |
| eventWatcher2 = new EventWatcher(t, connection2, ['connect', 'close', 'terminate']); |
| await eventWatcher2.wait_for('connect'); |
| })() |
| ]); |
| |
| connection1.close(); |
| assert_equals(connection2.state, 'connected', |
| 'Closing one presentation connection does not affect the state of the other.'); |
| |
| await eventWatcher1.wait_for('close'); |
| assert_equals(connection1.state, 'closed', 'The presentation connection is successfully closed.'); |
| |
| connection2.close(); |
| await eventWatcher2.wait_for('close'); |
| assert_equals(connection2.state, 'closed', 'The presentation connection is successfully closed.'); |
| |
| const c11 = await request1.reconnect(connection1.id); |
| assert_equals(c11, connection1, 'The promise is resolved with the existing presentation connection.'); |
| |
| const c22 = await request2.reconnect(connection2.id); |
| assert_equals(c22, connection2, 'The promise is resolved with the existing presentation connection.'); |
| |
| await Promise.all([ |
| eventWatcher1.wait_for('connect'), |
| eventWatcher2.wait_for('connect') |
| ]); |
| |
| assert_equals(connection1.state, 'connected', 'The presentation connection is successfully reconnected.'); |
| assert_equals(connection2.state, 'connected', 'The presentation connection is successfully reconnected.'); |
| |
| // Reconnecting a presentation via a different presentation request with the same presentation |
| // URLs will succeed |
| connection2.close(); |
| await eventWatcher2.wait_for('close'); |
| const c12 = await request1.reconnect(connection2.id); |
| assert_equals(c12, connection2, 'The promise is resolved with the existing presentation connection.'); |
| |
| connection1.close(); |
| await eventWatcher1.wait_for('close'); |
| const c21 = await request2.reconnect(connection1.id); |
| assert_equals(c21, connection1, 'The promise is resolved with the existing presentation connection.'); |
| |
| await Promise.all([ |
| eventWatcher1.wait_for('connect'), |
| eventWatcher2.wait_for('connect') |
| ]); |
| |
| assert_equals(connection1.state, 'connected', 'The presentation connection is successfully reconnected.'); |
| assert_equals(connection2.state, 'connected', 'The presentation connection is successfully reconnected.'); |
| connection1.terminate(); |
| connection2.terminate(); |
| |
| await Promise.all([ |
| eventWatcher1.wait_for('terminate'), |
| eventWatcher2.wait_for('terminate') |
| ]); |
| }); |
| </script> |