src/third_party/WebKit/LayoutTests/fast/harness/results.html

   1 <!DOCTYPE html>
   2 <style>
   3 html {
   4     height: 100%;
   5 }
   6 body {
   7     margin: 0;
   8     font-family: Helvetica, sans-serif;
   9     font-size: 11pt;
  10     display: -webkit-flex;
  11     -webkit-flex-direction: column;
  12     height: 100%;
  13 }
  14
  15 body > * {
  16     margin-left: 4px;
  17     margin-top: 4px;
  18 }
  19
  20 h1 {
  21     font-size: 14pt;
  22     margin-top: 1.5em;
  23 }
  24
  25 p {
  26     margin-bottom: 0.3em;
  27 }
  28
  29 tr:not(.results-row) td {
  30     white-space: nowrap;
  31 }
  32
  33 tr:not(.results-row) td:first-of-type {
  34     white-space: normal;
  35 }
  36
  37 td:not(:first-of-type) {
  38     text-transform: lowercase;
  39 }
  40
  41 td {
  42     padding: 1px 4px;
  43 }
  44
  45 th:empty, td:empty {
  46     padding: 0;
  47 }
  48
  49 th {
  50     -webkit-user-select: none;
  51     -moz-user-select: none;
  52 }
  53
  54 .content-container {
  55     -webkit-flex: 1;
  56     min-height: -webkit-min-content;
  57     overflow: auto;
  58 }
  59
  60 .note {
  61     color: gray;
  62     font-size: smaller;
  63 }
  64
  65 .results-row {
  66     background-color: white;
  67 }
  68
  69 .results-row iframe, .results-row img {
  70     width: 800px;
  71     height: 600px;
  72 }
  73
  74 .results-row[data-expanded="false"] {
  75     display: none;
  76 }
  77
  78 #toolbar {
  79     position: fixed;
  80     padding: 4px;
  81     top: 2px;
  82     right: 2px;
  83     text-align: right;
  84     background-color: rgba(255, 255, 255, 0.85);
  85     border: 1px solid silver;
  86     border-radius: 4px;
  87 }
  88
  89 .expand-button {
  90     background-color: white;
  91     width: 11px;
  92     height: 12px;
  93     border: 1px solid gray;
  94     display: inline-block;
  95     margin: 0 3px 0 0;
  96     position: relative;
  97     cursor: default;
  98 }
  99
 100 .current {
 101     color: red;
 102 }
 103
 104 .current .expand-button {
 105     border-color: red;
 106 }
 107
 108 .expand-button-text {
 109     position: absolute;
 110     top: -0.3em;
 111     left: 1px;
 112 }
 113
 114 tbody .flag {
 115     display: none;
 116 }
 117
 118 tbody.flagged .flag {
 119     display: inline;
 120 }
 121
 122 .stopped-running-early-message {
 123     border: 3px solid #d00;
 124     font-weight: bold;
 125     display: inline-block;
 126     padding: 3px;
 127 }
 128
 129 .result-container {
 130     display: inline-block;
 131     border: 1px solid gray;
 132     margin: 4px;
 133 }
 134
 135 .result-container iframe, .result-container img {
 136     border: 0;
 137     vertical-align: top;
 138 }
 139
 140 .label {
 141     padding-left: 3px;
 142     font-weight: bold;
 143     font-size: small;
 144     background-color: silver;
 145 }
 146
 147 .pixel-zoom-container {
 148     position: fixed;
 149     top: 0;
 150     left: 0;
 151     width: 96%;
 152     margin: 10px;
 153     padding: 10px;
 154     display: -webkit-box;
 155     display: -moz-box;
 156     pointer-events: none;
 157     background-color: silver;
 158     border-radius: 20px;
 159     border: 1px solid gray;
 160     box-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
 161 }
 162
 163 .pixel-zoom-container > * {
 164     -webkit-box-flex: 1;
 165     -moz-box-flex: 1;
 166     border: 1px solid black;
 167     margin: 4px;
 168     overflow: hidden;
 169     background-color: white;
 170 }
 171
 172 .pixel-zoom-container .scaled-image-container {
 173     position: relative;
 174     overflow: hidden;
 175     width: 100%;
 176     height: 400px;
 177 }
 178
 179 .scaled-image-container > img {
 180     position: absolute;
 181     top: 0;
 182     left: 0;
 183     image-rendering: -webkit-optimize-contrast;
 184 }
 185
 186 #flagged-tests {
 187     margin: 1px;
 188     padding: 5px;
 189     height: 100px;
 190 }
 191
 192 #flagged-test-container h2 {
 193     display: inline-block;
 194     margin: 0 10px 0 0;
 195 }
 196 </style>
 197 <style id="unexpected-pass-style"></style>
 198 <style id="flaky-failures-style"></style>
 199 <style id="stderr-style"></style>
 200 <style id="unexpected-style"></style>
 201
 202 <script>
 203 var g_state;
 204 function globalState()
 205 {
 206     if (!g_state) {
 207         g_state = {
 208             crashTests: [],
 209             flakyPassTests: [],
 210             hasHttpTests: false,
 211             hasImageFailures: false,
 212             hasTextFailures: false,
 213             missingResults: [],
 214             results: {},
 215             shouldToggleImages: true,
 216             failingTests: [],
 217             testsWithStderr: [],
 218             timeoutTests: [],
 219             unexpectedPassTests: []
 220         }
 221     }
 222     return g_state;
 223 }
 224
 225 function ADD_RESULTS(input)
 226 {
 227     globalState().results = input;
 228 }
 229 </script>
 230
 231 <script src="failing_results.json"></script>
 232
 233 <script>
 234 function stripExtension(test)
 235 {
 236     var index = test.lastIndexOf('.');
 237     return test.substring(0, index);
 238 }
 239
 240 function matchesSelector(node, selector)
 241 {
 242     if (node.webkitMatchesSelector)
 243         return node.webkitMatchesSelector(selector);
 244
 245     if (node.mozMatchesSelector)
 246         return node.mozMatchesSelector(selector);
 247 }
 248
 249 function parentOfType(node, selector)
 250 {
 251     while (node = node.parentNode) {
 252         if (matchesSelector(node, selector))
 253             return node;
 254     }
 255     return null;
 256 }
 257
 258 function remove(node)
 259 {
 260     node.parentNode.removeChild(node);
 261 }
 262
 263 function forEach(nodeList, handler)
 264 {
 265     Array.prototype.forEach.call(nodeList, handler);
 266 }
 267
 268 function resultIframe(src)
 269 {
 270     // FIXME: use audio tags for AUDIO tests?
 271     var layoutTestsIndex = src.indexOf('LayoutTests');
 272     var name;
 273     if (layoutTestsIndex != -1) {
 274         var hasTrac = src.indexOf('trac.webkit.org') != -1;
 275         var prefix = hasTrac ? 'trac.webkit.org/.../' : '';
 276         name = prefix + src.substring(layoutTestsIndex + 'LayoutTests/'.length);
 277     } else {
 278         var lastDashIndex = src.lastIndexOf('-pretty');
 279         if (lastDashIndex == -1)
 280             lastDashIndex = src.lastIndexOf('-');
 281         name = src.substring(lastDashIndex + 1);
 282     }
 283
 284     var tagName = (src.lastIndexOf('.png') == -1) ? 'iframe' : 'img';
 285
 286     if (tagName != 'img')
 287         src += '?format=txt';
 288     return '<div class=result-container><div class=label>' + name + '</div><' + tagName + ' src="' + src + '"></' + tagName + '></div>';
 289 }
 290
 291 function togglingImage(prefix)
 292 {
 293     return '<div class=result-container><div class="label imageText"></div><img class=animatedImage data-prefix="' +
 294         prefix + '"></img></div>';
 295 }
 296
 297 function toggleExpectations(element)
 298 {
 299     var expandLink = element;
 300     if (expandLink.className != 'expand-button-text')
 301         expandLink = expandLink.querySelector('.expand-button-text');
 302
 303     if (expandLink.textContent == '+')
 304         expandExpectations(expandLink);
 305     else
 306         collapseExpectations(expandLink);
 307 }
 308
 309 function collapseExpectations(expandLink)
 310 {
 311     expandLink.textContent = '+';
 312     var existingResultsRow = parentOfType(expandLink, 'tbody').querySelector('.results-row');
 313     if (existingResultsRow)
 314         updateExpandedState(existingResultsRow, false);
 315 }
 316
 317 function updateExpandedState(row, isExpanded)
 318 {
 319     row.setAttribute('data-expanded', isExpanded);
 320     updateImageTogglingTimer();
 321 }
 322
 323 function appendHTML(node, html)
 324 {
 325     if (node.insertAdjacentHTML)
 326         node.insertAdjacentHTML('beforeEnd', html);
 327     else
 328         node.innerHTML += html;
 329 }
 330
 331 function expandExpectations(expandLink)
 332 {
 333     var row = parentOfType(expandLink, 'tr');
 334     var parentTbody = row.parentNode;
 335     var existingResultsRow = parentTbody.querySelector('.results-row');
 336
 337     var enDash = '\u2013';
 338     expandLink.textContent = enDash;
 339     if (existingResultsRow) {
 340         updateExpandedState(existingResultsRow, true);
 341         return;
 342     }
 343
 344     var newRow = document.createElement('tr');
 345     newRow.className = 'results-row';
 346     var newCell = document.createElement('td');
 347     newCell.colSpan = row.querySelectorAll('td').length;
 348
 349     var resultLinks = row.querySelectorAll('.result-link');
 350     var hasTogglingImages = false;
 351     for (var i = 0; i < resultLinks.length; i++) {
 352         var link = resultLinks[i];
 353         var result;
 354         if (link.textContent == 'images') {
 355             hasTogglingImages = true;
 356             result = togglingImage(link.getAttribute('data-prefix'));
 357         } else
 358             result = resultIframe(link.href);
 359
 360         appendHTML(newCell, result);
 361     }
 362
 363     newRow.appendChild(newCell);
 364     parentTbody.appendChild(newRow);
 365
 366     updateExpandedState(newRow, true);
 367
 368     updateImageTogglingTimer();
 369 }
 370
 371 function updateImageTogglingTimer()
 372 {
 373     var hasVisibleAnimatedImage = document.querySelector('.results-row[data-expanded="true"] .animatedImage');
 374     if (!hasVisibleAnimatedImage) {
 375         clearInterval(globalState().togglingImageInterval);
 376         globalState().togglingImageInterval = null;
 377         return;
 378     }
 379
 380     if (!globalState().togglingImageInterval) {
 381         toggleImages();
 382         globalState().togglingImageInterval = setInterval(toggleImages, 2000);
 383     }
 384 }
 385
 386 function async(func, args)
 387 {
 388     setTimeout(function() { func.apply(null, args); }, 100);
 389 }
 390
 391 function visibleTests(opt_container)
 392 {
 393     var container = opt_container || document;
 394     if (onlyShowUnexpectedFailures())
 395         return container.querySelectorAll('tbody:not(.expected)');
 396     else
 397         return container.querySelectorAll('tbody');
 398 }
 399
 400 function visibleExpandLinks()
 401 {
 402     if (onlyShowUnexpectedFailures())
 403         return document.querySelectorAll('tbody:not(.expected) .expand-button-text');
 404     else
 405         return document.querySelectorAll('.expand-button-text');
 406 }
 407
 408 function expandAllExpectations()
 409 {
 410     var expandLinks = visibleExpandLinks();
 411     for (var i = 0, len = expandLinks.length; i < len; i++)
 412         async(expandExpectations, [expandLinks[i]]);
 413 }
 414
 415 function collapseAllExpectations()
 416 {
 417     var expandLinks = visibleExpandLinks();
 418     for (var i = 0, len = expandLinks.length; i < len; i++)
 419         async(collapseExpectations, [expandLinks[i]]);
 420 }
 421
 422 function shouldUseTracLinks()
 423 {
 424     return !globalState().results.layout_tests_dir || !location.toString().indexOf('file://') == 0;
 425 }
 426
 427 function testLink(test)
 428 {
 429     var target;
 430     if (shouldUseTracLinks()) {
 431         var revision = globalState().results.revision;
 432         target = 'http://src.chromium.org/viewvc/blink/trunk/LayoutTests/' + test;
 433         if (revision)
 434             target += '?pathrev=' + revision;
 435         target += '#l1';
 436     } else
 437         target = globalState().results.layout_tests_dir + '/' + test;
 438     return '<a class=test-link href="' + target + '">' + test + '</a><span class=flag onclick="unflag(this)"> \u2691</span>';
 439 }
 440
 441 function unflag(flag)
 442 {
 443     var shouldFlag = false;
 444     TestNavigator.flagTest(parentOfType(flag, 'tbody'), shouldFlag);
 445 }
 446
 447 function testLinkWithExpandButton(test)
 448 {
 449     return '<span class=expand-button onclick="toggleExpectations(this)"><span class=expand-button-text>+</span></span>' + testLink(test);
 450 }
 451
 452 function resultLink(testPrefix, suffix, contents)
 453 {
 454     return '<a class=result-link href="' + testPrefix + suffix + '" data-prefix="' + testPrefix + '">' + contents + '</a> ';
 455 }
 456
 457 function processGlobalStateFor(testObject)
 458 {
 459     var test = testObject.name;
 460     if (testObject.has_stderr)
 461         globalState().testsWithStderr.push(testObject);
 462
 463     globalState().hasHttpTests = globalState().hasHttpTests || test.indexOf('http/') == 0;
 464
 465     var actual = testObject.actual;
 466     var expected = testObject.expected || 'PASS';
 467
 468     if (actual == 'MISSING') {
 469         // FIXME: make sure that new-run-webkit-tests spits out an -actual.txt file for
 470         // tests with MISSING results.
 471         globalState().missingResults.push(testObject);
 472         return;
 473     }
 474
 475     var actualTokens = actual.split(' ');
 476     var passedWithImageOnlyFailureInRetry = actualTokens[0] == 'TEXT' && actualTokens[1] == 'IMAGE';
 477     if (actualTokens[1] && actual.indexOf('PASS') != -1 || (!globalState().results.pixel_tests_enabled && passedWithImageOnlyFailureInRetry)) {
 478         globalState().flakyPassTests.push(testObject);
 479         return;
 480     }
 481
 482     if (actual == 'PASS' && expected != 'PASS') {
 483         if (expected != 'IMAGE' || (globalState().results.pixel_tests_enabled || testObject.reftest_type)) {
 484             globalState().unexpectedPassTests.push(testObject);
 485         }
 486         return;
 487     }
 488
 489     if (actual == 'CRASH') {
 490         globalState().crashTests.push(testObject);
 491         return;
 492     }
 493
 494     if (actual == 'TIMEOUT') {
 495         globalState().timeoutTests.push(testObject);
 496         return;
 497     }
 498
 499     globalState().failingTests.push(testObject);
 500 }
 501
 502 function toggleImages()
 503 {
 504     var images = document.querySelectorAll('.animatedImage');
 505     var imageTexts = document.querySelectorAll('.imageText');
 506     for (var i = 0, len = images.length; i < len; i++) {
 507         var image = images[i];
 508         var text = imageTexts[i];
 509         if (text.textContent == 'Expected Image') {
 510             text.textContent = 'Actual Image';
 511             image.src = image.getAttribute('data-prefix') + '-actual.png';
 512         } else {
 513             text.textContent = 'Expected Image';
 514             image.src = image.getAttribute('data-prefix') + '-expected.png';
 515         }
 516     }
 517 }
 518
 519 function textResultLinks(prefix)
 520 {
 521     var html = resultLink(prefix, '-expected.txt', 'expected') +
 522         resultLink(prefix, '-actual.txt', 'actual') +
 523         resultLink(prefix, '-diff.txt', 'diff');
 524
 525     if (globalState().results.has_pretty_patch)
 526         html += resultLink(prefix, '-pretty-diff.html', 'pretty diff');
 527
 528     if (globalState().results.has_wdiff)
 529         html += resultLink(prefix, '-wdiff.html', 'wdiff');
 530
 531     return html;
 532 }
 533
 534 function imageResultsCell(testObject, testPrefix, actual) {
 535     var row = '';
 536
 537     if (actual.indexOf('IMAGE') != -1) {
 538         globalState().hasImageFailures = true;
 539
 540         if (testObject.reftest_type && testObject.reftest_type.indexOf('!=') != -1) {
 541             row += resultLink(testPrefix, '-expected-mismatch.html', 'ref mismatch html');
 542             row += resultLink(testPrefix, '-actual.png', 'actual');
 543         } else {
 544             if (testObject.reftest_type && testObject.reftest_type.indexOf('==') != -1) {
 545                 row += resultLink(testPrefix, '-expected.html', 'ref html');
 546             }
 547             if (globalState().shouldToggleImages) {
 548                 row += resultLink(testPrefix, '-diffs.html', 'images');
 549             } else {
 550                 row += resultLink(testPrefix, '-expected.png', 'expected');
 551                 row += resultLink(testPrefix, '-actual.png', 'actual');
 552             }
 553
 554             row += resultLink(testPrefix, '-diff.png', 'diff');
 555         }
 556     }
 557
 558     if (actual.indexOf('MISSING') != -1 && testObject.is_missing_image)
 559         row += resultLink(testPrefix, '-actual.png', 'png result');
 560
 561     return row;
 562 }
 563
 564 function tableRow(testObject)
 565 {
 566     var row = '<tbody class="' + (testObject.is_unexpected ? '' : 'expected') + '"';
 567     if (testObject.reftest_type && testObject.reftest_type.indexOf('!=') != -1)
 568         row += ' mismatchreftest=true';
 569     row += '><tr>';
 570
 571     row += '<td>' + testLinkWithExpandButton(testObject.name) + '</td>';
 572
 573     var testPrefix = stripExtension(testObject.name);
 574     row += '<td>';
 575
 576     var actual = testObject.actual;
 577     if (actual.indexOf('TEXT') != -1) {
 578         globalState().hasTextFailures = true;
 579         row += textResultLinks(testPrefix);
 580     }
 581
 582     if (actual.indexOf('AUDIO') != -1) {
 583         row += resultLink(testPrefix, '-expected.wav', 'expected audio');
 584         row += resultLink(testPrefix, '-actual.wav', 'actual audio');
 585     }
 586
 587     if (actual.indexOf('MISSING') != -1) {
 588         if (testObject.is_missing_audio)
 589             row += resultLink(testPrefix, '-actual.wav', 'audio result');
 590         if (testObject.is_missing_text)
 591             row += resultLink(testPrefix, '-actual.txt', 'result');
 592     }
 593
 594     var actualTokens = actual.split(/\s+/);
 595     var cell = imageResultsCell(testObject, testPrefix, actualTokens[0]);
 596     if (!cell && actualTokens.length > 1)
 597         cell = imageResultsCell(testObject, 'retries/' + testPrefix, actualTokens[1]);
 598
 599     row += '</td><td>' + cell + '</td>' +
 600         '<td>' + actual + '</td>' +
 601         '<td>' + (actual.indexOf('MISSING') == -1 ? testObject.expected : '') + '</td>' +
 602     '</tr></tbody>';
 603     return row;
 604 }
 605
 606 function forEachTest(handler, opt_tree, opt_prefix)
 607 {
 608     var tree = opt_tree || globalState().results.tests;
 609     var prefix = opt_prefix || '';
 610
 611     for (var key in tree) {
 612         var newPrefix = prefix ? (prefix + '/' + key) : key;
 613         if ('actual' in tree[key]) {
 614             var testObject = tree[key];
 615             testObject.name = newPrefix;
 616             handler(testObject);
 617         } else
 618             forEachTest(handler, tree[key], newPrefix);
 619     }
 620 }
 621
 622 function hasUnexpected(tests)
 623 {
 624     return tests.some(function (test) { return test.is_unexpected; });
 625 }
 626
 627 function updateTestlistCounts()
 628 {
 629     forEach(document.querySelectorAll('.test-list-count'), function(count) {
 630         var container = parentOfType(count, 'div');
 631         var testContainers;
 632         if (onlyShowUnexpectedFailures())
 633             testContainers = container.querySelectorAll('tbody:not(.expected)');
 634         else
 635             testContainers = container.querySelectorAll('tbody');
 636
 637         count.textContent = testContainers.length;
 638     })
 639 }
 640
 641 function flagAll(headerLink)
 642 {
 643     var tests = visibleTests(parentOfType(headerLink, 'div'));
 644     forEach(tests, function(test) {
 645         var shouldFlag = true;
 646         TestNavigator.flagTest(test, shouldFlag);
 647     })
 648 }
 649
 650 function testListHeaderHtml(header)
 651 {
 652     return '<h1>' + header + ' (<span class=test-list-count></span>): <a href="#" class=flag-all onclick="flagAll(this)">flag all</a></h1>';
 653 }
 654
 655 function testList(tests, header, tableId)
 656 {
 657     tests.sort();
 658
 659     var html = '<div' + ((!hasUnexpected(tests) && tableId != 'stderr-table') ? ' class=expected' : '') + ' id=' + tableId + '>' +
 660         testListHeaderHtml(header) + '<table>';
 661
 662     // FIXME: Include this for all testLists.
 663     if (tableId == 'passes-table')
 664         html += '<thead><th>test</th><th>expected</th></thead>';
 665
 666     for (var i = 0; i < tests.length; i++) {
 667         var testObject = tests[i];
 668         var test = testObject.name;
 669         html += '<tbody class="' + ((testObject.is_unexpected || tableId == 'stderr-table') ? '' : 'expected') + '"><tr><td>' +
 670             ((tableId == 'passes-table') ? testLink(test) : testLinkWithExpandButton(test)) +
 671         '</td><td>';
 672
 673         if (tableId == 'stderr-table')
 674             html += resultLink(stripExtension(test), '-stderr.txt', 'stderr');
 675         else if (tableId == 'passes-table')
 676             html += testObject.expected;
 677         else if (tableId == 'crash-tests-table') {
 678             html += resultLink(stripExtension(test), '-crash-log.txt', 'crash log');
 679             html += resultLink(stripExtension(test), '-sample.txt', 'sample');
 680         } else if (tableId == 'timeout-tests-table') {
 681             // FIXME: only include timeout actual/diff results here if we actually spit out results for timeout tests.
 682             html += textResultLinks(stripExtension(test));
 683         }
 684
 685         html += '</td></tr></tbody>';
 686     }
 687     html += '</table></div>';
 688     return html;
 689 }
 690
 691 function toArray(nodeList)
 692 {
 693     return Array.prototype.slice.call(nodeList);
 694 }
 695
 696 function trim(string)
 697 {
 698     return string.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
 699 }
 700
 701 // Just a namespace for code management.
 702 var TableSorter = {};
 703
 704 TableSorter._forwardArrow = '<svg style="width:10px;height:10px"><polygon points="0,0 10,0 5,10" style="fill:#ccc"></svg>';
 705
 706 TableSorter._backwardArrow = '<svg style="width:10px;height:10px"><polygon points="0,10 10,10 5,0" style="fill:#ccc"></svg>';
 707
 708 TableSorter._sortedContents = function(header, arrow)
 709 {
 710     return arrow + ' ' + trim(header.textContent) + ' ' + arrow;
 711 }
 712
 713 TableSorter._updateHeaderClassNames = function(newHeader)
 714 {
 715     var sortHeader = document.querySelector('.sortHeader');
 716     if (sortHeader) {
 717         if (sortHeader == newHeader) {
 718             var isAlreadyReversed = sortHeader.classList.contains('reversed');
 719             if (isAlreadyReversed)
 720                 sortHeader.classList.remove('reversed');
 721             else
 722                 sortHeader.classList.add('reversed');
 723         } else {
 724             sortHeader.textContent = sortHeader.textContent;
 725             sortHeader.classList.remove('sortHeader');
 726             sortHeader.classList.remove('reversed');
 727         }
 728     }
 729
 730     newHeader.classList.add('sortHeader');
 731 }
 732
 733 TableSorter._textContent = function(tbodyRow, column)
 734 {
 735     return tbodyRow.querySelectorAll('td')[column].textContent;
 736 }
 737
 738 TableSorter._sortRows = function(newHeader, reversed)
 739 {
 740     var testsTable = document.getElementById('results-table');
 741     var headers = toArray(testsTable.querySelectorAll('th'));
 742     var sortColumn = headers.indexOf(newHeader);
 743
 744     var rows = toArray(testsTable.querySelectorAll('tbody'));
 745
 746     rows.sort(function(a, b) {
 747         // Only need to support lexicographic sort for now.
 748         var aText = TableSorter._textContent(a, sortColumn);
 749         var bText = TableSorter._textContent(b, sortColumn);
 750
 751         // Forward sort equal values by test name.
 752         if (sortColumn && aText == bText) {
 753             var aTestName = TableSorter._textContent(a, 0);
 754             var bTestName = TableSorter._textContent(b, 0);
 755             if (aTestName == bTestName)
 756                 return 0;
 757             return aTestName < bTestName ? -1 : 1;
 758         }
 759
 760         if (reversed)
 761             return aText < bText ? 1 : -1;
 762         else
 763             return aText < bText ? -1 : 1;
 764     });
 765
 766     for (var i = 0; i < rows.length; i++)
 767         testsTable.appendChild(rows[i]);
 768 }
 769
 770 TableSorter.sortColumn = function(columnNumber)
 771 {
 772     var newHeader = document.getElementById('results-table').querySelectorAll('th')[columnNumber];
 773     TableSorter._sort(newHeader);
 774 }
 775
 776 TableSorter.handleClick = function(e)
 777 {
 778     var newHeader = e.target;
 779     if (newHeader.localName != 'th')
 780         return;
 781     TableSorter._sort(newHeader);
 782 }
 783
 784 TableSorter._sort = function(newHeader)
 785 {
 786     TableSorter._updateHeaderClassNames(newHeader);
 787
 788     var reversed = newHeader.classList.contains('reversed');
 789     var sortArrow = reversed ? TableSorter._backwardArrow : TableSorter._forwardArrow;
 790     newHeader.innerHTML = TableSorter._sortedContents(newHeader, sortArrow);
 791
 792     TableSorter._sortRows(newHeader, reversed);
 793 }
 794
 795 var PixelZoomer = {};
 796
 797 PixelZoomer.showOnDelay = true;
 798 PixelZoomer._zoomFactor = 6;
 799
 800 var kResultWidth = 800;
 801 var kResultHeight = 600;
 802
 803 var kZoomedResultWidth = kResultWidth * PixelZoomer._zoomFactor;
 804 var kZoomedResultHeight = kResultHeight * PixelZoomer._zoomFactor;
 805
 806 PixelZoomer._zoomImageContainer = function(url)
 807 {
 808     var container = document.createElement('div');
 809     container.className = 'zoom-image-container';
 810
 811     var title = url.match(/\-([^\-]*)\.png/)[1];
 812
 813     var label = document.createElement('div');
 814     label.className = 'label';
 815     label.appendChild(document.createTextNode(title));
 816     container.appendChild(label);
 817
 818     var imageContainer = document.createElement('div');
 819     imageContainer.className = 'scaled-image-container';
 820
 821     var image = new Image();
 822     image.src = url;
 823     image.style.width = kZoomedResultWidth + 'px';
 824     image.style.height = kZoomedResultHeight + 'px';
 825     image.style.border = '1px solid black';
 826     imageContainer.appendChild(image);
 827     container.appendChild(imageContainer);
 828
 829     return container;
 830 }
 831
 832 PixelZoomer._createContainer = function(e)
 833 {
 834     var tbody = parentOfType(e.target, 'tbody');
 835     var row = tbody.querySelector('tr');
 836     var imageDiffLinks = row.querySelectorAll('a[href$=".png"]');
 837
 838     var container = document.createElement('div');
 839     container.className = 'pixel-zoom-container';
 840
 841     var html = '';
 842
 843     var togglingImageLink = row.querySelector('a[href$="-diffs.html"]');
 844     if (togglingImageLink) {
 845         var prefix = togglingImageLink.getAttribute('data-prefix');
 846         container.appendChild(PixelZoomer._zoomImageContainer(prefix + '-expected.png'));
 847         container.appendChild(PixelZoomer._zoomImageContainer(prefix + '-actual.png'));
 848     }
 849
 850     for (var i = 0; i < imageDiffLinks.length; i++)
 851         container.appendChild(PixelZoomer._zoomImageContainer(imageDiffLinks[i].href));
 852
 853     document.body.appendChild(container);
 854     PixelZoomer._drawAll();
 855 }
 856
 857 PixelZoomer._draw = function(imageContainer)
 858 {
 859     var image = imageContainer.querySelector('img');
 860     var containerBounds = imageContainer.getBoundingClientRect();
 861     image.style.left = (containerBounds.width / 2 - PixelZoomer._percentX * kZoomedResultWidth) + 'px';
 862     image.style.top = (containerBounds.height / 2 - PixelZoomer._percentY * kZoomedResultHeight) + 'px';
 863 }
 864
 865 PixelZoomer._drawAll = function()
 866 {
 867     forEach(document.querySelectorAll('.pixel-zoom-container .scaled-image-container'), PixelZoomer._draw);
 868 }
 869
 870 PixelZoomer.handleMouseOut = function(e)
 871 {
 872     if (e.relatedTarget && e.relatedTarget.tagName != 'IFRAME')
 873         return;
 874
 875     // If e.relatedTarget is null, we've moused out of the document.
 876     var container = document.querySelector('.pixel-zoom-container');
 877     if (container)
 878         remove(container);
 879 }
 880
 881 PixelZoomer.handleMouseMove = function(e) {
 882     if (PixelZoomer._mouseMoveTimeout)
 883         clearTimeout(PixelZoomer._mouseMoveTimeout);
 884
 885     if (parentOfType(e.target, '.pixel-zoom-container'))
 886         return;
 887
 888     var container = document.querySelector('.pixel-zoom-container');
 889
 890     var resultContainer = (e.target.className == 'result-container') ?
 891         e.target : parentOfType(e.target, '.result-container');
 892     if (!resultContainer || !resultContainer.querySelector('img')) {
 893         if (container)
 894             remove(container);
 895         return;
 896     }
 897
 898     var targetLocation = e.target.getBoundingClientRect();
 899     PixelZoomer._percentX = (e.clientX - targetLocation.left) / targetLocation.width;
 900     PixelZoomer._percentY = (e.clientY - targetLocation.top) / targetLocation.height;
 901
 902     if (!container) {
 903         if (PixelZoomer.showOnDelay) {
 904             PixelZoomer._mouseMoveTimeout = setTimeout(function() {
 905                 PixelZoomer._createContainer(e);
 906             }, 400);
 907             return;
 908         }
 909
 910         PixelZoomer._createContainer(e);
 911         return;
 912     }
 913
 914     PixelZoomer._drawAll();
 915 }
 916
 917 document.addEventListener('mousemove', PixelZoomer.handleMouseMove, false);
 918 document.addEventListener('mouseout', PixelZoomer.handleMouseOut, false);
 919
 920 var TestNavigator = {};
 921
 922 TestNavigator.reset = function() {
 923     TestNavigator.currentTestIndex = -1;
 924     TestNavigator.flaggedTests = {};
 925     TestNavigator._createFlaggedTestContainer();
 926 }
 927
 928 TestNavigator.handleKeyEvent = function(event)
 929 {
 930     if (event.metaKey || event.shiftKey || event.ctrlKey)
 931         return;
 932
 933     switch (String.fromCharCode(event.charCode)) {
 934         case 'i':
 935             TestNavigator._scrollToFirstTest();
 936             break;
 937         case 'j':
 938             TestNavigator._scrollToNextTest();
 939             break;
 940         case 'k':
 941             TestNavigator._scrollToPreviousTest();
 942             break;
 943         case 'l':
 944             TestNavigator._scrollToLastTest();
 945             break;
 946         case 'e':
 947             TestNavigator._expandCurrentTest();
 948             break;
 949         case 'c':
 950             TestNavigator._collapseCurrentTest();
 951             break;
 952         case 't':
 953             TestNavigator._toggleCurrentTest();
 954             break;
 955         case 'f':
 956             TestNavigator._toggleCurrentTestFlagged();
 957             break;
 958     }
 959 }
 960
 961 TestNavigator._scrollToFirstTest = function()
 962 {
 963     if (TestNavigator._setCurrentTest(0))
 964         TestNavigator._scrollToCurrentTest();
 965 }
 966
 967 TestNavigator._scrollToLastTest = function()
 968 {
 969     var links = visibleTests();
 970     if (TestNavigator._setCurrentTest(links.length - 1))
 971         TestNavigator._scrollToCurrentTest();
 972 }
 973
 974 TestNavigator._scrollToNextTest = function()
 975 {
 976     if (TestNavigator.currentTestIndex == -1)
 977         TestNavigator._scrollToFirstTest();
 978     else if (TestNavigator._setCurrentTest(TestNavigator.currentTestIndex + 1))
 979         TestNavigator._scrollToCurrentTest();
 980 }
 981
 982 TestNavigator._scrollToPreviousTest = function()
 983 {
 984     if (TestNavigator.currentTestIndex == -1)
 985         TestNavigator._scrollToLastTest();
 986     else if (TestNavigator._setCurrentTest(TestNavigator.currentTestIndex - 1))
 987         TestNavigator._scrollToCurrentTest();
 988 }
 989
 990 TestNavigator._currentTestLink = function()
 991 {
 992     var links = visibleTests();
 993     return links[TestNavigator.currentTestIndex];
 994 }
 995
 996 TestNavigator._currentTestExpandLink = function()
 997 {
 998     return TestNavigator._currentTestLink().querySelector('.expand-button-text');
 999 }
