Changeset 174662 in webkit


Ignore:
Timestamp:
Oct 13, 2014 3:44:48 PM (10 years ago)
Author:
Simon Fraser
Message:

Improve the test image diffs page
​https://bugs.webkit.org/show_bug.cgi?id=137674

Reviewed by Alexey Proskuryakov.

Tools:

Don't treat the input file as a format string, otherwise we have to escape special
characters. Just do a couple of replaces.

  • Scripts/webkitpy/layout_tests/controllers/test_result_writer.py:

(TestResultWriter.write_image_diff_files):

LayoutTests:

New version of the image diff page that has the diff images in-place, and allows
for control of the image toggling.

  • fast/harness/image-diff-template-expected.txt:
  • fast/harness/image-diff-template.html:
Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r174649 r174662  
     12014-10-13  Simon Fraser  <simon.fraser@apple.com>
     2
     3        Improve the test image diffs page
     4        https://bugs.webkit.org/show_bug.cgi?id=137674
     5
     6        Reviewed by Alexey Proskuryakov.
     7       
     8        New version of the image diff page that has the diff images in-place, and allows
     9        for control of the image toggling.
     10
     11        * fast/harness/image-diff-template-expected.txt:
     12        * fast/harness/image-diff-template.html:
     13
    1142014-10-13  Simon Fraser  <simon.fraser@apple.com>
    215

  • trunk/LayoutTests/fast/harness/image-diff-template-expected.txt

    r172368 r174662  
    1 Difference between images: diff
     1Expected Image  Actual Image    Diff Image
     2Animate:        Expected        Actual  Diff
    23Loading...

  • trunk/LayoutTests/fast/harness/image-diff-template.html

    r172368 r174662  
    22<html>
    33<head>
    4 <title>%(title)s</title>
     4<title>__TITLE__</title>
    55<style>
    6     .label {
    7         font-weight: bold;
     6    .imageContainer {
     7        position: absolute;
     8        margin: 10px;
     9        outline: 10px solid silver;
     10    }
     11   
     12    .imageContainer > img {
     13        display: block;
     14    }
     15
     16   
     17    .controls {
     18        margin-bottom: 20px;
     19    }
     20   
     21    .controls button {
     22        width: 12em;
     23    }
     24   
     25    .controls td {
     26        padding: 0 10px;
     27    }
     28   
     29    .controls label {
     30        font-family: -webkit-system-font;
     31        font-size: 11px;
     32    }
     33   
     34    .buttons {
     35    }
     36    .controls > .indicator {
     37        display: table-cell;
     38        -webkit-column-span: 1;
     39        border-top: 2px solid black;
     40    }
     41   
     42    button.selected {
     43        text-decoration: underline;
    844    }
    945</style>
    1046</head>
    1147<body>
    12 Difference between images: <a href="%(diff_filename)s">diff</a><br>
    13 <div class="imageText"></div>
    14 <div class="imageContainer" data-prefix="%(prefix)s">Loading...</div>
     48<table class="controls">
     49    <tr>
     50        <td></td>
     51        <td><button id="expected-label" data-type="expected" onclick="switchToImage(this)">Expected Image</button></td>
     52        <td><button id="actual-label" data-type="actual" onclick="switchToImage(this)">Actual Image</button></td>
     53        <td><button id="diff-label" data-type="diff" onclick="switchToImage(this)">Diff Image</button></td>
     54    </tr>
     55    <tr>
     56        <td><input type="checkbox" id="animate" onchange="toggleAnimate()" checked></input><label for="animate">Animate:</label></td>
     57        <td><input type="checkbox" id="cycle-expected" onchange="updateImageCycle()" checked></input><label for="cycle-expected">Expected</label></td>
     58        <td><input type="checkbox" id="cycle-actual" onchange="updateImageCycle()" checked></input><label for="cycle-actual">Actual</label></td>
     59        <td><input type="checkbox" id="cycle-diff" onchange="updateImageCycle()"></input><label for="cycle-diff">Diff</label></td>
     60    </tr>
     61</table>
     62
     63<div class="imageContainer" data-prefix="__PREFIX__">Loading...</div>
    1564<script>
    1665if (window.testRunner)
    1766    testRunner.dumpAsText();
    1867
    19 (function() {
    20     var preloadedImageCount = 0;
     68var container = document.querySelector('.imageContainer');
    2169
    22     function preloadComplete()
    23     {
    24         ++preloadedImageCount;
    25         if (preloadedImageCount < 2)
    26             return;
    27         toggleImages();
    28         setInterval(toggleImages, 2000)
     70var data = {
     71    'expected' : {
     72        'image' : preloadImage(container.getAttribute('data-prefix') + '-expected.png'),
     73        'label' : document.getElementById('expected-label'),
     74    },
     75    'actual' : {
     76        'image' : preloadImage(container.getAttribute('data-prefix') + '-actual.png'),
     77        'label' : document.getElementById('actual-label'),
     78    },
     79    'diff' : {
     80        'image' : preloadImage(container.getAttribute('data-prefix') + '-diff.png'),
     81        'label' : document.getElementById('diff-label'),
     82    },
     83};
     84
     85var preloadedImageCount = 0;
     86
     87function preloadComplete()
     88{
     89    ++preloadedImageCount;
     90    if (preloadedImageCount < 3)
     91        return;
     92   
     93    showImage(data['actual']);
     94    updateImageCycle();
     95    startCyclingImages();
     96}
     97
     98function preloadImage(url)
     99{
     100    image = new Image();
     101    image.addEventListener('load', preloadComplete);
     102    image.src = url;
     103    return image;
     104}
     105
     106function switchToImage(element)
     107{
     108    var imageType = element.getAttribute('data-type');
     109    showImage(data[imageType]);
     110}
     111
     112function resetLabels()
     113{
     114    for (var item in data)
     115        data[item].label.classList.remove('selected');
     116}
     117
     118function showImage(categoryData)
     119{
     120    container.replaceChild(categoryData.image, container.firstChild);
     121   
     122    resetLabels();
     123    categoryData.label.classList.add('selected');
     124}
     125
     126function updateImageCycle()
     127{
     128    data.expected.cycle = document.getElementById('cycle-expected').checked;
     129    data.actual.cycle = document.getElementById('cycle-actual').checked;
     130    data.diff.cycle = document.getElementById('cycle-diff').checked;
     131}
     132
     133function getCurrentlyShowingImageType()
     134{
     135    for (var item in data) {
     136        if (data[item].label.classList.contains('selected'))
     137            return item;
    29138    }
     139}
    30140
    31     function preloadImage(url)
    32     {
    33         image = new Image();
    34         image.addEventListener('load', preloadComplete);
    35         image.src = url;
    36         return image;
     141function toggleAnimate()
     142{
     143    if (document.getElementById('animate').checked)
     144        startCyclingImages();
     145    else
     146        stopCyclingImages();
     147}
     148
     149var cycleIntervalID;
     150function startCyclingImages()
     151{
     152    stopCyclingImages();
     153    cycleIntervalID = window.setInterval(cycleImages, 2000);
     154}
     155
     156function stopCyclingImages()
     157{
     158    if (cycleIntervalID) {
     159        window.clearInterval(cycleIntervalID);
     160        cycleIntervalID = undefined;
    37161    }
     162}
    38163
    39     function toggleImages()
    40     {
    41         if (text.textContent == 'Expected Image') {
    42             text.textContent = 'Actual Image';
    43             container.replaceChild(actualImage, container.firstChild);
    44         } else {
    45             text.textContent = 'Expected Image';
    46             container.replaceChild(expectedImage, container.firstChild);
    47         }
    48     }
     164function cycleImages()
     165{
     166    var currentImage = getCurrentlyShowingImageType();
     167    var order = ['expected', 'actual', 'diff'];
     168    var index = order.indexOf(currentImage);
     169   
     170    var currIndex = (index + 1) % order.length;
     171    do {
     172        var type = order[currIndex];
     173        if (data[type].cycle)
     174            break;
     175       
     176        currIndex = (currIndex + 1) % order.length;
     177    } while (currIndex != index);
    49178
    50     var text = document.querySelector('.imageText');
    51     var container = document.querySelector('.imageContainer');
    52     var actualImage = preloadImage(container.getAttribute('data-prefix') + '-actual.png');
    53     var expectedImage = preloadImage(container.getAttribute('data-prefix') + '-expected.png');
    54 })();
     179    showImage(data[order[currIndex]]);
     180}
    55181</script>
    56182</body>

  • trunk/Tools/ChangeLog

    r174656 r174662  
     12014-10-13  Simon Fraser  <simon.fraser@apple.com>
     2
     3        Improve the test image diffs page
     4        https://bugs.webkit.org/show_bug.cgi?id=137674
     5
     6        Reviewed by Alexey Proskuryakov.
     7       
     8        Don't treat the input file as a format string, otherwise we have to escape special
     9        characters. Just do a couple of replaces.
     10
     11        * Scripts/webkitpy/layout_tests/controllers/test_result_writer.py:
     12        (TestResultWriter.write_image_diff_files):
     13
    1142014-10-13  Carlos Alberto Lopez Perez  <clopez@igalia.com>
    215

  • trunk/Tools/Scripts/webkitpy/layout_tests/controllers/test_result_writer.py

    r172370 r174662  
    176176            image_diff_file = self._filesystem.read_text_file(image_diff_template)
    177177
    178         # FIXME: old-run-webkit-tests shows the diff percentage as the text contents of the "diff" link.
    179         # FIXME: old-run-webkit-tests include a link to the test file.
    180         html = image_diff_file % {
    181             'title': self._test_name,
    182             'diff_filename': self._output_testname(self.FILENAME_SUFFIX_IMAGE_DIFF),
    183             'prefix': self._output_testname(''),
    184         }
     178        html = image_diff_file.replace('__TITLE__', self._test_name);
     179        html = html.replace('__PREFIX__', self._output_testname(''));
    185180
    186181        diffs_html_filename = self.output_filename(self.FILENAME_SUFFIX_IMAGE_DIFFS_HTML)
Note: See TracChangeset for help on using the changeset viewer.