diff options
Diffstat (limited to 'testing/web-platform/tests/tools/wave/www/pause.html')
| -rw-r--r-- | testing/web-platform/tests/tools/wave/www/pause.html | 224 |
1 files changed, 224 insertions, 0 deletions
diff --git a/testing/web-platform/tests/tools/wave/www/pause.html b/testing/web-platform/tests/tools/wave/www/pause.html new file mode 100644 index 0000000000..4e52b6673d --- /dev/null +++ b/testing/web-platform/tests/tools/wave/www/pause.html @@ -0,0 +1,224 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <title>Session Paused - Web Platform Test Runner</title> + <link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" /> + <link rel="stylesheet" href="css/style.css" /> + <link rel="stylesheet" href="css/main.css" /> + <script src="lib/davidshimjs/qrcode.js"></script> + <script src="lib/keycodes.js"></script> + <script src="lib/wave-service.js"></script> + </head> + <body> + <section class="section"> + <div class="container site-header"> + <img src="res/wavelogo_2016.jpg" alt="WAVE Logo" class="site-logo" /> + <h1 class="title is-spaced">Session Paused</h1> + </div> + + <div id="content"> + <div id="qr-code"></div> + <div id="button-wrapper"> + <button + id="start-button" + class="button is-large is-success tabbable" + > + Continue + </button> + <button + id="results-button" + class="button is-large is-light tabbable" + > + View Result Page + </button> + </div> + <div>(Alternatively to resume the test you can just press Return)</div> + <div id="details-wrapper"> + <h3 class="title is-5 is-spaced">Details</h3> + <div class="detail"> + <div>Token:</div> + <div id="token"></div> + </div> + <div class="detail"> + <div>User Agent:</div> + <div id="user-agent"></div> + </div> + <div class="detail"> + <div>Test Types:</div> + <div id="test-types"></div> + </div> + <div class="detail"> + <div>Total Test Files:</div> + <div id="total-tests"></div> + </div> + <div class="detail"> + <div>Reference Tokens:</div> + <div id="reference-tokens"></div> + </div> + <div class="detail"> + <div>Test Timeouts:</div> + <div id="test-timeout"></div> + </div> + <div class="detail"> + <div>Test Paths:</div> + <div id="test-path"></div> + </div> + </div> + </div> + </section> + + <script> + var HOSTNAME = location.hostname; + var PORT = location.port; + var PROTOCOL = location.protocol.replace(/:/, ""); + var QUERY = location.search.replace(/\?/, ""); + var match = QUERY.match(/token=([^&]+)/); + var TOKEN = match ? match[1] : null; + if (TOKEN) + document.cookie = "resume_token=" + TOKEN + "; expires=Fri, 31 Dec 9999 23:59:59 GMT"; + var selectedTabbable = -1; + + function displaySessionConfiguration(configuration) { + var userAgent = document.getElementById("user-agent"); + userAgent.innerText = configuration.userAgent; + var testPath = document.getElementById("test-path"); + for (var i = 0; i < configuration.tests.include.length; i++) { + var path = configuration.tests.include[i]; + testPath.innerText += path + "\n"; + } + var testTypes = document.getElementById("test-types"); + testTypes.innerText = configuration.types.join(", "); + var testTimeout = document.getElementById("test-timeout"); + for (var timeout in configuration.timeouts) { + testTimeout.innerText += + timeout + ": " + configuration.timeouts[timeout] / 1000 + "s\n"; + } + var referenceTokens = document.getElementById("reference-tokens"); + if (configuration.referenceTokens.length === 0) { + referenceTokens.innerText = "none"; + } else { + for (var i = 0; i < configuration.referenceTokens.length; i++) { + var token = configuration.referenceTokens[i]; + referenceTokens.innerText += token + "\n"; + } + } + } + + function displaySessionStatus(status) { + var testTypes = document.getElementById("total-tests"); + var count = 0; + for (var api in status.testFilesCount) { + count += status.testFilesCount[api]; + } + testTypes.innerText = count; + } + + function continueTests() { + WaveService.startSession(TOKEN, function() { + WaveService.readNextTest(TOKEN, function(url) { + location.href = url; + }); + }); + } + + WaveService.addSessionEventListener(TOKEN, function(message) { + if (message.type !== "status") return; + if (message.data !== "running") return; + WaveService.readNextTest(TOKEN, function(url) { + location.href = url; + }); + }); + + var resultsUrl = + "http://" + location.host + WEB_ROOT + "overview.html" + location.search; + new QRCode(document.getElementById("qr-code"), resultsUrl); + + var resultsButton = document.getElementById("results-button"); + resultsButton.onclick = function() { + window.open(resultsUrl, "_blank"); + }; + + var continueButton = document.getElementById("start-button"); + continueButton.onclick = continueTests; + + function removeClass(element, className) { + var elementClass = element.className; + var index = elementClass.indexOf(className); + if (index !== -1) { + element.className = elementClass.replace(className, ""); + } + } + + function addClass(element, className) { + element.className += " " + className; + } + + function skipFocus(steps) { + var tabbables = document.getElementsByClassName("tabbable"); + if (selectedTabbable === -1) { + selectedTabbable = 0; + } else { + removeClass(tabbables[selectedTabbable], "focused"); + selectedTabbable += steps; + } + + if (selectedTabbable >= tabbables.length) { + selectedTabbable = 0; + } + + if (selectedTabbable < 0) { + selectedTabbable = tabbables.length - 1; + } + + tabbables[selectedTabbable].focus(); + addClass(tabbables[selectedTabbable], "focused"); + } + + function focusNext() { + skipFocus(1); + } + + function focusPrevious() { + skipFocus(-1); + } + + document.onkeydown = function(event) { + event = event || window.event; + var charCode = + typeof event.which === "number" ? event.which : event.keyCode; + + if (ACTION_KEYS.indexOf(charCode) !== -1) { + event.preventDefault(); + if (selectedTabbable === -1) { + continueTests(); + return; + } + var tabbables = document.getElementsByClassName("tabbable"); + var element = tabbables[selectedTabbable]; + if (element.type === "checkbox") { + element.checked = !element.checked; + } else { + element.click(); + } + } + + if (PREV_KEYS.indexOf(charCode) !== -1) { + focusPrevious(); + } + + if (NEXT_KEYS.indexOf(charCode) !== -1) { + focusNext(); + } + }; + + var match = location.search.match(/token=(.+)/); + var token = match[1]; + var tokenView = document.getElementById("token"); + tokenView.innerText = token; + + WaveService.readSession(token, displaySessionConfiguration); + WaveService.readSessionStatus(token, displaySessionStatus); + </script> + </body> +</html> |