| <!DOCTYPE html> |
| |
| <style> |
| body { |
| margin: 0; |
| font-family: Helvetica, sans-serif; |
| font-size: 11pt; |
| } |
| |
| body > * { |
| margin-left: 4px; |
| margin-top: 4px; |
| } |
| |
| h1 { |
| font-size: 14pt; |
| margin-top: 1.5em; |
| } |
| |
| p { |
| margin-bottom: 0.3em; |
| } |
| |
| a.clickable { |
| color: blue; |
| cursor: pointer; |
| margin-left: 0.2em; |
| } |
| |
| tr:not(.results-row) td { |
| white-space: nowrap; |
| } |
| |
| tr:not(.results-row) td:first-of-type { |
| white-space: normal; |
| } |
| |
| td:not(:first-of-type) { |
| text-transform: lowercase; |
| } |
| |
| th, td { |
| padding: 1px 4px; |
| vertical-align: top; |
| } |
| |
| td:nth-child(1) { |
| min-width: 35em; |
| } |
| |
| th:empty, td:empty { |
| padding: 0; |
| } |
| |
| th { |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| } |
| |
| dt > sup { |
| vertical-align:text-top; |
| font-size:75%; |
| } |
| |
| sup > a { |
| text-decoration: none; |
| } |
| |
| .content-container { |
| min-height: 0; |
| } |
| |
| .note { |
| color: gray; |
| font-size: smaller; |
| } |
| |
| .results-row { |
| background-color: white; |
| } |
| |
| .results-row iframe, .results-row img { |
| width: 800px; |
| height: 600px; |
| } |
| |
| .results-row[data-expanded="false"] { |
| display: none; |
| } |
| |
| #toolbar { |
| position: fixed; |
| top: 2px; |
| right: 2px; |
| text-align: right; |
| } |
| |
| .floating-panel { |
| padding: 6px; |
| background-color: rgba(255, 255, 255, 0.9); |
| border: 1px solid silver; |
| border-radius: 4px; |
| } |
| |
| .expand-button { |
| background-color: white; |
| width: 11px; |
| height: 12px; |
| border: 1px solid gray; |
| display: inline-block; |
| margin: 0 3px 0 0; |
| position: relative; |
| cursor: default; |
| } |
| |
| .current { |
| color: red; |
| } |
| |
| .current .expand-button { |
| border-color: red; |
| } |
| |
| .expand-button-text { |
| position: absolute; |
| top: -0.3em; |
| left: 1px; |
| } |
| |
| tbody .flag { |
| display: none; |
| } |
| |
| tbody.flagged .flag { |
| display: inline; |
| } |
| |
| .stopped-running-early-message { |
| border: 3px solid #d00; |
| font-weight: bold; |
| display: inline-block; |
| padding: 3px; |
| } |
| |
| .result-container { |
| display: inline-block; |
| border: 1px solid gray; |
| margin: 4px; |
| } |
| |
| .result-container iframe, .result-container img { |
| border: 0; |
| vertical-align: top; |
| } |
| |
| .leaks > table { |
| margin: 4px; |
| } |
| .leaks > td { |
| padding-left: 20px; |
| } |
| |
| #options { |
| background-color: white; |
| } |
| |
| #options-menu { |
| border: 1px solid gray; |
| border-radius: 4px; |
| margin-top: 1px; |
| padding: 2px 4px; |
| box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); |
| transition: opacity .2s; |
| text-align: left; |
| position: absolute; |
| right: 4px; |
| background-color: white; |
| } |
| |
| #options-menu label { |
| display: block; |
| } |
| |
| .hidden-menu { |
| pointer-events: none; |
| opacity: 0; |
| } |
| |
| .label { |
| padding-left: 3px; |
| font-weight: bold; |
| font-size: small; |
| background-color: silver; |
| } |
| |
| .pixel-zoom-container { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 96%; |
| margin: 10px; |
| padding: 10px; |
| display: -webkit-box; |
| display: -moz-box; |
| pointer-events: none; |
| background-color: silver; |
| border-radius: 20px; |
| border: 1px solid gray; |
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.75); |
| } |
| |
| .pixel-zoom-container > * { |
| -webkit-box-flex: 1; |
| -moz-box-flex: 1; |
| border: 1px solid black; |
| margin: 4px; |
| overflow: hidden; |
| background-color: white; |
| } |
| |
| .pixel-zoom-container .scaled-image-container { |
| position: relative; |
| overflow: hidden; |
| width: 100%; |
| height: 400px; |
| } |
| |
| .scaled-image-container > img { |
| position: absolute; |
| top: 0; |
| left: 0; |
| image-rendering: -webkit-optimize-contrast; |
| } |
| |
| #flagged-test-container { |
| position: fixed; |
| bottom: 4px; |
| right: 4px; |
| width: 50%; |
| min-width: 400px; |
| background-color: rgba(255, 255, 255, 0.75); |
| } |
| |
| #flagged-test-container > h2 { |
| margin: 0 0 4px 0; |
| } |
| |
| #flagged-tests { |
| padding: 0 5px; |
| margin: 0; |
| height: 7em; |
| overflow-y: scroll; |
| } |
| </style> |
| <style id="unexpected-style"></style> |
| |
| <script> |
| |
| class Utils |
| { |
| static matchesSelector(node, selector) |
| { |
| if (node.matches) |
| return node.matches(selector); |
| |
| if (node.webkitMatchesSelector) |
| return node.webkitMatchesSelector(selector); |
| |
| if (node.mozMatchesSelector) |
| return node.mozMatchesSelector(selector); |
| } |
| |
| static parentOfType(node, selector) |
| { |
| while (node = node.parentNode) { |
| if (Utils.matchesSelector(node, selector)) |
| return node; |
| } |
| return null; |
| } |
| |
| static stripExtension(testName) |
| { |
| // Temporary fix, also in Tools/Scripts/webkitpy/layout_tests/constrollers/test_result_writer.py, line 95. |
| // FIXME: Refactor to avoid confusing reference to both test and process names. |
| if (Utils.splitExtension(testName)[1].length > 5) |
| return testName; |
| return Utils.splitExtension(testName)[0]; |
| } |
| |
| static splitExtension(testName) |
| { |
| let index = testName.lastIndexOf('.'); |
| if (index == -1) { |
| return [testName, '']; |
| } |
| return [testName.substring(0, index), testName.substring(index + 1)]; |
| } |
| |
| static forEach(nodeList, handler) |
| { |
| Array.prototype.forEach.call(nodeList, handler); |
| } |
| |
| static toArray(nodeList) |
| { |
| return Array.prototype.slice.call(nodeList); |
| } |
| |
| static trim(string) |
| { |
| return string.replace(/^[\s\xa0]+|[\s\xa0]+$/g, ''); |
| } |
| |
| static async(func, args) |
| { |
| setTimeout(() => { func.apply(null, args); }, 50); |
| } |
| |
| static appendHTML(node, html) |
| { |
| if (node.insertAdjacentHTML) |
| node.insertAdjacentHTML('beforeEnd', html); |
| else |
| node.innerHTML += html; |
| }}; |
| |
| class TestResult |
| { |
| constructor(info, name) |
| { |
| this.name = name; |
| this.info = info; // FIXME: make this private. |
| } |
| |
| isFailureExpected() |
| { |
| let actual = this.info.actual; |
| let expected = this.info.expected || 'PASS'; |
| |
| if (actual != 'SKIP') { |
| let expectedArray = expected.split(' '); |
| let actualArray = actual.split(' '); |
| for (let actualValue of actualArray) { |
| if (expectedArray.indexOf(actualValue) == -1 && (expectedArray.indexOf('FAIL') == -1 || (actualValue != 'TEXT' && actualValue != 'IMAGE+TEXT' && actualValue != 'AUDIO'))) |
| return false; |
| } |
| } |
| return true; |
| } |
| |
| isMissingAllResults() |
| { |
| return this.info.actual == 'MISSING'; |
| } |
| |
| hasMissingResult() |
| { |
| return this.info.actual.indexOf('MISSING') != -1; |
| } |
| |
| isFlakey(pixelTestsEnabled) |
| { |
| let actualTokens = this.info.actual.split(' '); |
| let passedWithImageOnlyFailureInRetry = actualTokens[0] == 'TEXT' && actualTokens[1] == 'IMAGE'; |
| if (actualTokens[1] && this.info.actual.indexOf('PASS') != -1 || (!pixelTestsEnabled && passedWithImageOnlyFailureInRetry)) |
| return true; |
| |
| return false; |
| } |
| |
| isPass() |
| { |
| return this.info.actual == 'PASS'; |
| } |
| |
| isTextFailure() |
| { |
| return this.info.actual.indexOf('TEXT') != -1; |
| } |
| |
| isImageFailure() |
| { |
| return this.info.actual.indexOf('IMAGE') != -1; |
| } |
| |
| isAudioFailure() |
| { |
| return this.info.actual.indexOf('AUDIO') != -1; |
| } |
| |
| hasLeak() |
| { |
| return this.info.actual.indexOf('LEAK') != -1; |
| } |
| |
| isCrash() |
| { |
| return this.info.actual == 'CRASH'; |
| } |
| |
| isTimeout() |
| { |
| return this.info.actual == 'TIMEOUT'; |
| } |
| |
| isUnexpectedPass(pixelTestsEnabled) |
| { |
| if (this.info.actual == 'PASS' && this.info.expected != 'PASS') { |
| if (this.info.expected != 'IMAGE' || (pixelTestsEnabled || this.isRefTest())) |
| return true; |
| } |
| |
| return false; |
| } |
| |
| isRefTest() |
| { |
| return !!this.info.reftest_type; |
| } |
| |
| isMismatchRefTest() |
| { |
| return this.isRefTest() && this.info.reftest_type.indexOf('!=') != -1; |
| } |
| |
| isMatchRefTest() |
| { |
| return this.isRefTest() && this.info.reftest_type.indexOf('==') != -1; |
| } |
| |
| isMissingText() |
| { |
| return this.info.is_missing_text; |
| } |
| |
| isMissingImage() |
| { |
| return this.info.is_missing_image; |
| } |
| |
| isMissingAudio() |
| { |
| return this.info.is_missing_audio; |
| } |
| |
| hasStdErr() |
| { |
| return this.info.has_stderr; |
| } |
| }; |
| |
| class TestResults |
| { |
| constructor(results) |
| { |
| this._results = results; |
| |
| this.crashTests = []; |
| this.crashOther = []; |
| this.missingResults = []; |
| this.failingTests = []; |
| this.testsWithStderr = []; |
| this.timeoutTests = []; |
| this.unexpectedPassTests = []; |
| this.flakyPassTests = []; |
| |
| this.hasHttpTests = false; |
| this.hasImageFailures = false; |
| this.hasTextFailures = false; |
| |
| this._testsByName = new Map; |
| |
| this._forEachTest(this._results.tests, ''); |
| this._forOtherCrashes(this._results.other_crashes); |
| } |
| |
| date() |
| { |
| return this._results.date; |
| } |
| |
| layoutTestsDir() |
| { |
| return this._results.layout_tests_dir; |
| } |
| |
| usesExpectationsFile() |
| { |
| return this._results.uses_expectations_file; |
| } |
| |
| resultForTest(testName) |
| { |
| return this._resultsByTest[testName]; |
| } |
| |
| wasInterrupted() |
| { |
| return this._results.interrupted; |
| } |
| |
| hasPrettyPatch() |
| { |
| return this._results.has_pretty_patch; |
| } |
| |
| hasWDiff() |
| { |
| return this._results.has_wdiff; |
| } |
| |
| testWithName(testName) |
| { |
| return this._testsByName.get(testName); |
| } |
| |
| _processResultForTest(testResult) |
| { |
| this._testsByName.set(testResult.name, testResult); |
| |
| let test = testResult.name; |
| if (testResult.hasStdErr()) |
| this.testsWithStderr.push(testResult); |
| |
| this.hasHttpTests |= test.indexOf('http/') == 0; |
| |
| if (this.usesExpectationsFile()) |
| testResult.isExpected = testResult.isFailureExpected(); |
| |
| if (testResult.isTextFailure()) |
| this.hasTextFailures = true; |
| |
| if (testResult.isImageFailure()) |
| this.hasImageFailures = true; |
| |
| if (testResult.isMissingAllResults()) { |
| // FIXME: make sure that new-run-webkit-tests spits out an -actual.txt file for tests with MISSING results. |
| this.missingResults.push(testResult); |
| return; |
| } |
| |
| if (testResult.isFlakey(this._results.pixel_tests_enabled)) { |
| this.flakyPassTests.push(testResult); |
| return; |
| } |
| |
| if (testResult.isPass()) { |
| if (testResult.isUnexpectedPass(this._results.pixel_tests_enabled)) |
| this.unexpectedPassTests.push(testResult); |
| return; |
| } |
| |
| if (testResult.isCrash()) { |
| this.crashTests.push(testResult); |
| return; |
| } |
| |
| if (testResult.isTimeout()) { |
| this.timeoutTests.push(testResult); |
| return; |
| } |
| |
| this.failingTests.push(testResult); |
| } |
| |
| _forEachTest(tree, prefix) |
| { |
| for (let key in tree) { |
| let newPrefix = prefix ? (prefix + '/' + key) : key; |
| if ('actual' in tree[key]) { |
| let testObject = new TestResult(tree[key], newPrefix); |
| this._processResultForTest(testObject); |
| } else |
| this._forEachTest(tree[key], newPrefix); |
| } |
| } |
| |
| _forOtherCrashes(tree) |
| { |
| for (let key in tree) { |
| let testObject = new TestResult(tree[key], key); |
| this.crashOther.push(testObject); |
| } |
| } |
| |
| static sortByName(tests) |
| { |
| tests.sort(function (a, b) { return a.name.localeCompare(b.name) }); |
| } |
| |
| static hasUnexpectedResult(tests) |
| { |
| return tests.some(function (test) { return !test.isExpected; }); |
| } |
| }; |
| |
| class TestResultsController |
| { |
| constructor(containerElement, testResults) |
| { |
| this.containerElement = containerElement; |
| this.testResults = testResults; |
| |
| this.shouldToggleImages = true; |
| this._togglingImageInterval = null; |
| |
| this._updatePageTitle(); |
| |
| this.buildResultsTables(); |
| this.hideNonApplicableUI(); |
| this.setupSorting(); |
| this.setupOptions(); |
| } |
| |
| buildResultsTables() |
| { |
| if (this.testResults.wasInterrupted()) { |
| let interruptionMessage = document.createElement('p'); |
| interruptionMessage.textContent = 'Testing exited early'; |
| interruptionMessage.classList.add('stopped-running-early-message'); |
| this.containerElement.appendChild(interruptionMessage); |
| } |
| |
| if (this.testResults.crashTests.length) |
| this.containerElement.appendChild(this.buildOneSection(this.testResults.crashTests, 'crash-tests-table')); |
| |
| if (this.testResults.crashOther.length) |
| this.containerElement.appendChild(this.buildOneSection(this.testResults.crashOther, 'other-crash-tests-table')); |
| |
| if (this.testResults.failingTests.length) |
| this.containerElement.appendChild(this.buildOneSection(this.testResults.failingTests, 'results-table')); |
| |
| if (this.testResults.missingResults.length) |
| this.containerElement.appendChild(this.buildOneSection(this.testResults.missingResults, 'missing-table')); |
| |
| if (this.testResults.timeoutTests.length) |
| this.containerElement.appendChild(this.buildOneSection(this.testResults.timeoutTests, 'timeout-tests-table')); |
| |
| if (this.testResults.testsWithStderr.length) |
| this.containerElement.appendChild(this.buildOneSection(this.testResults.testsWithStderr, 'stderr-table')); |
| |
| if (this.testResults.flakyPassTests.length) |
| this.containerElement.appendChild(this.buildOneSection(this.testResults.flakyPassTests, 'flaky-tests-table')); |
| |
| if (this.testResults.usesExpectationsFile() && this.testResults.unexpectedPassTests.length) |
| this.containerElement.appendChild(this.buildOneSection(this.testResults.unexpectedPassTests, 'passes-table')); |
| |
| if (this.testResults.hasHttpTests) { |
| let httpdAccessLogLink = document.createElement('p'); |
| httpdAccessLogLink.innerHTML = 'httpd access log: <a href="access_log.txt">access_log.txt</a>'; |
| |
| let httpdErrorLogLink = document.createElement('p'); |
| httpdErrorLogLink.innerHTML = 'httpd error log: <a href="error_log.txt">error_log.txt</a>'; |
| |
| this.containerElement.appendChild(httpdAccessLogLink); |
| this.containerElement.appendChild(httpdErrorLogLink); |
| } |
| |
| this.updateTestlistCounts(); |
| } |
| |
| static sectionBuilderClassForTableID(tableID) |
| { |
| const idToBuilderClassMap = { |
| 'crash-tests-table' : CrashingTestsSectionBuilder, |
| 'other-crash-tests-table' : OtherCrashesSectionBuilder, |
| 'results-table' : FailingTestsSectionBuilder, |
| 'missing-table' : TestsWithMissingResultsSectionBuilder, |
| 'timeout-tests-table' : TimedOutTestsSectionBuilder, |
| 'stderr-table' : TestsWithStdErrSectionBuilder, |
| 'flaky-tests-table' : FlakyPassTestsSectionBuilder, |
| 'passes-table' : UnexpectedPassTestsSectionBuilder, |
| }; |
| return idToBuilderClassMap[tableID]; |
| } |
| |
| setupSorting() |
| { |
| let resultsTable = document.getElementById('results-table'); |
| if (!resultsTable) |
| return; |
| |
| // FIXME: Make all the tables sortable. Maybe SectionBuilder should put a TableSorter on each table. |
| resultsTable.addEventListener('click', TableSorter.handleClick, false); |
| TableSorter.sortColumn(0); |
| } |
| |
| hideNonApplicableUI() |
| { |
| // FIXME: do this all through body classnames. |
| if (!this.testResults.hasTextFailures) { |
| let textResultsHeader = document.getElementById('text-results-header'); |
| if (textResultsHeader) |
| textResultsHeader.textContent = ''; |
| } |
| |
| if (!this.testResults.hasImageFailures) { |
| let imageResultsHeader = document.getElementById('image-results-header'); |
| if (imageResultsHeader) |
| imageResultsHeader.textContent = ''; |
| |
| Utils.parentOfType(document.getElementById('toggle-images'), 'label').style.display = 'none'; |
| } |
| } |
| |
| setupOptions() |
| { |
| // FIXME: do this all through body classnames. |
| if (!this.testResults.usesExpectationsFile()) |
| Utils.parentOfType(document.getElementById('unexpected-results'), 'label').style.display = 'none'; |
| } |
| |
| buildOneSection(tests, tableID) |
| { |
| TestResults.sortByName(tests); |
| |
| let sectionBuilderClass = TestResultsController.sectionBuilderClassForTableID(tableID); |
| let sectionBuilder = new sectionBuilderClass(tests, tableID, this); |
| return sectionBuilder.build(); |
| } |
| |
| updateTestlistCounts() |
| { |
| // FIXME: do this through the data model, not through the DOM. |
| let onlyShowUnexpectedFailures = this.onlyShowUnexpectedFailures(); |
| Utils.forEach(document.querySelectorAll('.test-list-count'), count => { |
| let container = Utils.parentOfType(count, 'section'); |
| let testContainers; |
| if (onlyShowUnexpectedFailures) |
| testContainers = container.querySelectorAll('tbody:not(.expected)'); |
| else |
| testContainers = container.querySelectorAll('tbody'); |
| |
| count.textContent = testContainers.length; |
| }) |
| } |
| |
| flagAll(headerLink) |
| { |
| let tests = this.visibleTests(Utils.parentOfType(headerLink, 'section')); |
| Utils.forEach(tests, tests => { |
| let shouldFlag = true; |
| testNavigator.flagTest(tests, shouldFlag); |
| }) |
| } |
| |
| unflag(flag) |
| { |
| const shouldFlag = false; |
| testNavigator.flagTest(Utils.parentOfType(flag, 'tbody'), shouldFlag); |
| } |
| |
| visibleTests(opt_container) |
| { |
| let container = opt_container || document; |
| if (this.onlyShowUnexpectedFailures()) |
| return container.querySelectorAll('tbody:not(.expected)'); |
| else |
| return container.querySelectorAll('tbody'); |
| } |
| |
| // FIXME: this is confusing. Flip the sense around. |
| onlyShowUnexpectedFailures() |
| { |
| return document.getElementById('unexpected-results').checked; |
| } |
| |
| static _testListHeader(title) |
| { |
| let header = document.createElement('h1'); |
| header.innerHTML = title + ' (<span class=test-list-count></span>): <a href="#" class=flag-all onclick="controller.flagAll(this)">flag all</a>'; |
| return header; |
| } |
| |
| testToURL(testResult, layoutTestsPath) |
| { |
| const mappings = { |
| "http/tests/ssl/": "https://127.0.0.1:8443/ssl/", |
| "http/tests/": "http://127.0.0.1:8000/", |
| "http/wpt/": "http://localhost:8800/WebKit/", |
| "imported/w3c/web-platform-tests/": "http://localhost:8800/" |
| }; |
| |
| for (let key in mappings) { |
| if (testResult.name.startsWith(key)) |
| return mappings[key] + testResult.name.substring(key.length); |
| |
| } |
| return "file://" + layoutTestsPath + "/" + testResult.name; |
| } |
| |
| layoutTestURL(testResult) |
| { |
| if (this.shouldUseTracLinks()) |
| return this.layoutTestsBasePath() + testResult.name; |
| |
| return this.testToURL(testResult, this.layoutTestsBasePath()); |
| } |
| |
| layoutTestsBasePath() |
| { |
| let basePath; |
| if (this.shouldUseTracLinks()) { |
| let revision = this.testResults.revision; |
| basePath = 'http://trac.webkit.org'; |
| basePath += revision ? ('/export/' + revision) : '/browser'; |
| basePath += '/trunk/LayoutTests/'; |
| } else |
| basePath = this.testResults.layoutTestsDir() + '/'; |
| |
| return basePath; |
| } |
| |
| convertToLayoutTestBaseRelativeURL(fullURL) |
| { |
| if (fullURL.startsWith('file://')) { |
| let urlPrefix = 'file://' + this.layoutTestsBasePath(); |
| if (fullURL.startsWith(urlPrefix)) |
| return fullURL.substring(urlPrefix.length); |
| } |
| |
| return fullURL; |
| } |
| |
| shouldUseTracLinks() |
| { |
| return !this.testResults.layoutTestsDir() || !location.toString().indexOf('file://') == 0; |
| } |
| |
| checkServerIsRunning(event) |
| { |
| if (this.shouldUseTracLinks()) |
| return; |
| |
| let url = event.target.href; |
| if (url.startsWith("file://")) |
| return; |
| |
| event.preventDefault(); |
| fetch(url, { mode: "no-cors" }).then(() => { |
| window.location = url; |
| }, () => { |
| alert("HTTP server does not seem to be running, please use the run-webkit-httpd script"); |
| }); |
| } |
| |
| testLink(testResult) |
| { |
| return '<a class=test-link onclick="controller.checkServerIsRunning(event)" href="' + this.layoutTestURL(testResult) + '">' + testResult.name + '</a><span class=flag onclick="controller.unflag(this)"> \u2691</span>'; |
| } |
| |
| expandButtonSpan() |
| { |
| return '<span class=expand-button onclick="controller.toggleExpectations(this)"><span class=expand-button-text>+</span></span>'; |
| } |
| |
| static resultLink(testPrefix, suffix, contents) |
| { |
| return '<a class=result-link href="' + testPrefix + suffix + '" data-prefix="' + testPrefix + '">' + contents + '</a> '; |
| } |
| |
| textResultLinks(prefix) |
| { |
| let html = TestResultsController.resultLink(prefix, '-expected.txt', 'expected') + |
| TestResultsController.resultLink(prefix, '-actual.txt', 'actual') + |
| TestResultsController.resultLink(prefix, '-diff.txt', 'diff'); |
| |
| if (this.testResults.hasPrettyPatch()) |
| html += TestResultsController.resultLink(prefix, '-pretty-diff.html', 'pretty diff'); |
| |
| if (this.testResults.hasWDiff()) |
| html += TestResultsController.resultLink(prefix, '-wdiff.html', 'wdiff'); |
| |
| return html; |
| } |
| |
| flakinessDashboardURLForTests(testObjects) |
| { |
| // FIXME: just map and join here. |
| let testList = ''; |
| for (let i = 0; i < testObjects.length; ++i) { |
| testList += testObjects[i].name; |
| |
| if (i != testObjects.length - 1) |
| testList += ','; |
| } |
| |
| return 'https://results.webkit.org/?suite=layout-tests&test=' + encodeURIComponent(testList); |
| } |
| |
| _updatePageTitle() |
| { |
| let dateString = this.testResults.date(); |
| let title = document.createElement('title'); |
| title.textContent = 'Layout Test Results from ' + dateString; |
| document.head.appendChild(title); |
| } |
| |
| // Options handling. FIXME: move to a separate class? |
| updateAllOptions() |
| { |
| Utils.forEach(document.querySelectorAll('#options-menu input'), input => { input.onchange() }); |
| } |
| |
| toggleOptionsMenu() |
| { |
| let menu = document.getElementById('options-menu'); |
| menu.className = (menu.className == 'hidden-menu') ? '' : 'hidden-menu'; |
| } |
| |
| handleToggleUseNewlines() |
| { |
| OptionWriter.save(); |
| testNavigator.updateFlaggedTests(); |
| } |
| |
| handleUnexpectedResultsChange() |
| { |
| OptionWriter.save(); |
| this._updateExpectedFailures(); |
| } |
| |
| expandAllExpectations() |
| { |
| let expandLinks = this._visibleExpandLinks(); |
| for (let link of expandLinks) |
| Utils.async(link => { controller.expandExpectations(link) }, [ link ]); |
| } |
| |
| collapseAllExpectations() |
| { |
| let expandLinks = this._visibleExpandLinks(); |
| for (let link of expandLinks) |
| Utils.async(link => { controller.collapseExpectations(link) }, [ link ]); |
| } |
| |
| expandExpectations(expandLink) |
| { |
| let row = Utils.parentOfType(expandLink, 'tr'); |
| let parentTbody = row.parentNode; |
| let existingResultsRow = parentTbody.querySelector('.results-row'); |
| |
| const enDash = '\u2013'; |
| expandLink.textContent = enDash; |
| if (existingResultsRow) { |
| this._updateExpandedState(existingResultsRow, true); |
| return; |
| } |
| |
| let testName = row.getAttribute('data-test-name'); |
| let testResult = this.testResults.testWithName(testName); |
| |
| let newRow = TestResultsController._buildExpandedRowForTest(testResult, row); |
| parentTbody.appendChild(newRow); |
| |
| this._updateExpandedState(newRow, true); |
| |
| this._updateImageTogglingTimer(); |
| } |
| |
| collapseExpectations(expandLink) |
| { |
| expandLink.textContent = '+'; |
| let existingResultsRow = Utils.parentOfType(expandLink, 'tbody').querySelector('.results-row'); |
| if (existingResultsRow) |
| this._updateExpandedState(existingResultsRow, false); |
| } |
| |
| toggleExpectations(element) |
| { |
| let expandLink = element; |
| if (expandLink.className != 'expand-button-text') |
| expandLink = expandLink.querySelector('.expand-button-text'); |
| |
| if (expandLink.textContent == '+') |
| this.expandExpectations(expandLink); |
| else |
| this.collapseExpectations(expandLink); |
| } |
| |
| _updateExpandedState(row, isExpanded) |
| { |
| row.setAttribute('data-expanded', isExpanded); |
| this._updateImageTogglingTimer(); |
| } |
| |
| handleToggleImagesChange() |
| { |
| OptionWriter.save(); |
| this._updateTogglingImages(); |
| } |
| |
| _visibleExpandLinks() |
| { |
| if (this.onlyShowUnexpectedFailures()) |
| return document.querySelectorAll('tbody:not(.expected) .expand-button-text'); |
| else |
| return document.querySelectorAll('.expand-button-text'); |
| } |
| |
| static _togglingImage(prefix) |
| { |
| return '<div class=result-container><div class="label imageText"></div><img class=animatedImage data-prefix="' + prefix + '"></img></div>'; |
| } |
| |
| _updateTogglingImages() |
| { |
| this.shouldToggleImages = document.getElementById('toggle-images').checked; |
| |
| // FIXME: this is all pretty confusing. Simplify. |
| if (this.shouldToggleImages) { |
| Utils.forEach(document.querySelectorAll('table:not(#missing-table) tbody:not([mismatchreftest]) a[href$=".png"]'), TestResultsController._convertToTogglingHandler(function(prefix) { |
| return TestResultsController.resultLink(prefix, '-diffs.html', 'images'); |
| })); |
| Utils.forEach(document.querySelectorAll('table:not(#missing-table) tbody:not([mismatchreftest]) img[src$=".png"]'), TestResultsController._convertToTogglingHandler(TestResultsController._togglingImage)); |
| } else { |
| Utils.forEach(document.querySelectorAll('a[href$="-diffs.html"]'), element => { |
| TestResultsController._convertToNonTogglingHandler(element); |
| }); |
| Utils.forEach(document.querySelectorAll('.animatedImage'), TestResultsController._convertToNonTogglingHandler(function (absolutePrefix, suffix) { |
| return TestResultsController._resultIframe(absolutePrefix + suffix); |
| })); |
| } |
| |
| this._updateImageTogglingTimer(); |
| } |
| |
| _updateExpectedFailures() |
| { |
| // Gross to do this by setting stylesheet text. Use a body class! |
| document.getElementById('unexpected-style').textContent = this.onlyShowUnexpectedFailures() ? '.expected { display: none; }' : ''; |
| |
| this.updateTestlistCounts(); |
| testNavigator.onlyShowUnexpectedFailuresChanged(); |
| } |
| |
| static _buildExpandedRowForTest(testResult, row) |
| { |
| let newRow = document.createElement('tr'); |
| newRow.className = 'results-row'; |
| let newCell = document.createElement('td'); |
| newCell.colSpan = row.querySelectorAll('td').length; |
| |
| // FIXME: migrate more of code to using testResult for building the expanded content. |
| let resultLinks = row.querySelectorAll('.result-link'); |
| let hasTogglingImages = false; |
| for (let link of resultLinks) { |
| let result; |
| if (link.textContent == 'images') { |
| hasTogglingImages = true; |
| result = TestResultsController._togglingImage(link.getAttribute('data-prefix')); |
| } else |
| result = TestResultsController._resultIframe(link.href); |
| |
| Utils.appendHTML(newCell, result); |
| } |
| |
| if (testResult.hasLeak()) |
| newCell.appendChild(TestResultsController._makeLeaksCell(testResult)); |
| |
| newRow.appendChild(newCell); |
| |
| return newRow; |
| } |
| |
| static _makeLeaksCell(testResult) |
| { |
| let container = document.createElement('div'); |
| container.className = 'result-container leaks'; |
| |
| let label = document.createElement('div'); |
| label.className = 'label'; |
| label.textContent = "Leaks"; |
| container.appendChild(label); |
| |
| let leaksTable = document.createElement('table'); |
| |
| for (let leak of testResult.info.leaks) { |
| let leakRow = document.createElement('tr'); |
| |
| for (let leakedObjectType in leak) { |
| let th = document.createElement('th'); |
| th.textContent = leakedObjectType; |
| let td = document.createElement('td'); |
| |
| let url = leak[leakedObjectType]; // FIXME: when we track leaks other than documents, this might not be a URL. |
| td.textContent = controller.convertToLayoutTestBaseRelativeURL(url) |
| |
| leakRow.appendChild(th); |
| leakRow.appendChild(td); |
| } |
| |
| leaksTable.appendChild(leakRow); |
| } |
| |
| container.appendChild(leaksTable); |
| return container; |
| } |
| |
| static _resultIframe(src) |
| { |
| // FIXME: use audio tags for AUDIO tests? |
| let layoutTestsIndex = src.indexOf('LayoutTests'); |
| let name; |
| if (layoutTestsIndex != -1) { |
| let hasTrac = src.indexOf('trac.webkit.org') != -1; |
| let prefix = hasTrac ? 'trac.webkit.org/.../' : ''; |
| name = prefix + src.substring(layoutTestsIndex + 'LayoutTests/'.length); |
| } else { |
| let lastDashIndex = src.lastIndexOf('-pretty'); |
| if (lastDashIndex == -1) |
| lastDashIndex = src.lastIndexOf('-'); |
| name = src.substring(lastDashIndex + 1); |
| } |
| |
| let tagName = (src.lastIndexOf('.png') == -1) ? 'iframe' : 'img'; |
| |
| if (tagName != 'img') |
| src += '?format=txt'; |
| return '<div class=result-container><div class=label>' + name + '</div><' + tagName + ' src="' + src + '"></' + tagName + '></div>'; |
| } |
| |
| |
| static _toggleImages() |
| { |
| let images = document.querySelectorAll('.animatedImage'); |
| let imageTexts = document.querySelectorAll('.imageText'); |
| for (let i = 0, len = images.length; i < len; i++) { |
| let image = images[i]; |
| let text = imageTexts[i]; |
| if (text.textContent == 'Expected Image') { |
| text.textContent = 'Actual Image'; |
| image.src = image.getAttribute('data-prefix') + '-actual.png'; |
| } else { |
| text.textContent = 'Expected Image'; |
| image.src = image.getAttribute('data-prefix') + '-expected.png'; |
| } |
| } |
| } |
| |
| _updateImageTogglingTimer() |
| { |
| let hasVisibleAnimatedImage = document.querySelector('.results-row[data-expanded="true"] .animatedImage'); |
| if (!hasVisibleAnimatedImage) { |
| clearInterval(this._togglingImageInterval); |
| this._togglingImageInterval = null; |
| return; |
| } |
| |
| if (!this._togglingImageInterval) { |
| TestResultsController._toggleImages(); |
| this._togglingImageInterval = setInterval(TestResultsController._toggleImages, 2000); |
| } |
| } |
| |
| static _getResultContainer(node) |
| { |
| return (node.tagName == 'IMG') ? Utils.parentOfType(node, '.result-container') : node; |
| } |
| |
| static _convertToTogglingHandler(togglingImageFunction) |
| { |
| return function(node) { |
| let url = (node.tagName == 'IMG') ? node.src : node.href; |
| if (url.match('-expected.png$')) |
| TestResultsController._getResultContainer(node).remove(); |
| else if (url.match('-actual.png$')) { |
| let name = Utils.parentOfType(node, 'tbody').querySelector('.test-link').textContent; |
| TestResultsController._getResultContainer(node).outerHTML = togglingImageFunction(Utils.stripExtension(name)); |
| } |
| } |
| } |
| |
| static _convertToNonTogglingHandler(resultFunction) |
| { |
| return function(node) { |
| let prefix = node.getAttribute('data-prefix'); |
| TestResultsController._getResultContainer(node).outerHTML = resultFunction(prefix, '-expected.png', 'expected') + resultFunction(prefix, '-actual.png', 'actual'); |
| } |
| } |
| }; |
| |
| class SectionBuilder { |
| |
| constructor(tests, tableID, resultsController) |
| { |
| this._tests = tests; |
| this._table = null; |
| this._resultsController = resultsController; |
| this._tableID = tableID; |
| } |
| |
| build() |
| { |
| TestResults.sortByName(this._tests); |
| |
| let section = document.createElement('section'); |
| section.appendChild(TestResultsController._testListHeader(this.sectionTitle())); |
| if (this.hideWhenShowingUnexpectedResultsOnly()) |
| section.classList.add('expected'); |
| |
| this._table = document.createElement('table'); |
| this._table.id = this.tableID(); |
| this.addTableHeader(); |
| |
| let visibleResultsCount = 0; |
| for (let testResult of this._tests) { |
| let tbody = this.createTableRow(testResult); |
| this._table.appendChild(tbody); |
| |
| if (!this._resultsController.onlyShowUnexpectedFailures() || testResult.isExpected) |
| ++visibleResultsCount; |
| } |
| |
| section.querySelector('.test-list-count').textContent = visibleResultsCount; |
| section.appendChild(this._table); |
| return section; |
| } |
| |
| createTableRow(testResult) |
| { |
| let tbody = document.createElement('tbody'); |
| if (testResult.isExpected) |
| tbody.classList.add('expected'); |
| |
| let row = document.createElement('tr'); |
| row.setAttribute('data-test-name', testResult.name); |
| tbody.appendChild(row); |
| |
| let testNameCell = document.createElement('td'); |
| this.fillTestCell(testResult, testNameCell); |
| row.appendChild(testNameCell); |
| |
| let resultCell = document.createElement('td'); |
| this.fillTestResultCell(testResult, resultCell); |
| row.appendChild(resultCell); |
| |
| let historyCell = this.createHistoryCell(testResult); |
| if (historyCell) |
| row.appendChild(historyCell); |
| |
| return tbody; |
| } |
| |
| hideWhenShowingUnexpectedResultsOnly() |
| { |
| return !TestResults.hasUnexpectedResult(this._tests); |
| } |
| |
| addTableHeader() |
| { |
| } |
| |
| fillTestCell(testResult, cell) |
| { |
| let testLink = this.linkifyTestName() ? this._resultsController.testLink(testResult) : testResult.name; |
| if (this.rowsAreExpandable()) { |
| cell.innerHTML = this._resultsController.expandButtonSpan() + testLink; |
| return; |
| } |
| |
| cell.innerHTML = testLink; |
| } |
| |
| fillTestResultCell(testResult, cell) |
| { |
| } |
| |
| createHistoryCell(testResult) |
| { |
| let historyCell = document.createElement('td'); |
| historyCell.innerHTML = '<a href="' + this._resultsController.flakinessDashboardURLForTests([testResult]) + '">history</a>' |
| return historyCell; |
| } |
| |
| tableID() |
| { |
| return this._tableID; |
| } |
| |
| rowsAreExpandable() |
| { |
| return true; |
| } |
| |
| linkifyTestName() |
| { |
| return true; |
| } |
| |
| sectionTitle() { return ''; } |
| }; |
| |
| class FailuresSectionBuilder extends SectionBuilder { |
| |
| addTableHeader() |
| { |
| let header = document.createElement('thead'); |
| let html = '<th>test</th><th id="text-results-header">results</th><th id="image-results-header">image results</th>'; |
| |
| if (this._resultsController.testResults.usesExpectationsFile()) |
| html += '<th>actual failure</th><th>expected failure</th>'; |
| |
| html += '<th><a href="' + this._resultsController.flakinessDashboardURLForTests(this._tests) + '">history</a></th>'; |
| |
| if (this.tableID() == 'flaky-tests-table') // FIXME: use the classes, Luke! |
| html += '<th>failures</th>'; |
| |
| header.innerHTML = html; |
| this._table.appendChild(header); |
| } |
| |
| createTableRow(testResult) |
| { |
| let tbody = document.createElement('tbody'); |
| if (testResult.isExpected) |
| tbody.classList.add('expected'); |
| |
| if (testResult.isMismatchRefTest()) |
| tbody.setAttribute('mismatchreftest', 'true'); |
| |
| let row = document.createElement('tr'); |
| row.setAttribute('data-test-name', testResult.name); |
| tbody.appendChild(row); |
| |
| let testNameCell = document.createElement('td'); |
| this.fillTestCell(testResult, testNameCell); |
| row.appendChild(testNameCell); |
| |
| let resultCell = document.createElement('td'); |
| this.fillTestResultCell(testResult, resultCell); |
| row.appendChild(resultCell); |
| |
| if (testResult.isTextFailure()) |
| this.appendTextFailureLinks(testResult, resultCell); |
| |
| if (testResult.isAudioFailure()) |
| this.appendAudioFailureLinks(testResult, resultCell); |
| |
| if (testResult.hasMissingResult()) |
| this.appendActualOnlyLinks(testResult, resultCell); |
| |
| let actualTokens = testResult.info.actual.split(/\s+/); |
| |
| let testPrefix = Utils.stripExtension(testResult.name); |
| let imageResults = this.imageResultLinks(testResult, testPrefix, actualTokens[0]); |
| if (!imageResults && actualTokens.length > 1) |
| imageResults = this.imageResultLinks(testResult, 'retries/' + testPrefix, actualTokens[1]); |
| |
| let imageResultsCell = document.createElement('td'); |
| imageResultsCell.innerHTML = imageResults; |
| row.appendChild(imageResultsCell); |
| |
| if (this._resultsController.testResults.usesExpectationsFile() || actualTokens.length) { |
| let actualCell = document.createElement('td'); |
| actualCell.textContent = testResult.info.actual; |
| row.appendChild(actualCell); |
| } |
| |
| if (this._resultsController.testResults.usesExpectationsFile()) { |
| let expectedCell = document.createElement('td'); |
| expectedCell.textContent = testResult.hasMissingResult() ? '' : testResult.info.expected; |
| row.appendChild(expectedCell); |
| } |
| |
| let historyCell = this.createHistoryCell(testResult); |
| if (historyCell) |
| row.appendChild(historyCell); |
| |
| return tbody; |
| } |
| |
| appendTextFailureLinks(testResult, cell) |
| { |
| cell.innerHTML += this._resultsController.textResultLinks(Utils.stripExtension(testResult.name)); |
| } |
| |
| appendAudioFailureLinks(testResult, cell) |
| { |
| let prefix = Utils.stripExtension(testResult.name); |
| cell.innerHTML += TestResultsController.resultLink(prefix, '-expected.wav', 'expected audio') |
| + TestResultsController.resultLink(prefix, '-actual.wav', 'actual audio') |
| + TestResultsController.resultLink(prefix, '-diff.txt', 'textual diff'); |
| } |
| |
| appendActualOnlyLinks(testResult, cell) |
| { |
| let prefix = Utils.stripExtension(testResult.name); |
| if (testResult.isMissingAudio()) |
| cell.innerHTML += TestResultsController.resultLink(prefix, '-actual.wav', 'audio result'); |
| |
| if (testResult.isMissingText()) |
| cell.innerHTML += TestResultsController.resultLink(prefix, '-actual.txt', 'result'); |
| } |
| |
| imageResultLinks(testResult, testPrefix, resultToken) |
| { |
| let result = ''; |
| if (resultToken.indexOf('IMAGE') != -1) { |
| let testExtension = Utils.splitExtension(testResult.name)[1]; |
| |
| if (testResult.isMismatchRefTest()) { |
| result += TestResultsController.resultLink(this._resultsController.layoutTestsBasePath() + testPrefix, '-expected-mismatch.' + testExtension, 'ref mismatch'); |
| result += TestResultsController.resultLink(testPrefix, '-actual.png', 'actual'); |
| } else { |
| if (testResult.isMatchRefTest()) |
| result += TestResultsController.resultLink(this._resultsController.layoutTestsBasePath() + testPrefix, '-expected.' + testExtension, 'reference'); |
| |
| if (this._resultsController.shouldToggleImages) |
| result += TestResultsController.resultLink(testPrefix, '-diffs.html', 'images'); |
| else { |
| result += TestResultsController.resultLink(testPrefix, '-expected.png', 'expected'); |
| result += TestResultsController.resultLink(testPrefix, '-actual.png', 'actual'); |
| } |
| |
| let diff = testResult.info.image_diff_percent; |
| result += TestResultsController.resultLink(testPrefix, '-diff.png', 'diff (' + diff + '%)'); |
| } |
| } |
| |
| if (testResult.hasMissingResult() && testResult.isMissingImage()) |
| result += TestResultsController.resultLink(testPrefix, '-actual.png', 'png result'); |
| |
| return result; |
| } |
| }; |
| |
| class FailingTestsSectionBuilder extends FailuresSectionBuilder { |
| sectionTitle() { return 'Tests that failed text/pixel/audio diff'; } |
| }; |
| |
| class TestsWithMissingResultsSectionBuilder extends FailuresSectionBuilder { |
| sectionTitle() { return 'Tests that had no expected results (probably new)'; } |
| |
| rowsAreExpandable() |
| { |
| return false; |
| } |
| }; |
| |
| class FlakyPassTestsSectionBuilder extends FailuresSectionBuilder { |
| sectionTitle() { return 'Flaky tests (failed the first run and passed on retry)'; } |
| }; |
| |
| class UnexpectedPassTestsSectionBuilder extends SectionBuilder { |
| sectionTitle() { return 'Tests expected to fail but passed'; } |
| |
| addTableHeader() |
| { |
| let header = document.createElement('thead'); |
| header.innerHTML = '<th>test</th><th>expected failure</th><th>history</th>'; |
| this._table.appendChild(header); |
| } |
| |
| fillTestResultCell(testResult, cell) |
| { |
| cell.innerHTML = testResult.info.expected; |
| } |
| |
| rowsAreExpandable() |
| { |
| return false; |
| } |
| }; |
| |
| class TestsWithStdErrSectionBuilder extends SectionBuilder { |
| sectionTitle() { return 'Tests that had stderr output'; } |
| hideWhenShowingUnexpectedResultsOnly() { return false; } |
| |
| fillTestResultCell(testResult, cell) |
| { |
| cell.innerHTML = TestResultsController.resultLink(Utils.stripExtension(testResult.name), '-stderr.txt', 'stderr'); |
| } |
| }; |
| |
| class TimedOutTestsSectionBuilder extends SectionBuilder { |
| sectionTitle() { return 'Tests that timed out'; } |
| |
| fillTestResultCell(testResult, cell) |
| { |
| // FIXME: only include timeout actual/diff results here if we actually spit out results for timeout tests. |
| cell.innerHTML = this._resultsController.textResultLinks(Utils.stripExtension(testResult.name)); |
| } |
| }; |
| |
| class CrashingTestsSectionBuilder extends SectionBuilder { |
| sectionTitle() { return 'Tests that crashed'; } |
| |
| fillTestResultCell(testResult, cell) |
| { |
| cell.innerHTML = TestResultsController.resultLink(Utils.stripExtension(testResult.name), '-crash-log.txt', 'crash log') |
| + TestResultsController.resultLink(Utils.stripExtension(testResult.name), '-sample.txt', 'sample'); |
| } |
| }; |
| |
| class OtherCrashesSectionBuilder extends SectionBuilder { |
| sectionTitle() { return 'Other crashes'; } |
| fillTestResultCell(testResult, cell) |
| { |
| cell.innerHTML = TestResultsController.resultLink(Utils.stripExtension(testResult.name), '-crash-log.txt', 'crash log'); |
| } |
| |
| createHistoryCell(testResult) |
| { |
| return null; |
| } |
| |
| linkifyTestName() |
| { |
| return false; |
| } |
| }; |
| |
| class PixelZoomer { |
| constructor() |
| { |
| this.showOnDelay = true; |
| this._zoomFactor = 6; |
| |
| this._resultWidth = 800; |
| this._resultHeight = 600; |
| |
| this._percentX = 0; |
| this._percentY = 0; |
| |
| document.addEventListener('mousemove', this, false); |
| document.addEventListener('mouseout', this, false); |
| } |
| |
| _zoomedResultWidth() |
| { |
| return this._resultWidth * this._zoomFactor; |
| } |
| |
| _zoomedResultHeight() |
| { |
| return this._resultHeight * this._zoomFactor; |
| } |
| |
| _zoomImageContainer(url) |
| { |
| let container = document.createElement('div'); |
| container.className = 'zoom-image-container'; |
| |
| let title = url.match(/\-([^\-]*)\.png/)[1]; |
| |
| let label = document.createElement('div'); |
| label.className = 'label'; |
| label.appendChild(document.createTextNode(title)); |
| container.appendChild(label); |
| |
| let imageContainer = document.createElement('div'); |
| imageContainer.className = 'scaled-image-container'; |
| |
| let image = new Image(); |
| image.src = url; |
| image.style.width = this._zoomedResultWidth() + 'px'; |
| image.style.height = this._zoomedResultHeight() + 'px'; |
| image.style.border = '1px solid black'; |
| imageContainer.appendChild(image); |
| container.appendChild(imageContainer); |
| |
| return container; |
| } |
| |
| _createContainer(e) |
| { |
| let tbody = Utils.parentOfType(e.target, 'tbody'); |
| let row = tbody.querySelector('tr'); |
| let imageDiffLinks = row.querySelectorAll('a[href$=".png"]'); |
| |
| let container = document.createElement('div'); |
| container.className = 'pixel-zoom-container'; |
| |
| let html = ''; |
| |
| let togglingImageLink = row.querySelector('a[href$="-diffs.html"]'); |
| if (togglingImageLink) { |
| let prefix = togglingImageLink.getAttribute('data-prefix'); |
| container.appendChild(this._zoomImageContainer(prefix + '-expected.png')); |
| container.appendChild(this._zoomImageContainer(prefix + '-actual.png')); |
| } |
| |
| for (let link of imageDiffLinks) |
| container.appendChild(this._zoomImageContainer(link.href)); |
| |
| document.body.appendChild(container); |
| this._drawAll(); |
| } |
| |
| _draw(imageContainer) |
| { |
| let image = imageContainer.querySelector('img'); |
| let containerBounds = imageContainer.getBoundingClientRect(); |
| image.style.left = (containerBounds.width / 2 - this._percentX * this._zoomedResultWidth()) + 'px'; |
| image.style.top = (containerBounds.height / 2 - this._percentY * this._zoomedResultHeight()) + 'px'; |
| } |
| |
| _drawAll() |
| { |
| Utils.forEach(document.querySelectorAll('.pixel-zoom-container .scaled-image-container'), element => { this._draw(element) }); |
| } |
| |
| handleEvent(event) |
| { |
| if (event.type == 'mousemove') { |
| this._handleMouseMove(event); |
| return; |
| } |
| |
| if (event.type == 'mouseout') { |
| this._handleMouseOut(event); |
| return; |
| } |
| } |
| |
| _handleMouseOut(event) |
| { |
| if (event.relatedTarget && event.relatedTarget.tagName != 'IFRAME') |
| return; |
| |
| // If e.relatedTarget is null, we've moused out of the document. |
| let container = document.querySelector('.pixel-zoom-container'); |
| if (container) |
| container.remove(); |
| } |
| |
| _handleMouseMove(event) |
| { |
| if (this._mouseMoveTimeout) { |
| clearTimeout(this._mouseMoveTimeout); |
| this._mouseMoveTimeout = 0; |
| } |
| |
| if (Utils.parentOfType(event.target, '.pixel-zoom-container')) |
| return; |
| |
| let container = document.querySelector('.pixel-zoom-container'); |
| |
| let resultContainer = (event.target.className == 'result-container') ? event.target : Utils.parentOfType(event.target, '.result-container'); |
| if (!resultContainer || !resultContainer.querySelector('img')) { |
| if (container) |
| container.remove(); |
| return; |
| } |
| |
| let targetLocation = event.target.getBoundingClientRect(); |
| this._percentX = (event.clientX - targetLocation.left) / targetLocation.width; |
| this._percentY = (event.clientY - targetLocation.top) / targetLocation.height; |
| |
| if (!container) { |
| if (this.showOnDelay) { |
| this._mouseMoveTimeout = setTimeout(() => { |
| this._createContainer(event); |
| }, 400); |
| return; |
| } |
| |
| this._createContainer(event); |
| return; |
| } |
| |
| this._drawAll(); |
| } |
| }; |
| |
| class TableSorter |
| { |
| static _forwardArrow() |
| { |
| return '<svg style="width:10px;height:10px"><polygon points="0,0 10,0 5,10" style="fill:#ccc"></svg>'; |
| } |
| |
| static _backwardArrow() |
| { |
| return '<svg style="width:10px;height:10px"><polygon points="0,10 10,10 5,0" style="fill:#ccc"></svg>'; |
| } |
| |
| static _sortedContents(header, arrow) |
| { |
| return arrow + ' ' + Utils.trim(header.textContent) + ' ' + arrow; |
| } |
| |
| static _updateHeaderClassNames(newHeader) |
| { |
| let sortHeader = document.querySelector('.sortHeader'); |
| if (sortHeader) { |
| if (sortHeader == newHeader) { |
| let isAlreadyReversed = sortHeader.classList.contains('reversed'); |
| if (isAlreadyReversed) |
| sortHeader.classList.remove('reversed'); |
| else |
| sortHeader.classList.add('reversed'); |
| } else { |
| sortHeader.textContent = sortHeader.textContent; |
| sortHeader.classList.remove('sortHeader'); |
| sortHeader.classList.remove('reversed'); |
| } |
| } |
| |
| newHeader.classList.add('sortHeader'); |
| } |
| |
| static _textContent(tbodyRow, column) |
| { |
| return tbodyRow.querySelectorAll('td')[column].textContent; |
| } |
| |
| static _sortRows(newHeader, reversed) |
| { |
| let testsTable = document.getElementById('results-table'); |
| let headers = Utils.toArray(testsTable.querySelectorAll('th')); |
| let sortColumn = headers.indexOf(newHeader); |
| |
| let rows = Utils.toArray(testsTable.querySelectorAll('tbody')); |
| |
| rows.sort(function(a, b) { |
| // Only need to support lexicographic sort for now. |
| let aText = TableSorter._textContent(a, sortColumn); |
| let bText = TableSorter._textContent(b, sortColumn); |
| |
| // Forward sort equal values by test name. |
| if (sortColumn && aText == bText) { |
| let aTestName = TableSorter._textContent(a, 0); |
| let bTestName = TableSorter._textContent(b, 0); |
| if (aTestName == bTestName) |
| return 0; |
| return aTestName < bTestName ? -1 : 1; |
| } |
| |
| if (reversed) |
| return aText < bText ? 1 : -1; |
| else |
| return aText < bText ? -1 : 1; |
| }); |
| |
| for (let row of rows) |
| testsTable.appendChild(row); |
| } |
| |
| static sortColumn(columnNumber) |
| { |
| let newHeader = document.getElementById('results-table').querySelectorAll('th')[columnNumber]; |
| TableSorter._sort(newHeader); |
| } |
| |
| static handleClick(e) |
| { |
| let newHeader = e.target; |
| if (newHeader.localName != 'th') |
| return; |
| TableSorter._sort(newHeader); |
| } |
| |
| static _sort(newHeader) |
| { |
| TableSorter._updateHeaderClassNames(newHeader); |
| |
| let reversed = newHeader.classList.contains('reversed'); |
| let sortArrow = reversed ? TableSorter._backwardArrow() : TableSorter._forwardArrow(); |
| newHeader.innerHTML = TableSorter._sortedContents(newHeader, sortArrow); |
| |
| TableSorter._sortRows(newHeader, reversed); |
| } |
| }; |
| |
| class OptionWriter { |
| static save() |
| { |
| let options = document.querySelectorAll('label input'); |
| let data = {}; |
| for (let option of options) |
| data[option.id] = option.checked; |
| |
| try { |
| localStorage.setItem(OptionWriter._key, JSON.stringify(data)); |
| } catch (err) { |
| if (err.name != "SecurityError") |
| throw err; |
| } |
| } |
| |
| static apply() |
| { |
| let json; |
| try { |
| json = localStorage.getItem(OptionWriter._key); |
| } catch (err) { |
| if (err.name != "SecurityError") |
| throw err; |
| } |
| |
| if (!json) { |
| controller.updateAllOptions(); |
| return; |
| } |
| |
| let data = JSON.parse(json); |
| for (let id in data) { |
| let input = document.getElementById(id); |
| if (input) |
| input.checked = data[id]; |
| } |
| controller.updateAllOptions(); |
| } |
| |
| static get _key() |
| { |
| return 'run-webkit-tests-options'; |
| } |
| }; |
| |
| let testResults; |
| function ADD_RESULTS(input) |
| { |
| testResults = new TestResults(input); |
| } |
| </script> |
| |
| <script src="full_results.json"></script> |
| |
| <script> |
| |
| class TestNavigator |
| { |
| constructor() { |
| this.currentTestIndex = -1; |
| this.flaggedTests = {}; |
| document.addEventListener('keypress', this, false); |
| } |
| |
| handleEvent(event) |
| { |
| if (event.type == 'keypress') { |
| this.handleKeyEvent(event); |
| return; |
| } |
| } |
| |
| handleKeyEvent(event) |
| { |
| if (event.metaKey || event.shiftKey || event.ctrlKey) |
| return; |
| |
| switch (String.fromCharCode(event.charCode)) { |
| case 'i': |
| this._scrollToFirstTest(); |
| break; |
| case 'j': |
| this._scrollToNextTest(); |
| break; |
| case 'k': |
| this._scrollToPreviousTest(); |
| break; |
| case 'l': |
| this._scrollToLastTest(); |
| break; |
| case 'e': |
| this._expandCurrentTest(); |
| break; |
| case 'c': |
| this._collapseCurrentTest(); |
| break; |
| case 't': |
| this._toggleCurrentTest(); |
| break; |
| case 'f': |
| this._toggleCurrentTestFlagged(); |
| break; |
| } |
| } |
| |
| _scrollToFirstTest() |
| { |
| if (this._setCurrentTest(0)) |
| this._scrollToCurrentTest(); |
| } |
| |
| _scrollToLastTest() |
| { |
| let links = controller.visibleTests(); |
| if (this._setCurrentTest(links.length - 1)) |
| this._scrollToCurrentTest(); |
| } |
| |
| _scrollToNextTest() |
| { |
| if (this.currentTestIndex == -1) |
| this._scrollToFirstTest(); |
| else if (this._setCurrentTest(this.currentTestIndex + 1)) |
| this._scrollToCurrentTest(); |
| } |
| |
| _scrollToPreviousTest() |
| { |
| if (this.currentTestIndex == -1) |
| this._scrollToLastTest(); |
| else if (this._setCurrentTest(this.currentTestIndex - 1)) |
| this._scrollToCurrentTest(); |
| } |
| |
| _currentTestLink() |
| { |
| let links = controller.visibleTests(); |
| return links[this.currentTestIndex]; |
| } |
| |
| _currentTestExpandLink() |
| { |
| return this._currentTestLink().querySelector('.expand-button-text'); |
| } |
| |
| _expandCurrentTest() |
| { |
| controller.expandExpectations(this._currentTestExpandLink()); |
| } |
| |
| _collapseCurrentTest() |
| { |
| controller.collapseExpectations(this._currentTestExpandLink()); |
| } |
| |
| _toggleCurrentTest() |
| { |
| controller.toggleExpectations(this._currentTestExpandLink()); |
| } |
| |
| _toggleCurrentTestFlagged() |
| { |
| let testLink = this._currentTestLink(); |
| this.flagTest(testLink, !testLink.classList.contains('flagged')); |
| } |
| |
| // FIXME: Test navigator shouldn't know anything about flagging. It should probably call out to TestFlagger or something. |
| // FIXME: Batch flagging (avoid updateFlaggedTests on each test). |
| flagTest(testTbody, shouldFlag) |
| { |
| let testName = testTbody.querySelector('.test-link').innerText; |
| |
| if (shouldFlag) { |
| testTbody.classList.add('flagged'); |
| this.flaggedTests[testName] = 1; |
| } else { |
| testTbody.classList.remove('flagged'); |
| delete this.flaggedTests[testName]; |
| } |
| |
| this.updateFlaggedTests(); |
| } |
| |
| updateFlaggedTests() |
| { |
| let flaggedTestTextbox = document.getElementById('flagged-tests'); |
| if (!flaggedTestTextbox) { |
| let flaggedTestContainer = document.createElement('div'); |
| flaggedTestContainer.id = 'flagged-test-container'; |
| flaggedTestContainer.className = 'floating-panel'; |
| flaggedTestContainer.innerHTML = '<h2>Flagged Tests</h2><pre id="flagged-tests" contentEditable></pre>'; |
| document.body.appendChild(flaggedTestContainer); |
| |
| flaggedTestTextbox = document.getElementById('flagged-tests'); |
| } |
| |
| let flaggedTests = Object.keys(this.flaggedTests); |
| flaggedTests.sort(); |
| let separator = document.getElementById('use-newlines').checked ? '\n' : ' '; |
| flaggedTestTextbox.innerHTML = flaggedTests.join(separator); |
| document.getElementById('flagged-test-container').style.display = flaggedTests.length ? '' : 'none'; |
| } |
| |
| _setCurrentTest(testIndex) |
| { |
| let links = controller.visibleTests(); |
| if (testIndex < 0 || testIndex >= links.length) |
| return false; |
| |
| let currentTest = links[this.currentTestIndex]; |
| if (currentTest) |
| currentTest.classList.remove('current'); |
| |
| this.currentTestIndex = testIndex; |
| |
| currentTest = links[this.currentTestIndex]; |
| currentTest.classList.add('current'); |
| |
| return true; |
| } |
| |
| _scrollToCurrentTest() |
| { |
| let targetLink = this._currentTestLink(); |
| if (!targetLink) |
| return; |
| |
| let rowRect = targetLink.getBoundingClientRect(); |
| // rowRect is in client coords (i.e. relative to viewport), so we just want to add its top to the current scroll position. |
| document.scrollingElement.scrollTop += rowRect.top; |
| } |
| |
| onlyShowUnexpectedFailuresChanged() |
| { |
| let currentTest = document.querySelector('.current'); |
| if (!currentTest) |
| return; |
| |
| // If our currentTest became hidden, reset the currentTestIndex. |
| if (controller.onlyShowUnexpectedFailures() && currentTest.classList.contains('expected')) |
| this._scrollToFirstTest(); |
| else { |
| // Recompute this.currentTestIndex |
| let links = controller.visibleTests(); |
| this.currentTestIndex = links.indexOf(currentTest); |
| } |
| } |
| }; |
| |
| function handleMouseDown(e) |
| { |
| if (!Utils.parentOfType(e.target, '#options-menu') && e.target.id != 'options-link') |
| document.getElementById('options-menu').className = 'hidden-menu'; |
| } |
| |
| document.addEventListener('mousedown', handleMouseDown, false); |
| |
| let controller; |
| let pixelZoomer; |
| let testNavigator; |
| |
| function generatePage() |
| { |
| let container = document.getElementById('main-content'); |
| |
| controller = new TestResultsController(container, testResults); |
| pixelZoomer = new PixelZoomer(); |
| testNavigator = new TestNavigator(); |
| |
| OptionWriter.apply(); |
| |
| console.log("rendered test results page!"); |
| } |
| |
| window.addEventListener('load', generatePage, false); |
| |
| </script> |
| <body> |
| |
| <div class="content-container"> |
| <div id="toolbar" class="floating-panel"> |
| <div class="note">Use the i, j, k and l keys to navigate, e, c to expand and collapse, and f to flag</div> |
| <a class="clickable" onclick="controller.expandAllExpectations()">expand all</a> |
| <a class="clickable" onclick="controller.collapseAllExpectations()">collapse all</a> |
| <a class="clickable" id=options-link onclick="controller.toggleOptionsMenu()">options</a> |
| <div id="options-menu" class="hidden-menu"> |
| <label><input id="unexpected-results" type="checkbox" checked onchange="controller.handleUnexpectedResultsChange()">Only unexpected results</label> |
| <label><input id="toggle-images" type="checkbox" checked onchange="controller.handleToggleImagesChange()">Toggle images</label> |
| <label title="Use newlines instead of spaces to separate flagged tests"><input id="use-newlines" type="checkbox" checked onchange="controller.handleToggleUseNewlines()">Use newlines in flagged list</label> |
| </div> |
| </div> |
| |
| <div id="main-content"></div> |
| |
| </body> |
