Changeset 84188 in webkit


Ignore:
Timestamp:
Apr 18, 2011 2:51:21 PM (13 years ago)
Author:
ojan@chromium.org
Message:

2011-04-18 Ojan Vafai <ojan@chromium.org>

Reviewed by Eric Seidel.

add a zoomed view for pixel results to the new results html file
https://bugs.webkit.org/show_bug.cgi?id=58827

  • Scripts/webkitpy/layout_tests/layout_package/json_results.html:
Location:
trunk/Tools
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/Tools/ChangeLog

    r84165 r84188  
     12011-04-18  Ojan Vafai  <ojan@chromium.org>
     2
     3        Reviewed by Eric Seidel.
     4
     5        add a zoomed view for pixel results to the new results html file
     6        https://bugs.webkit.org/show_bug.cgi?id=58827
     7
     8        * Scripts/webkitpy/layout_tests/layout_package/json_results.html:
     9
    1102011-04-18  Ojan Vafai  <ojan@chromium.org>
    211
  • trunk/Tools/Scripts/webkitpy/layout_tests/layout_package/json_results.html

    r84165 r84188  
    7474    border: 0;
    7575    border-top: 1px solid lightgray;
     76    vertical-align: top;
    7677}
    7778
     
    8081    font-weight: bold;
    8182    font-size: small;
     83}
     84
     85.pixel-zoom-container {
     86    position: fixed;
     87    top: 0;
     88    left: 0;
     89    width: 100%;
     90    display: -webkit-box;
     91}
     92
     93.pixel-zoom-container > * {
     94    display: -webkit-box;
     95    -webkit-box-flex: 1;
     96    border: 1px inset lightgray;
     97    height: 100px;
     98    overflow: hidden;
     99    zoom: 300%;
     100    background-color: white;
     101}
     102
     103.pixel-zoom-container img {
     104    width: 800px;
     105    height: 600px;
     106    vertical-align: top;
    82107}
    83108</style>
     
    127152function appendResultIframe(src, parent)
    128153{
    129     // FIXME: use IMG tags for pixel results.
    130154    var layoutTestsIndex = src.indexOf('LayoutTests');
    131155    var name;
     
    141165    }
    142166
     167    var tagName = (src.lastIndexOf('.png') == -1) ? 'iframe' : 'img';
     168
    143169    var container = document.createElement('div');
    144170    container.className = 'result-container';
    145     container.innerHTML = '<div class=label>' + name + '</div><iframe src="' + src + '?format=txt"></iframe>';
     171    container.innerHTML = '<div class=label>' + name + '</div><' + tagName + ' src="' + src + '?format=txt"></' + tagName + '>';
    146172    parent.appendChild(container);
    147173}
     
    250276
    251277  if (actual.indexOf('IMAGE') != -1) {
    252       // FIXME: allow zooming in on pixel diffs
    253278      hasImageFailures = true;
    254279      row += resultLink(test_prefix, '-expected.png', 'expected') +
     
    403428TableSorter.sortColumn(0);
    404429
     430var PixelZoomer = {};
     431
     432PixelZoomer._createContainer = function(e)
     433{
     434    var tbody = parentOfType(e.target, 'tbody');
     435    var imageDiffLinks = tbody.querySelector('tr').querySelectorAll('a[href$=".png"]');
     436   
     437    var container = document.createElement('div');
     438    container.className = 'pixel-zoom-container';
     439   
     440    var html = '';
     441    for (var i = 0; i < imageDiffLinks.length; i++)
     442        html += '<div class=zoom-image-container><img src="' + imageDiffLinks[i].href + '"></div>';
     443   
     444    container.innerHTML = html;
     445    document.body.appendChild(container);
     446
     447    PixelZoomer._position(e);
     448}
     449
     450PixelZoomer._position = function(e)
     451{
     452    var pageX = e.clientX;
     453    var pageY = e.clientY;
     454    var targetLocation = e.target.getBoundingClientRect();
     455    var x = pageX - targetLocation.left;
     456    var y = pageY - targetLocation.top;
     457
     458    var zoomContainers = document.querySelectorAll('.pixel-zoom-container > .zoom-image-container');
     459    for (var i = 0; i < zoomContainers.length; i++) {
     460        var container = zoomContainers[i];
     461        container.scrollLeft = x - container.offsetWidth / 2;
     462        container.scrollTop = y - container.offsetHeight / 2;
     463    }
     464}
     465
     466PixelZoomer.handleMouseMove = function(e) {
     467    if (PixelZoomer._mouseMoveTimeout)
     468        clearTimeout(PixelZoomer._mouseMoveTimeout);
     469
     470    if (parentOfType(e.target, '.pixel-zoom-container'))
     471        return;
     472
     473    var container = document.querySelector('.pixel-zoom-container');
     474    if (!e.target.src || e.target.src.indexOf('.png') == -1) {
     475        if (container)
     476            container.parentNode.removeChild(container);
     477        return;
     478    }
     479   
     480    if (!container) {
     481        PixelZoomer._mouseMoveTimeout = setTimeout(function() {
     482            PixelZoomer._createContainer(e);
     483        }, 200);
     484        return;
     485    }
     486   
     487    PixelZoomer._position(e);
     488}
     489
     490document.body.addEventListener('mousemove', PixelZoomer.handleMouseMove, false);
     491
     492
    405493var unexpectedStyleNode = document.createElement('style');
    406494document.body.appendChild(unexpectedStyleNode);
Note: See TracChangeset for help on using the changeset viewer.