| <!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; |
| } |
| |
| 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; |
| } |
| |
| td { |
| padding: 1px 4px; |
| } |
| |
| th:empty, td:empty { |
| padding: 0; |
| } |
| |
| th { |
| -webkit-user-select: none; |
| -moz-user-select: 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: 4px; |
| 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; |
| } |
| |
| #options { |
| background-color: white; |
| } |
| |
| #options-menu { |
| border: 1px solid; |
| margin-top: 1px; |
| padding: 2px 4px; |
| box-shadow: 2px 2px 2px #888; |
| -webkit-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> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| var g_state; |
| function globalState() |
| { |
| if (!g_state) { |
| g_state = { |
| crashTests: [], |
| flakyPassTests: [], |
| hasHttpTests: false, |
| hasImageFailures: false, |
| hasTextFailures: false, |
| missingResults: [], |
| results: {}, |
| shouldToggleImages: true, |
| failingTests: [], |
| testsWithStderr: [], |
| timeoutTests: [], |
| unexpectedPassTests: [] |
| } |
| } |
| return g_state; |
| } |
| |
| function ADD_RESULTS(input) |
| { |
| globalState().results = input; |
| } |
| </script> |
| |
| <script src="full_results.json"></script> |
| |
| <script> |
| function splitExtension(test) |
| { |
| var index = test.lastIndexOf('.'); |
| return [test.substring(0, index), test.substring(index + 1)]; |
| } |
| |
| function stripExtension(test) |
| { |
| return splitExtension(test)[0]; |
| } |
| |
| function matchesSelector(node, selector) |
| { |
| if (node.webkitMatchesSelector) |
| return node.webkitMatchesSelector(selector); |
| |
| if (node.mozMatchesSelector) |
| return node.mozMatchesSelector(selector); |
| } |
| |
| function parentOfType(node, selector) |
| { |
| while (node = node.parentNode) { |
| if (matchesSelector(node, selector)) |
| return node; |
| } |
| return null; |
| } |
| |
| function remove(node) |
| { |
| node.parentNode.removeChild(node); |
| } |
| |
| function forEach(nodeList, handler) |
| { |
| Array.prototype.forEach.call(nodeList, handler); |
| } |
| |
| function resultIframe(src) |
| { |
| // FIXME: use audio tags for AUDIO tests? |
| var layoutTestsIndex = src.indexOf('LayoutTests'); |
| var name; |
| if (layoutTestsIndex != -1) { |
| var hasTrac = src.indexOf('trac.webkit.org') != -1; |
| var prefix = hasTrac ? 'trac.webkit.org/.../' : ''; |
| name = prefix + src.substring(layoutTestsIndex + 'LayoutTests/'.length); |
| } else { |
| var lastDashIndex = src.lastIndexOf('-pretty'); |
| if (lastDashIndex == -1) |
| lastDashIndex = src.lastIndexOf('-'); |
| name = src.substring(lastDashIndex + 1); |
| } |
| |
| var 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>'; |
| } |
| |
| function togglingImage(prefix) |
| { |
| return '<div class=result-container><div class="label imageText"></div><img class=animatedImage data-prefix="' + |
| prefix + '"></img></div>'; |
| } |
| |
| function toggleExpectations(element) |
| { |
| var expandLink = element; |
| if (expandLink.className != 'expand-button-text') |
| expandLink = expandLink.querySelector('.expand-button-text'); |
| |
| if (expandLink.textContent == '+') |
| expandExpectations(expandLink); |
| else |
| collapseExpectations(expandLink); |
| } |
| |
| function collapseExpectations(expandLink) |
| { |
| expandLink.textContent = '+'; |
| var existingResultsRow = parentOfType(expandLink, 'tbody').querySelector('.results-row'); |
| if (existingResultsRow) |
| updateExpandedState(existingResultsRow, false); |
| } |
| |
| function updateExpandedState(row, isExpanded) |
| { |
| row.setAttribute('data-expanded', isExpanded); |
| updateImageTogglingTimer(); |
| } |
| |
| function appendHTML(node, html) |
| { |
| if (node.insertAdjacentHTML) |
| node.insertAdjacentHTML('beforeEnd', html); |
| else |
| node.innerHTML += html; |
| } |
| |
| function expandExpectations(expandLink) |
| { |
| var row = parentOfType(expandLink, 'tr'); |
| var parentTbody = row.parentNode; |
| var existingResultsRow = parentTbody.querySelector('.results-row'); |
| |
| var enDash = '\u2013'; |
| expandLink.textContent = enDash; |
| if (existingResultsRow) { |
| updateExpandedState(existingResultsRow, true); |
| return; |
| } |
| |
| var newRow = document.createElement('tr'); |
| newRow.className = 'results-row'; |
| var newCell = document.createElement('td'); |
| newCell.colSpan = row.querySelectorAll('td').length; |
| |
| var resultLinks = row.querySelectorAll('.result-link'); |
| var hasTogglingImages = false; |
| for (var i = 0; i < resultLinks.length; i++) { |
| var link = resultLinks[i]; |
| var result; |
| if (link.textContent == 'images') { |
| hasTogglingImages = true; |
| result = togglingImage(link.getAttribute('data-prefix')); |
| } else |
| result = resultIframe(link.href); |
| |
| appendHTML(newCell, result); |
| } |
| |
| newRow.appendChild(newCell); |
| parentTbody.appendChild(newRow); |
| |
| updateExpandedState(newRow, true); |
| |
| updateImageTogglingTimer(); |
| } |
| |
| function updateImageTogglingTimer() |
| { |
| var hasVisibleAnimatedImage = document.querySelector('.results-row[data-expanded="true"] .animatedImage'); |
| if (!hasVisibleAnimatedImage) { |
| clearInterval(globalState().togglingImageInterval); |
| globalState().togglingImageInterval = null; |
| return; |
| } |
| |
| if (!globalState().togglingImageInterval) { |
| toggleImages(); |
| globalState().togglingImageInterval = setInterval(toggleImages, 2000); |
| } |
| } |
| |
| function async(func, args) |
| { |
| setTimeout(function() { func.apply(null, args); }, 100); |
| } |
| |
| function visibleTests(opt_container) |
| { |
| var container = opt_container || document; |
| if (onlyShowUnexpectedFailures()) |
| return container.querySelectorAll('tbody:not(.expected)'); |
| else |
| return container.querySelectorAll('tbody'); |
| } |
| |
| function visibleExpandLinks() |
| { |
| if (onlyShowUnexpectedFailures()) |
| return document.querySelectorAll('tbody:not(.expected) .expand-button-text'); |
| else |
| return document.querySelectorAll('.expand-button-text'); |
| } |
| |
| function expandAllExpectations() |
| { |
| var expandLinks = visibleExpandLinks(); |
| for (var i = 0, len = expandLinks.length; i < len; i++) |
| async(expandExpectations, [expandLinks[i]]); |
| } |
| |
| function collapseAllExpectations() |
| { |
| var expandLinks = visibleExpandLinks(); |
| for (var i = 0, len = expandLinks.length; i < len; i++) |
| async(collapseExpectations, [expandLinks[i]]); |
| } |
| |
| function shouldUseTracLinks() |
| { |
| return !globalState().results.layout_tests_dir || !location.toString().indexOf('file://') == 0; |
| } |
| |
| function layoutTestsBasePath() |
| { |
| var basePath; |
| if (shouldUseTracLinks()) { |
| var revision = globalState().results.revision; |
| basePath = 'http://trac.webkit.org'; |
| basePath += revision ? ('/export/' + revision) : '/browser'; |
| basePath += '/trunk/LayoutTests/'; |
| } else |
| basePath = globalState().results.layout_tests_dir + '/'; |
| return basePath; |
| } |
| |
| function testLink(test) |
| { |
| return '<a class=test-link href="' + layoutTestsBasePath() + test + '">' + test + '</a><span class=flag onclick="unflag(this)"> \u2691</span>'; |
| } |
| |
| function unflag(flag) |
| { |
| var shouldFlag = false; |
| TestNavigator.flagTest(parentOfType(flag, 'tbody'), shouldFlag); |
| } |
| |
| function testLinkWithExpandButton(test) |
| { |
| return '<span class=expand-button onclick="toggleExpectations(this)"><span class=expand-button-text>+</span></span>' + testLink(test); |
| } |
| |
| function resultLink(testPrefix, suffix, contents) |
| { |
| return '<a class=result-link href="' + testPrefix + suffix + '" data-prefix="' + testPrefix + '">' + contents + '</a> '; |
| } |
| |
| function isFailureExpected(expected, actual) |
| { |
| var isExpected = true; |
| if (actual != 'SKIP') { |
| var expectedArray = expected.split(' '); |
| var actualArray = actual.split(' '); |
| for (var i = 0; i < actualArray.length; i++) { |
| var actualValue = actualArray[i]; |
| if (expectedArray.indexOf(actualValue) == -1 && |
| (expectedArray.indexOf('FAIL') == -1 || |
| (actualValue != 'TEXT' && actualValue != 'IMAGE+TEXT' && actualValue != 'AUDIO'))) |
| isExpected = false; |
| } |
| } |
| return isExpected; |
| } |
| |
| function processGlobalStateFor(testObject) |
| { |
| var test = testObject.name; |
| if (testObject.has_stderr) |
| globalState().testsWithStderr.push(testObject); |
| |
| globalState().hasHttpTests = globalState().hasHttpTests || test.indexOf('http/') == 0; |
| |
| var actual = testObject.actual; |
| var expected = testObject.expected || 'PASS'; |
| if (globalState().results.uses_expectations_file) |
| testObject.isExpected = isFailureExpected(expected, actual); |
| |
| if (actual == 'MISSING') { |
| // FIXME: make sure that new-run-webkit-tests spits out an -actual.txt file for |
| // tests with MISSING results. |
| globalState().missingResults.push(testObject); |
| return; |
| } |
| |
| var actualTokens = actual.split(' '); |
| var passedWithImageOnlyFailureInRetry = actualTokens[0] == 'TEXT' && actualTokens[1] == 'IMAGE'; |
| if (actualTokens[1] && actual.indexOf('PASS') != -1 || (!globalState().results.pixel_tests_enabled && passedWithImageOnlyFailureInRetry)) { |
| globalState().flakyPassTests.push(testObject); |
| return; |
| } |
| |
| if (actual == 'PASS' && expected != 'PASS') { |
| if (expected != 'IMAGE' || (globalState().results.pixel_tests_enabled || testObject.reftest_type)) { |
| globalState().unexpectedPassTests.push(testObject); |
| } |
| return; |
| } |
| |
| if (actual == 'CRASH') { |
| globalState().crashTests.push(testObject); |
| return; |
| } |
| |
| if (actual == 'TIMEOUT') { |
| globalState().timeoutTests.push(testObject); |
| return; |
| } |
| |
| globalState().failingTests.push(testObject); |
| } |
| |
| function toggleImages() |
| { |
| var images = document.querySelectorAll('.animatedImage'); |
| var imageTexts = document.querySelectorAll('.imageText'); |
| for (var i = 0, len = images.length; i < len; i++) { |
| var image = images[i]; |
| var 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'; |
| } |
| } |
| } |
| |
| function textResultLinks(prefix) |
| { |
| var html = resultLink(prefix, '-expected.txt', 'expected') + |
| resultLink(prefix, '-actual.txt', 'actual') + |
| resultLink(prefix, '-diff.txt', 'diff'); |
| |
| if (globalState().results.has_pretty_patch) |
| html += resultLink(prefix, '-pretty-diff.html', 'pretty diff'); |
| |
| if (globalState().results.has_wdiff) |
| html += resultLink(prefix, '-wdiff.html', 'wdiff'); |
| |
| return html; |
| } |
| |
| function imageResultsCell(testObject, testPrefix, actual) { |
| var row = ''; |
| |
| if (actual.indexOf('IMAGE') != -1) { |
| var testExtension = splitExtension(testObject.name)[1]; |
| globalState().hasImageFailures = true; |
| |
| if (testObject.reftest_type && testObject.reftest_type.indexOf('!=') != -1) { |
| row += resultLink(layoutTestsBasePath() + testPrefix, '-expected-mismatch.' + testExtension, 'ref mismatch'); |
| row += resultLink(testPrefix, '-actual.png', 'actual'); |
| } else { |
| if (testObject.reftest_type && testObject.reftest_type.indexOf('==') != -1) { |
| row += resultLink(layoutTestsBasePath() + testPrefix, '-expected.' + testExtension, 'reference'); |
| } |
| if (globalState().shouldToggleImages) { |
| row += resultLink(testPrefix, '-diffs.html', 'images'); |
| } else { |
| row += resultLink(testPrefix, '-expected.png', 'expected'); |
| row += resultLink(testPrefix, '-actual.png', 'actual'); |
| } |
| |
| var diff = testObject.image_diff_percent; |
| row += resultLink(testPrefix, '-diff.png', 'diff (' + diff + '%)'); |
| } |
| } |
| |
| if (actual.indexOf('MISSING') != -1 && testObject.is_missing_image) |
| row += resultLink(testPrefix, '-actual.png', 'png result'); |
| |
| return row; |
| } |
| |
| function flakinessDashboardURLForTests(testObjects) |
| { |
| var testList = ""; |
| for (var i = 0; i < testObjects.length; ++i) { |
| testList += testObjects[i].name; |
| |
| if (i != testObjects.length - 1) |
| testList += ","; |
| } |
| |
| return 'http://webkit-test-results.appspot.com/dashboards/flakiness_dashboard.html#showAllRuns=true&tests=' + encodeURIComponent(testList); |
| } |
| |
| function tableRow(testObject) |
| { |
| var row = '<tbody' |
| if (globalState().results.uses_expectations_file) |
| row += ' class="' + (testObject.isExpected ? 'expected' : '') + '"'; |
| if (testObject.reftest_type && testObject.reftest_type.indexOf('!=') != -1) |
| row += ' mismatchreftest=true'; |
| row += '><tr>'; |
| |
| row += '<td>' + testLinkWithExpandButton(testObject.name) + '</td>'; |
| |
| var testPrefix = stripExtension(testObject.name); |
| row += '<td>'; |
| |
| var actual = testObject.actual; |
| if (actual.indexOf('TEXT') != -1) { |
| globalState().hasTextFailures = true; |
| row += textResultLinks(testPrefix); |
| } |
| |
| if (actual.indexOf('AUDIO') != -1) { |
| row += resultLink(testPrefix, '-expected.wav', 'expected audio'); |
| row += resultLink(testPrefix, '-actual.wav', 'actual audio'); |
| } |
| |
| if (actual.indexOf('MISSING') != -1) { |
| if (testObject.is_missing_audio) |
| row += resultLink(testPrefix, '-actual.wav', 'audio result'); |
| if (testObject.is_missing_text) |
| row += resultLink(testPrefix, '-actual.txt', 'result'); |
| } |
| |
| var actualTokens = actual.split(/\s+/); |
| var cell = imageResultsCell(testObject, testPrefix, actualTokens[0]); |
| if (!cell && actualTokens.length > 1) |
| cell = imageResultsCell(testObject, 'retries/' + testPrefix, actualTokens[1]); |
| |
| row += '</td><td>' + cell + '</td>'; |
| |
| if (globalState().results.uses_expectations_file || actual.indexOf(' ') != -1) |
| row += '<td>' + actual + '</td>'; |
| |
| if (globalState().results.uses_expectations_file) |
| row += '<td>' + (actual.indexOf('MISSING') == -1 ? testObject.expected : '') + '</td>'; |
| |
| row += '<td><a href="' + flakinessDashboardURLForTests([testObject]) + '">history</a></td>'; |
| |
| row += '</tr></tbody>'; |
| return row; |
| } |
| |
| function forEachTest(handler, opt_tree, opt_prefix) |
| { |
| var tree = opt_tree || globalState().results.tests; |
| var prefix = opt_prefix || ''; |
| |
| for (var key in tree) { |
| var newPrefix = prefix ? (prefix + '/' + key) : key; |
| if ('actual' in tree[key]) { |
| var testObject = tree[key]; |
| testObject.name = newPrefix; |
| handler(testObject); |
| } else |
| forEachTest(handler, tree[key], newPrefix); |
| } |
| } |
| |
| function hasUnexpected(tests) |
| { |
| return tests.some(function (test) { return !test.isExpected; }); |
| } |
| |
| function updateTestlistCounts() |
| { |
| forEach(document.querySelectorAll('.test-list-count'), function(count) { |
| var container = parentOfType(count, 'div'); |
| var testContainers; |
| if (onlyShowUnexpectedFailures()) |
| testContainers = container.querySelectorAll('tbody:not(.expected)'); |
| else |
| testContainers = container.querySelectorAll('tbody'); |
| |
| count.textContent = testContainers.length; |
| }) |
| } |
| |
| function flagAll(headerLink) |
| { |
| var tests = visibleTests(parentOfType(headerLink, 'div')); |
| forEach(tests, function(tests) { |
| var shouldFlag = true; |
| TestNavigator.flagTest(tests, shouldFlag); |
| }) |
| } |
| |
| function testListHeaderHtml(header) |
| { |
| return '<h1>' + header + ' (<span class=test-list-count></span>): <a href="#" class=flag-all onclick="flagAll(this)">flag all</a></h1>'; |
| } |
| |
| function testList(tests, header, tableId) |
| { |
| tests.sort(); |
| |
| var html = '<div' + ((!hasUnexpected(tests) && tableId != 'stderr-table') ? ' class=expected' : '') + ' id=' + tableId + '>' + |
| testListHeaderHtml(header) + '<table>'; |
| |
| // FIXME: add the expected failure column for all the test lists if globalState().results.uses_expectations_file |
| if (tableId == 'passes-table') |
| html += '<thead><th>test</th><th>expected failure</th></thead>'; |
| |
| for (var i = 0; i < tests.length; i++) { |
| var testObject = tests[i]; |
| var test = testObject.name; |
| html += '<tbody'; |
| if (globalState().results.uses_expectations_file) |
| html += ' class="' + ((testObject.isExpected && tableId != 'stderr-table') ? 'expected' : '') + '"'; |
| html += '><tr><td>'; |
| html += (tableId == 'passes-table') ? testLink(test) : testLinkWithExpandButton(test); |
| html += '</td><td>'; |
| |
| if (tableId == 'stderr-table') |
| html += resultLink(stripExtension(test), '-stderr.txt', 'stderr'); |
| else if (tableId == 'passes-table') |
| html += testObject.expected; |
| else if (tableId == 'crash-tests-table') { |
| html += resultLink(stripExtension(test), '-crash-log.txt', 'crash log'); |
| html += resultLink(stripExtension(test), '-sample.txt', 'sample'); |
| } else if (tableId == 'timeout-tests-table') { |
| // FIXME: only include timeout actual/diff results here if we actually spit out results for timeout tests. |
| html += textResultLinks(stripExtension(test)); |
| } |
| |
| html += '</td><td><a href="' + flakinessDashboardURLForTests([testObject]) + '">history</a></td>'; |
| |
| html += '</tr></tbody>'; |
| } |
| html += '</table></div>'; |
| return html; |
| } |
| |
| function toArray(nodeList) |
| { |
| return Array.prototype.slice.call(nodeList); |
| } |
| |
| function trim(string) |
| { |
| return string.replace(/^[\s\xa0]+|[\s\xa0]+$/g, ''); |
| } |
| |
| // Just a namespace for code management. |
| var TableSorter = {}; |
| |
| TableSorter._forwardArrow = '<svg style="width:10px;height:10px"><polygon points="0,0 10,0 5,10" style="fill:#ccc"></svg>'; |
| |
| TableSorter._backwardArrow = '<svg style="width:10px;height:10px"><polygon points="0,10 10,10 5,0" style="fill:#ccc"></svg>'; |
| |
| TableSorter._sortedContents = function(header, arrow) |
| { |
| return arrow + ' ' + trim(header.textContent) + ' ' + arrow; |
| } |
| |
| TableSorter._updateHeaderClassNames = function(newHeader) |
| { |
| var sortHeader = document.querySelector('.sortHeader'); |
| if (sortHeader) { |
| if (sortHeader == newHeader) { |
| var 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'); |
| } |
| |
| TableSorter._textContent = function(tbodyRow, column) |
| { |
| return tbodyRow.querySelectorAll('td')[column].textContent; |
| } |
| |
| TableSorter._sortRows = function(newHeader, reversed) |
| { |
| var testsTable = document.getElementById('results-table'); |
| var headers = toArray(testsTable.querySelectorAll('th')); |
| var sortColumn = headers.indexOf(newHeader); |
| |
| var rows = toArray(testsTable.querySelectorAll('tbody')); |
| |
| rows.sort(function(a, b) { |
| // Only need to support lexicographic sort for now. |
| var aText = TableSorter._textContent(a, sortColumn); |
| var bText = TableSorter._textContent(b, sortColumn); |
| |
| // Forward sort equal values by test name. |
| if (sortColumn && aText == bText) { |
| var aTestName = TableSorter._textContent(a, 0); |
| var 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 (var i = 0; i < rows.length; i++) |
| testsTable.appendChild(rows[i]); |
| } |
| |
| TableSorter.sortColumn = function(columnNumber) |
| { |
| var newHeader = document.getElementById('results-table').querySelectorAll('th')[columnNumber]; |
| TableSorter._sort(newHeader); |
| } |
| |
| TableSorter.handleClick = function(e) |
| { |
| var newHeader = e.target; |
| if (newHeader.localName != 'th') |
| return; |
| TableSorter._sort(newHeader); |
| } |
| |
| TableSorter._sort = function(newHeader) |
| { |
| TableSorter._updateHeaderClassNames(newHeader); |
| |
| var reversed = newHeader.classList.contains('reversed'); |
| var sortArrow = reversed ? TableSorter._backwardArrow : TableSorter._forwardArrow; |
| newHeader.innerHTML = TableSorter._sortedContents(newHeader, sortArrow); |
| |
| TableSorter._sortRows(newHeader, reversed); |
| } |
| |
| var PixelZoomer = {}; |
| |
| PixelZoomer.showOnDelay = true; |
| PixelZoomer._zoomFactor = 6; |
| |
| var kResultWidth = 800; |
| var kResultHeight = 600; |
| |
| var kZoomedResultWidth = kResultWidth * PixelZoomer._zoomFactor; |
| var kZoomedResultHeight = kResultHeight * PixelZoomer._zoomFactor; |
| |
| PixelZoomer._zoomImageContainer = function(url) |
| { |
| var container = document.createElement('div'); |
| container.className = 'zoom-image-container'; |
| |
| var title = url.match(/\-([^\-]*)\.png/)[1]; |
| |
| var label = document.createElement('div'); |
| label.className = 'label'; |
| label.appendChild(document.createTextNode(title)); |
| container.appendChild(label); |
| |
| var imageContainer = document.createElement('div'); |
| imageContainer.className = 'scaled-image-container'; |
| |
| var image = new Image(); |
| image.src = url; |
| image.style.width = kZoomedResultWidth + 'px'; |
| image.style.height = kZoomedResultHeight + 'px'; |
| image.style.border = '1px solid black'; |
| imageContainer.appendChild(image); |
| container.appendChild(imageContainer); |
| |
| return container; |
| } |
| |
| PixelZoomer._createContainer = function(e) |
| { |
| var tbody = parentOfType(e.target, 'tbody'); |
| var row = tbody.querySelector('tr'); |
| var imageDiffLinks = row.querySelectorAll('a[href$=".png"]'); |
| |
| var container = document.createElement('div'); |
| container.className = 'pixel-zoom-container'; |
| |
| var html = ''; |
| |
| var togglingImageLink = row.querySelector('a[href$="-diffs.html"]'); |
| if (togglingImageLink) { |
| var prefix = togglingImageLink.getAttribute('data-prefix'); |
| container.appendChild(PixelZoomer._zoomImageContainer(prefix + '-expected.png')); |
| container.appendChild(PixelZoomer._zoomImageContainer(prefix + '-actual.png')); |
| } |
| |
| for (var i = 0; i < imageDiffLinks.length; i++) |
| container.appendChild(PixelZoomer._zoomImageContainer(imageDiffLinks[i].href)); |
| |
| document.body.appendChild(container); |
| PixelZoomer._drawAll(); |
| } |
| |
| PixelZoomer._draw = function(imageContainer) |
| { |
| var image = imageContainer.querySelector('img'); |
| var containerBounds = imageContainer.getBoundingClientRect(); |
| image.style.left = (containerBounds.width / 2 - PixelZoomer._percentX * kZoomedResultWidth) + 'px'; |
| image.style.top = (containerBounds.height / 2 - PixelZoomer._percentY * kZoomedResultHeight) + 'px'; |
| } |
| |
| PixelZoomer._drawAll = function() |
| { |
| forEach(document.querySelectorAll('.pixel-zoom-container .scaled-image-container'), PixelZoomer._draw); |
| } |
| |
| PixelZoomer.handleMouseOut = function(e) |
| { |
| if (e.relatedTarget && e.relatedTarget.tagName != 'IFRAME') |
| return; |
| |
| // If e.relatedTarget is null, we've moused out of the document. |
| var container = document.querySelector('.pixel-zoom-container'); |
| if (container) |
| remove(container); |
| } |
| |
| PixelZoomer.handleMouseMove = function(e) { |
| if (PixelZoomer._mouseMoveTimeout) |
| clearTimeout(PixelZoomer._mouseMoveTimeout); |
| |
| if (parentOfType(e.target, '.pixel-zoom-container')) |
| return; |
| |
| var container = document.querySelector('.pixel-zoom-container'); |
| |
| var resultContainer = (e.target.className == 'result-container') ? |
| e.target : parentOfType(e.target, '.result-container'); |
| if (!resultContainer || !resultContainer.querySelector('img')) { |
| if (container) |
| remove(container); |
| return; |
| } |
| |
| var targetLocation = e.target.getBoundingClientRect(); |
| PixelZoomer._percentX = (e.clientX - targetLocation.left) / targetLocation.width; |
| PixelZoomer._percentY = (e.clientY - targetLocation.top) / targetLocation.height; |
| |
| if (!container) { |
| if (PixelZoomer.showOnDelay) { |
| PixelZoomer._mouseMoveTimeout = setTimeout(function() { |
| PixelZoomer._createContainer(e); |
| }, 400); |
| return; |
| } |
| |
| PixelZoomer._createContainer(e); |
| return; |
| } |
| |
| PixelZoomer._drawAll(); |
| } |
| |
| document.addEventListener('mousemove', PixelZoomer.handleMouseMove, false); |
| document.addEventListener('mouseout', PixelZoomer.handleMouseOut, false); |
| |
| var TestNavigator = {}; |
| |
| TestNavigator.reset = function() { |
| TestNavigator.currentTestIndex = -1; |
| TestNavigator.flaggedTests = {}; |
| } |
| |
| TestNavigator.handleKeyEvent = function(event) |
| { |
| if (event.metaKey || event.shiftKey || event.ctrlKey) |
| return; |
| |
| switch (String.fromCharCode(event.charCode)) { |
| case 'i': |
| TestNavigator._scrollToFirstTest(); |
| break; |
| case 'j': |
| TestNavigator._scrollToNextTest(); |
| break; |
| case 'k': |
| TestNavigator._scrollToPreviousTest(); |
| break; |
| case 'l': |
| TestNavigator._scrollToLastTest(); |
| break; |
| case 'e': |
| TestNavigator._expandCurrentTest(); |
| break; |
| case 'c': |
| TestNavigator._collapseCurrentTest(); |
| break; |
| case 't': |
| TestNavigator._toggleCurrentTest(); |
| break; |
| case 'f': |
| TestNavigator._toggleCurrentTestFlagged(); |
| break; |
| } |
| } |
| |
| TestNavigator._scrollToFirstTest = function() |
| { |
| if (TestNavigator._setCurrentTest(0)) |
| TestNavigator._scrollToCurrentTest(); |
| } |
| |
| TestNavigator._scrollToLastTest = function() |
| { |
| var links = visibleTests(); |
| if (TestNavigator._setCurrentTest(links.length - 1)) |
| TestNavigator._scrollToCurrentTest(); |
| } |
| |
| TestNavigator._scrollToNextTest = function() |
| { |
| if (TestNavigator.currentTestIndex == -1) |
| TestNavigator._scrollToFirstTest(); |
| else if (TestNavigator._setCurrentTest(TestNavigator.currentTestIndex + 1)) |
| TestNavigator._scrollToCurrentTest(); |
| } |
| |
| TestNavigator._scrollToPreviousTest = function() |
| { |
| if (TestNavigator.currentTestIndex == -1) |
| TestNavigator._scrollToLastTest(); |
| else if (TestNavigator._setCurrentTest(TestNavigator.currentTestIndex - 1)) |
| TestNavigator._scrollToCurrentTest(); |
| } |
| |
| TestNavigator._currentTestLink = function() |
| { |
| var links = visibleTests(); |
| return links[TestNavigator.currentTestIndex]; |
| } |
| |
| TestNavigator._currentTestExpandLink = function() |
| { |
| return TestNavigator._currentTestLink().querySelector('.expand-button-text'); |
| } |
| |
| TestNavigator._expandCurrentTest = function() |
| { |
| expandExpectations(TestNavigator._currentTestExpandLink()); |
| } |
| |
| TestNavigator._collapseCurrentTest = function() |
| { |
| collapseExpectations(TestNavigator._currentTestExpandLink()); |
| } |
| |
| TestNavigator._toggleCurrentTest = function() |
| { |
| toggleExpectations(TestNavigator._currentTestExpandLink()); |
| } |
| |
| TestNavigator._toggleCurrentTestFlagged = function() |
| { |
| var testLink = TestNavigator._currentTestLink(); |
| TestNavigator.flagTest(testLink, !testLink.classList.contains('flagged')); |
| } |
| |
| // FIXME: Test navigator shouldn't know anything about flagging. It should probably call out to TestFlagger or something. |
| TestNavigator.flagTest = function(testTbody, shouldFlag) |
| { |
| var testName = testTbody.querySelector('.test-link').innerText; |
| |
| if (shouldFlag) { |
| testTbody.classList.add('flagged'); |
| TestNavigator.flaggedTests[testName] = 1; |
| } else { |
| testTbody.classList.remove('flagged'); |
| delete TestNavigator.flaggedTests[testName]; |
| } |
| |
| TestNavigator.updateFlaggedTests(); |
| } |
| |
| TestNavigator.updateFlaggedTests = function() |
| { |
| var flaggedTestTextbox = document.getElementById('flagged-tests'); |
| if (!flaggedTestTextbox) { |
| var 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'); |
| } |
| |
| var flaggedTests = Object.keys(this.flaggedTests); |
| flaggedTests.sort(); |
| var separator = document.getElementById('use-newlines').checked ? '\n' : ' '; |
| flaggedTestTextbox.innerHTML = flaggedTests.join(separator); |
| document.getElementById('flagged-test-container').style.display = flaggedTests.length ? '' : 'none'; |
| } |
| |
| TestNavigator._setCurrentTest = function(testIndex) |
| { |
| var links = visibleTests(); |
| if (testIndex < 0 || testIndex >= links.length) |
| return false; |
| |
| var currentTest = links[TestNavigator.currentTestIndex]; |
| if (currentTest) |
| currentTest.classList.remove('current'); |
| |
| TestNavigator.currentTestIndex = testIndex; |
| |
| currentTest = links[TestNavigator.currentTestIndex]; |
| currentTest.classList.add('current'); |
| |
| return true; |
| } |
| |
| TestNavigator._scrollToCurrentTest = function() |
| { |
| var targetLink = TestNavigator._currentTestLink(); |
| if (!targetLink) |
| return; |
| |
| var 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.body.scrollTop += rowRect.top; |
| } |
| |
| TestNavigator.onlyShowUnexpectedFailuresChanged = function() |
| { |
| var currentTest = document.querySelector('.current'); |
| if (!currentTest) |
| return; |
| |
| // If our currentTest became hidden, reset the currentTestIndex. |
| if (onlyShowUnexpectedFailures() && currentTest.classList.contains('expected')) |
| TestNavigator._scrollToFirstTest(); |
| else { |
| // Recompute TestNavigator.currentTestIndex |
| var links = visibleTests(); |
| TestNavigator.currentTestIndex = links.indexOf(currentTest); |
| } |
| } |
| |
| document.addEventListener('keypress', TestNavigator.handleKeyEvent, false); |
| |
| |
| function onlyShowUnexpectedFailures() |
| { |
| return document.getElementById('unexpected-results').checked; |
| } |
| |
| function handleUnexpectedResultsChange() |
| { |
| OptionWriter.save(); |
| updateExpectedFailures(); |
| } |
| |
| function updateExpectedFailures() |
| { |
| document.getElementById('unexpected-style').textContent = onlyShowUnexpectedFailures() ? |
| '.expected { display: none; }' : ''; |
| |
| updateTestlistCounts(); |
| TestNavigator.onlyShowUnexpectedFailuresChanged(); |
| } |
| |
| var OptionWriter = {}; |
| |
| OptionWriter._key = 'run-webkit-tests-options'; |
| |
| OptionWriter.save = function() |
| { |
| var options = document.querySelectorAll('label input'); |
| var data = {}; |
| for (var i = 0, len = options.length; i < len; i++) { |
| var option = options[i]; |
| data[option.id] = option.checked; |
| } |
| localStorage.setItem(OptionWriter._key, JSON.stringify(data)); |
| } |
| |
| OptionWriter.apply = function() |
| { |
| var json = localStorage.getItem(OptionWriter._key); |
| if (!json) { |
| updateAllOptions(); |
| return; |
| } |
| |
| var data = JSON.parse(json); |
| for (var id in data) { |
| var input = document.getElementById(id); |
| if (input) |
| input.checked = data[id]; |
| } |
| updateAllOptions(); |
| } |
| |
| function updateAllOptions() |
| { |
| forEach(document.querySelectorAll('#options-menu input'), function(input) { input.onchange(); }); |
| } |
| |
| function handleToggleUseNewlines() |
| { |
| OptionWriter.save(); |
| TestNavigator.updateFlaggedTests(); |
| } |
| |
| function handleToggleImagesChange() |
| { |
| OptionWriter.save(); |
| updateTogglingImages(); |
| } |
| |
| function updateTogglingImages() |
| { |
| var shouldToggle = document.getElementById('toggle-images').checked; |
| globalState().shouldToggleImages = shouldToggle; |
| |
| if (shouldToggle) { |
| forEach(document.querySelectorAll('table:not(#missing-table) tbody:not([mismatchreftest]) a[href$=".png"]'), convertToTogglingHandler(function(prefix) { |
| return resultLink(prefix, '-diffs.html', 'images'); |
| })); |
| forEach(document.querySelectorAll('table:not(#missing-table) tbody:not([mismatchreftest]) img[src$=".png"]'), convertToTogglingHandler(togglingImage)); |
| } else { |
| forEach(document.querySelectorAll('a[href$="-diffs.html"]'), convertToNonTogglingHandler(resultLink)); |
| forEach(document.querySelectorAll('.animatedImage'), convertToNonTogglingHandler(function (absolutePrefix, suffix) { |
| return resultIframe(absolutePrefix + suffix); |
| })); |
| } |
| |
| updateImageTogglingTimer(); |
| } |
| |
| function getResultContainer(node) |
| { |
| return (node.tagName == 'IMG') ? parentOfType(node, '.result-container') : node; |
| } |
| |
| function convertToTogglingHandler(togglingImageFunction) |
| { |
| return function(node) { |
| var url = (node.tagName == 'IMG') ? node.src : node.href; |
| if (url.match('-expected.png$')) |
| remove(getResultContainer(node)); |
| else if (url.match('-actual.png$')) { |
| var name = parentOfType(node, 'tbody').querySelector('.test-link').textContent; |
| getResultContainer(node).outerHTML = togglingImageFunction(stripExtension(name)); |
| } |
| } |
| } |
| |
| function convertToNonTogglingHandler(resultFunction) |
| { |
| return function(node) { |
| var prefix = node.getAttribute('data-prefix'); |
| getResultContainer(node).outerHTML = resultFunction(prefix, '-expected.png', 'expected') + resultFunction(prefix, '-actual.png', 'actual'); |
| } |
| } |
| |
| function toggleOptionsMenu() |
| { |
| var menu = document.getElementById('options-menu'); |
| menu.className = (menu.className == 'hidden-menu') ? '' : 'hidden-menu'; |
| } |
| |
| function handleMouseDown(e) |
| { |
| if (!parentOfType(e.target, '#options-menu') && e.target.id != 'options-link') |
| document.getElementById('options-menu').className = 'hidden-menu'; |
| } |
| |
| document.addEventListener('mousedown', handleMouseDown, false); |
| |
| function failingTestsTable(tests, title, id) |
| { |
| if (!tests.length) |
| return ''; |
| |
| var numberofUnexpectedFailures = 0; |
| var tableRowHtml = ''; |
| for (var i = 0; i < tests.length; i++){ |
| tableRowHtml += tableRow(tests[i]); |
| if (!tests[i].isExpected) |
| numberofUnexpectedFailures++; |
| } |
| |
| var header = '<div'; |
| if (!hasUnexpected(tests)) |
| header += ' class=expected'; |
| |
| header += '>' + testListHeaderHtml(title) + |
| '<table id="' + id + '"><thead><tr>' + |
| '<th>test</th>' + |
| '<th id="text-results-header">results</th>' + |
| '<th id="image-results-header">image results</th>'; |
| |
| if (globalState().results.uses_expectations_file) |
| header += '<th>actual failure</th><th>expected failure</th>'; |
| |
| header += '<th><a href="' + flakinessDashboardURLForTests(tests) + '">history</a></th>'; |
| |
| if (id == 'flaky-tests-table') |
| header += '<th>failures</th>'; |
| |
| header += '</tr></thead>'; |
| |
| return header + tableRowHtml + '</table></div>'; |
| } |
| |
| |
| function generatePage() |
| { |
| forEachTest(processGlobalStateFor); |
| |
| var html = ""; |
| |
| if (globalState().results.interrupted) |
| html += "<p class='stopped-running-early-message'>Testing exited early.</p>" |
| |
| if (globalState().crashTests.length) |
| html += testList(globalState().crashTests, 'Tests that crashed', 'crash-tests-table'); |
| |
| html += failingTestsTable(globalState().failingTests, |
| 'Tests that failed text/pixel/audio diff', 'results-table'); |
| |
| html += failingTestsTable(globalState().missingResults, |
| 'Tests that had no expected results (probably new)', 'missing-table'); |
| |
| if (globalState().timeoutTests.length) |
| html += testList(globalState().timeoutTests, 'Tests that timed out', 'timeout-tests-table'); |
| |
| if (globalState().testsWithStderr.length) |
| html += testList(globalState().testsWithStderr, 'Tests that had stderr output', 'stderr-table'); |
| |
| html += failingTestsTable(globalState().flakyPassTests, |
| 'Flaky tests (failed the first run and passed on retry)', 'flaky-tests-table'); |
| |
| if (globalState().results.uses_expectations_file && globalState().unexpectedPassTests.length) |
| html += testList(globalState().unexpectedPassTests, 'Tests expected to fail but passed', 'passes-table'); |
| |
| if (globalState().hasHttpTests) { |
| html += '<p>httpd access log: <a href="access_log.txt">access_log.txt</a></p>' + |
| '<p>httpd error log: <a href="error_log.txt">error_log.txt</a></p>'; |
| } |
| |
| document.getElementById('main-content').innerHTML = html + '</div>'; |
| |
| if (document.getElementById('results-table')) { |
| document.getElementById('results-table').addEventListener('click', TableSorter.handleClick, false); |
| TableSorter.sortColumn(0); |
| if (!globalState().results.uses_expectations_file) |
| parentOfType(document.getElementById('unexpected-results'), 'label').style.display = 'none'; |
| if (!globalState().hasTextFailures) |
| document.getElementById('text-results-header').textContent = ''; |
| if (!globalState().hasImageFailures) { |
| document.getElementById('image-results-header').textContent = ''; |
| parentOfType(document.getElementById('toggle-images'), 'label').style.display = 'none'; |
| } |
| } |
| |
| updateTestlistCounts(); |
| |
| TestNavigator.reset(); |
| OptionWriter.apply(); |
| } |
| </script> |
| <body onload="generatePage()"> |
| |
| <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 href="javascript:void()" onclick="expandAllExpectations()">expand all</a> |
| <a href="javascript:void()" onclick="collapseAllExpectations()">collapse all</a> |
| <a href="javascript:void()" id=options-link onclick="toggleOptionsMenu()">options</a> |
| <div id="options-menu" class="hidden-menu"> |
| <label><input id="unexpected-results" type="checkbox" checked onchange="handleUnexpectedResultsChange()">Only unexpected results</label> |
| <label><input id="toggle-images" type="checkbox" checked onchange="handleToggleImagesChange()">Toggle images</label> |
| <label title="Use newlines instead of spaces to separate flagged tests"><input id="use-newlines" type="checkbox" checked onchange="handleToggleUseNewlines()">Use newlines in flagged list</input> |
| </div> |
| </div> |
| |
| <div id="main-content"></div> |
| |
| </body> |