1000
1001 TestNavigator._expandCurrentTest = function()
1002 {
1003     expandExpectations(TestNavigator._currentTestExpandLink());
1004 }
1005
1006 TestNavigator._collapseCurrentTest = function()
1007 {
1008     collapseExpectations(TestNavigator._currentTestExpandLink());
1009 }
1010
1011 TestNavigator._toggleCurrentTest = function()
1012 {
1013     toggleExpectations(TestNavigator._currentTestExpandLink());
1014 }
1015
1016 TestNavigator._toggleCurrentTestFlagged = function()
1017 {
1018     var testLink = TestNavigator._currentTestLink();
1019     TestNavigator.flagTest(testLink, !testLink.classList.contains('flagged'));
1020 }
1021
1022 // FIXME: Test navigator shouldn't know anything about flagging. It should probably call out to TestFlagger or something.
1023 TestNavigator.flagTest = function(testTbody, shouldFlag)
1024 {
1025     var testName = testTbody.querySelector('.test-link').innerText;
1026
1027     if (shouldFlag) {
1028         testTbody.classList.add('flagged');
1029         TestNavigator.flaggedTests[testName] = 1;
1030     } else {
1031         testTbody.classList.remove('flagged');
1032         delete TestNavigator.flaggedTests[testName];
1033     }
1034
1035     TestNavigator.updateFlaggedTests();
1036 }
1037
1038 TestNavigator._createFlaggedTestContainer = function()
1039 {
1040     var flaggedTestContainer = document.createElement('div');
1041     flaggedTestContainer.id = 'flagged-test-container';
1042     flaggedTestContainer.innerHTML = '<h2>Flagged Tests</h2>' +
1043         '<label title="Use newlines instead of spaces to separate flagged tests">' +
1044             '<input id="use-newlines" type=checkbox checked onchange="handleToggleUseNewlines()">Use newlines</input>' +
1045         '</label>' +
1046         '<pre id="flagged-tests" contentEditable></pre>';
1047     document.body.appendChild(flaggedTestContainer);
1048 }
1049
1050 TestNavigator.updateFlaggedTests = function()
1051 {
1052     var flaggedTestTextbox = document.getElementById('flagged-tests');
1053     var flaggedTests = Object.keys(this.flaggedTests);
1054     flaggedTests.sort();
1055     var separator = document.getElementById('use-newlines').checked ? '\n' : ' ';
1056     flaggedTestTextbox.innerHTML = flaggedTests.join(separator);
1057     document.getElementById('flagged-test-container').style.display = flaggedTests.length ? '' : 'none';
1058 }
1059
1060 TestNavigator._setCurrentTest = function(testIndex)
1061 {
1062     var links = visibleTests();
1063     if (testIndex < 0 || testIndex >= links.length)
1064         return false;
1065
1066     var currentTest = links[TestNavigator.currentTestIndex];
1067     if (currentTest)
1068         currentTest.classList.remove('current');
1069
1070     TestNavigator.currentTestIndex = testIndex;
1071
1072     currentTest = links[TestNavigator.currentTestIndex];
1073     currentTest.classList.add('current');
1074
1075     return true;
1076 }
1077
1078 TestNavigator._scrollToCurrentTest = function()
1079 {
1080     var targetLink = TestNavigator._currentTestLink();
1081     if (!targetLink)
1082         return;
1083
1084     var rowRect = targetLink.getBoundingClientRect();
1085     var container = document.querySelector('.content-container');
1086     // rowRect is in client coords (i.e. relative to viewport), so we just want to add its top to the current scroll position.
1087     container.scrollTop += rowRect.top - 20;
1088 }
1089
1090 TestNavigator.onlyShowUnexpectedFailuresChanged = function()
1091 {
1092     var currentTest = document.querySelector('.current');
1093     if (!currentTest)
1094         return;
1095
1096     // If our currentTest became hidden, reset the currentTestIndex.
1097     if (onlyShowUnexpectedFailures() && currentTest.classList.contains('expected'))
1098         TestNavigator._scrollToFirstTest();
1099     else {
1100         // Recompute TestNavigator.currentTestIndex
1101         var links = visibleTests();
1102         TestNavigator.currentTestIndex = links.indexOf(currentTest);
1103         window.console.log('TestNavigator.currentTestIndex is ', TestNavigator.currentTestIndex)
1104     }
1105 }
1106
1107 document.addEventListener('keypress', TestNavigator.handleKeyEvent, false);
1108
1109
1110 function onlyShowUnexpectedFailures()
1111 {
1112     return !document.getElementById('show-expected-failures').checked;
1113 }
1114
1115 function handleStderrChange()
1116 {
1117     OptionWriter.save();
1118     document.getElementById('stderr-style').textContent = document.getElementById('show-stderr').checked ?
1119         '' : '#stderr-table { display: none; }';
1120 }
1121
1122 function handleUnexpectedPassesChange()
1123 {
1124     OptionWriter.save();
1125     document.getElementById('unexpected-pass-style').textContent = document.getElementById('show-unexpected-passes').checked ?
1126         '' : '#passes-table { display: none; }';
1127 }
1128
1129 function handleFlakyFailuresChange()
1130 {
1131     OptionWriter.save();
1132     document.getElementById('flaky-failures-style').textContent = document.getElementById('show-flaky-failures').checked ?
1133         '' : '.flaky { display: none; }';
1134 }
1135
1136 function handleUnexpectedResultsChange()
1137 {
1138     OptionWriter.save();
1139     updateExpectedFailures();
1140 }
1141
1142 function updateExpectedFailures()
1143 {
1144     document.getElementById('unexpected-style').textContent = onlyShowUnexpectedFailures() ?
1145         '.expected { display: none; }' : '';
1146
1147     updateTestlistCounts();
1148     TestNavigator.onlyShowUnexpectedFailuresChanged();
1149 }
1150
1151 var OptionWriter = {};
1152
1153 OptionWriter._key = 'run-webkit-tests-options';
1154
1155 OptionWriter.save = function()
1156 {
1157     var options = document.querySelectorAll('label input');
1158     var data = {};
1159     for (var i = 0, len = options.length; i < len; i++) {
1160         var option = options[i];
1161         data[option.id] = option.checked;
1162     }
1163     localStorage.setItem(OptionWriter._key, JSON.stringify(data));
1164 }
1165
1166 OptionWriter.apply = function()
1167 {
1168     var json = localStorage.getItem(OptionWriter._key);
1169     if (!json) {
1170         updateAllOptions();
1171         return;
1172     }
1173
1174     var data = JSON.parse(json);
1175     for (var id in data) {
1176         var input = document.getElementById(id);
1177         if (input)
1178             input.checked = data[id];
1179     }
1180     updateAllOptions();
1181 }
1182
1183 function updateAllOptions()
1184 {
1185     forEach(document.querySelectorAll('input'), function(input) { input.onchange(); });
1186 }
1187
1188 function handleToggleUseNewlines()
1189 {
1190     OptionWriter.save();
1191     TestNavigator.updateFlaggedTests();
1192 }
1193
1194 function handleToggleImagesChange()
1195 {
1196     OptionWriter.save();
1197     updateTogglingImages();
1198 }
1199
1200 function updateTogglingImages()
1201 {
1202     var shouldToggle = document.getElementById('toggle-images').checked;
1203     globalState().shouldToggleImages = shouldToggle;
1204
1205     if (shouldToggle) {
1206         forEach(document.querySelectorAll('table:not(#missing-table) tbody:not([mismatchreftest]) a[href$=".png"]'), convertToTogglingHandler(function(prefix) {
1207             return resultLink(prefix, '-diffs.html', 'images');
1208         }));
1209         forEach(document.querySelectorAll('table:not(#missing-table) tbody:not([mismatchreftest]) img[src$=".png"]'), convertToTogglingHandler(togglingImage));
1210     } else {
1211         forEach(document.querySelectorAll('a[href$="-diffs.html"]'), convertToNonTogglingHandler(resultLink));
1212         forEach(document.querySelectorAll('.animatedImage'), convertToNonTogglingHandler(function (absolutePrefix, suffix) {
1213             return resultIframe(absolutePrefix + suffix);
1214         }));
1215     }
1216
1217     updateImageTogglingTimer();
1218 }
1219
1220 function getResultContainer(node)
1221 {
1222     return (node.tagName == 'IMG') ? parentOfType(node, '.result-container') : node;
1223 }
1224
1225 function convertToTogglingHandler(togglingImageFunction)
1226 {
1227     return function(node) {
1228         var url = (node.tagName == 'IMG') ? node.src : node.href;
1229         if (url.match('-expected.png$'))
1230             remove(getResultContainer(node));
1231         else if (url.match('-actual.png$')) {
1232             var name = parentOfType(node, 'tbody').querySelector('.test-link').textContent;
1233             getResultContainer(node).outerHTML = togglingImageFunction(stripExtension(name));
1234         }
1235     }
1236 }
1237
1238 function convertToNonTogglingHandler(resultFunction)
1239 {
1240     return function(node) {
1241         var prefix = node.getAttribute('data-prefix');
1242         getResultContainer(node).outerHTML = resultFunction(prefix, '-expected.png', 'expected') + resultFunction(prefix, '-actual.png', 'actual');
1243     }
1244 }
1245
1246 function failingTestsTable(tests, title, id)
1247 {
1248     if (!tests.length)
1249         return '';
1250
1251     var numberofUnexpectedFailures = 0;
1252     var tableRowHtml = '';
1253     for (var i = 0; i < tests.length; i++){
1254         tableRowHtml += tableRow(tests[i]);
1255         if (tests[i].is_unexpected)
1256             numberofUnexpectedFailures++;
1257     }
1258
1259     var className = '';
1260     if (id)
1261         className += id.split('-')[0];
1262     if (!hasUnexpected(tests))
1263         className += ' expected';
1264
1265     var header = '<div';
1266     if (className)
1267         header += ' class="' + className + '"';
1268
1269     header += '>' + testListHeaderHtml(title) +
1270         '<table id="' + id + '"><thead><tr>' +
1271         '<th>test</th>' +
1272         '<th id="text-results-header">results</th>' +
1273         '<th id="image-results-header">image results</th>' +
1274         '<th>actual</th>' +
1275         '<th>expected</th>';
1276
1277     if (id == 'flaky-tests-table')
1278         header += '<th>failures</th>';
1279
1280     header += '</tr></thead>';
1281
1282
1283     return header + tableRowHtml + '</table></div>';
1284 }
1285
1286
1287 function generatePage()
1288 {
1289     forEachTest(processGlobalStateFor);
1290
1291     var html = '<div class=content-container><div id=toolbar>' +
1292         '<div class="note">Use the i, j, k and l keys to navigate, e, c to expand and collapse, and f to flag</div>' +
1293         '<a href="javascript:void()" onclick="expandAllExpectations()">expand all</a> ' +
1294         '<a href="javascript:void()" onclick="collapseAllExpectations()">collapse all</a> ' +
1295         '<label><input id="toggle-images" type=checkbox checked onchange="handleToggleImagesChange()">Toggle images</label>' +
1296         '<div id=container>Show: '+
1297         '<label><input id="show-expected-failures" type=checkbox onchange="handleUnexpectedResultsChange()">expected failures</label>' +
1298         '<label><input id="show-flaky-failures" type=checkbox onchange="handleFlakyFailuresChange()">flaky failures</label>' +
1299         '<label><input id="show-unexpected-passes" type=checkbox onchange="handleUnexpectedPassesChange()">unexpected passes</label>' +
1300         '<label><input id="show-stderr" type=checkbox onchange="handleStderrChange()">stderr</label>' +
1301         '</div></div>';
1302
1303     if (globalState().results.interrupted)
1304         html += "<p class='stopped-running-early-message'>Testing exited early.</p>"
1305
1306     if (globalState().crashTests.length)
1307         html += testList(globalState().crashTests, 'Tests that crashed', 'crash-tests-table');
1308
1309     html += failingTestsTable(globalState().failingTests,
1310         'Tests that failed text/pixel/audio diff', 'results-table');
1311
1312     html += failingTestsTable(globalState().missingResults,
1313         'Tests that had no expected results (probably new)', 'missing-table');
1314
1315     if (globalState().timeoutTests.length)
1316         html += testList(globalState().timeoutTests, 'Tests that timed out', 'timeout-tests-table');
1317
1318     if (globalState().testsWithStderr.length)
1319         html += testList(globalState().testsWithStderr, 'Tests that had stderr output', 'stderr-table');
1320
1321     html += failingTestsTable(globalState().flakyPassTests,
1322         'Flaky tests (failed the first run and passed on retry)', 'flaky-tests-table');
1323
1324     if (globalState().unexpectedPassTests.length)
1325         html += testList(globalState().unexpectedPassTests, 'Tests expected to fail but passed', 'passes-table');
1326
1327     if (globalState().hasHttpTests) {
1328         html += '<p>httpd access log: <a href="access_log.txt">access_log.txt</a></p>' +
1329             '<p>httpd error log: <a href="error_log.txt">error_log.txt</a></p>';
1330     }
1331
1332     html += '</div>';
1333
1334     document.body.innerHTML = html;
1335
1336     if (document.getElementById('results-table')) {
1337         document.getElementById('results-table').addEventListener('click', TableSorter.handleClick, false);
1338         TableSorter.sortColumn(0);
1339         if (!globalState().hasTextFailures)
1340             document.getElementById('text-results-header').textContent = '';
1341         if (!globalState().hasImageFailures) {
1342             document.getElementById('image-results-header').textContent = '';
1343             parentOfType(document.getElementById('toggle-images'), 'label').style.display = 'none';
1344         }
1345     }
1346
1347     updateTestlistCounts();
1348
1349     TestNavigator.reset();
1350     OptionWriter.apply();
1351 }
1352 </script>
1353 <!-- HACK: when json_results_test.js is included, loading this page runs the tests.
1354 It is not copied to the layout-test-results output directory. -->
1355 <script src="resources/results-test.js"></script>
1356 <body onload="generatePage()"></body>