<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[174662] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/174662">174662</a></dd>
<dt>Author</dt> <dd>simon.fraser@apple.com</dd>
<dt>Date</dt> <dd>2014-10-13 15:44:48 -0700 (Mon, 13 Oct 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>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:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastharnessimagedifftemplateexpectedtxt">trunk/LayoutTests/fast/harness/image-diff-template-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastharnessimagedifftemplatehtml">trunk/LayoutTests/fast/harness/image-diff-template.html</a></li>
<li><a href="#trunkToolsChangeLog">trunk/Tools/ChangeLog</a></li>
<li><a href="#trunkToolsScriptswebkitpylayout_testscontrollerstest_result_writerpy">trunk/Tools/Scripts/webkitpy/layout_tests/controllers/test_result_writer.py</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (174661 => 174662)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-10-13 22:35:50 UTC (rev 174661)
+++ trunk/LayoutTests/ChangeLog 2014-10-13 22:44:48 UTC (rev 174662)
</span><span class="lines">@@ -1,5 +1,18 @@
</span><span class="cx"> 2014-10-13 Simon Fraser <simon.fraser@apple.com>
</span><span class="cx">
</span><ins>+ Improve the test image diffs page
+ https://bugs.webkit.org/show_bug.cgi?id=137674
+
+ Reviewed by Alexey Proskuryakov.
+
+ 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:
+
+2014-10-13 Simon Fraser <simon.fraser@apple.com>
+
</ins><span class="cx"> Gardening.
</span><span class="cx">
</span><span class="cx"> * platform/mac/TestExpectations:
</span></span></pre></div>
<a id="trunkLayoutTestsfastharnessimagedifftemplateexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/harness/image-diff-template-expected.txt (174661 => 174662)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/harness/image-diff-template-expected.txt 2014-10-13 22:35:50 UTC (rev 174661)
+++ trunk/LayoutTests/fast/harness/image-diff-template-expected.txt 2014-10-13 22:44:48 UTC (rev 174662)
</span><span class="lines">@@ -1,2 +1,3 @@
</span><del>-Difference between images: diff
</del><ins>+Expected Image Actual Image Diff Image
+Animate: Expected Actual Diff
</ins><span class="cx"> Loading...
</span></span></pre></div>
<a id="trunkLayoutTestsfastharnessimagedifftemplatehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/harness/image-diff-template.html (174661 => 174662)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/harness/image-diff-template.html 2014-10-13 22:35:50 UTC (rev 174661)
+++ trunk/LayoutTests/fast/harness/image-diff-template.html 2014-10-13 22:44:48 UTC (rev 174662)
</span><span class="lines">@@ -1,57 +1,183 @@
</span><span class="cx"> <!DOCTYPE HTML>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><del>-<title>%(title)s</title>
</del><ins>+<title>__TITLE__</title>
</ins><span class="cx"> <style>
</span><del>- .label {
- font-weight: bold;
</del><ins>+ .imageContainer {
+ position: absolute;
+ margin: 10px;
+ outline: 10px solid silver;
</ins><span class="cx"> }
</span><ins>+
+ .imageContainer > img {
+ display: block;
+ }
+
+
+ .controls {
+ margin-bottom: 20px;
+ }
+
+ .controls button {
+ width: 12em;
+ }
+
+ .controls td {
+ padding: 0 10px;
+ }
+
+ .controls label {
+ font-family: -webkit-system-font;
+ font-size: 11px;
+ }
+
+ .buttons {
+ }
+ .controls > .indicator {
+ display: table-cell;
+ -webkit-column-span: 1;
+ border-top: 2px solid black;
+ }
+
+ button.selected {
+ text-decoration: underline;
+ }
</ins><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><del>-Difference between images: <a href="%(diff_filename)s">diff</a><br>
-<div class="imageText"></div>
-<div class="imageContainer" data-prefix="%(prefix)s">Loading...</div>
</del><ins>+<table class="controls">
+ <tr>
+ <td></td>
+ <td><button id="expected-label" data-type="expected" onclick="switchToImage(this)">Expected Image</button></td>
+ <td><button id="actual-label" data-type="actual" onclick="switchToImage(this)">Actual Image</button></td>
+ <td><button id="diff-label" data-type="diff" onclick="switchToImage(this)">Diff Image</button></td>
+ </tr>
+ <tr>
+ <td><input type="checkbox" id="animate" onchange="toggleAnimate()" checked></input><label for="animate">Animate:</label></td>
+ <td><input type="checkbox" id="cycle-expected" onchange="updateImageCycle()" checked></input><label for="cycle-expected">Expected</label></td>
+ <td><input type="checkbox" id="cycle-actual" onchange="updateImageCycle()" checked></input><label for="cycle-actual">Actual</label></td>
+ <td><input type="checkbox" id="cycle-diff" onchange="updateImageCycle()"></input><label for="cycle-diff">Diff</label></td>
+ </tr>
+</table>
+
+<div class="imageContainer" data-prefix="__PREFIX__">Loading...</div>
</ins><span class="cx"> <script>
</span><span class="cx"> if (window.testRunner)
</span><span class="cx"> testRunner.dumpAsText();
</span><span class="cx">
</span><del>-(function() {
- var preloadedImageCount = 0;
</del><ins>+var container = document.querySelector('.imageContainer');
</ins><span class="cx">
</span><del>- function preloadComplete()
- {
- ++preloadedImageCount;
- if (preloadedImageCount < 2)
- return;
- toggleImages();
- setInterval(toggleImages, 2000)
- }
</del><ins>+var data = {
+ 'expected' : {
+ 'image' : preloadImage(container.getAttribute('data-prefix') + '-expected.png'),
+ 'label' : document.getElementById('expected-label'),
+ },
+ 'actual' : {
+ 'image' : preloadImage(container.getAttribute('data-prefix') + '-actual.png'),
+ 'label' : document.getElementById('actual-label'),
+ },
+ 'diff' : {
+ 'image' : preloadImage(container.getAttribute('data-prefix') + '-diff.png'),
+ 'label' : document.getElementById('diff-label'),
+ },
+};
</ins><span class="cx">
</span><del>- function preloadImage(url)
- {
- image = new Image();
- image.addEventListener('load', preloadComplete);
- image.src = url;
- return image;
</del><ins>+var preloadedImageCount = 0;
+
+function preloadComplete()
+{
+ ++preloadedImageCount;
+ if (preloadedImageCount < 3)
+ return;
+
+ showImage(data['actual']);
+ updateImageCycle();
+ startCyclingImages();
+}
+
+function preloadImage(url)
+{
+ image = new Image();
+ image.addEventListener('load', preloadComplete);
+ image.src = url;
+ return image;
+}
+
+function switchToImage(element)
+{
+ var imageType = element.getAttribute('data-type');
+ showImage(data[imageType]);
+}
+
+function resetLabels()
+{
+ for (var item in data)
+ data[item].label.classList.remove('selected');
+}
+
+function showImage(categoryData)
+{
+ container.replaceChild(categoryData.image, container.firstChild);
+
+ resetLabels();
+ categoryData.label.classList.add('selected');
+}
+
+function updateImageCycle()
+{
+ data.expected.cycle = document.getElementById('cycle-expected').checked;
+ data.actual.cycle = document.getElementById('cycle-actual').checked;
+ data.diff.cycle = document.getElementById('cycle-diff').checked;
+}
+
+function getCurrentlyShowingImageType()
+{
+ for (var item in data) {
+ if (data[item].label.classList.contains('selected'))
+ return item;
</ins><span class="cx"> }
</span><ins>+}
</ins><span class="cx">
</span><del>- function toggleImages()
- {
- if (text.textContent == 'Expected Image') {
- text.textContent = 'Actual Image';
- container.replaceChild(actualImage, container.firstChild);
- } else {
- text.textContent = 'Expected Image';
- container.replaceChild(expectedImage, container.firstChild);
- }
</del><ins>+function toggleAnimate()
+{
+ if (document.getElementById('animate').checked)
+ startCyclingImages();
+ else
+ stopCyclingImages();
+}
+
+var cycleIntervalID;
+function startCyclingImages()
+{
+ stopCyclingImages();
+ cycleIntervalID = window.setInterval(cycleImages, 2000);
+}
+
+function stopCyclingImages()
+{
+ if (cycleIntervalID) {
+ window.clearInterval(cycleIntervalID);
+ cycleIntervalID = undefined;
</ins><span class="cx"> }
</span><ins>+}
</ins><span class="cx">
</span><del>- var text = document.querySelector('.imageText');
- var container = document.querySelector('.imageContainer');
- var actualImage = preloadImage(container.getAttribute('data-prefix') + '-actual.png');
- var expectedImage = preloadImage(container.getAttribute('data-prefix') + '-expected.png');
-})();
</del><ins>+function cycleImages()
+{
+ var currentImage = getCurrentlyShowingImageType();
+ var order = ['expected', 'actual', 'diff'];
+ var index = order.indexOf(currentImage);
+
+ var currIndex = (index + 1) % order.length;
+ do {
+ var type = order[currIndex];
+ if (data[type].cycle)
+ break;
+
+ currIndex = (currIndex + 1) % order.length;
+ } while (currIndex != index);
+
+ showImage(data[order[currIndex]]);
+}
</ins><span class="cx"> </script>
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre></div>
<a id="trunkToolsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Tools/ChangeLog (174661 => 174662)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Tools/ChangeLog 2014-10-13 22:35:50 UTC (rev 174661)
+++ trunk/Tools/ChangeLog 2014-10-13 22:44:48 UTC (rev 174662)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2014-10-13 Simon Fraser <simon.fraser@apple.com>
+
+ Improve the test image diffs page
+ https://bugs.webkit.org/show_bug.cgi?id=137674
+
+ Reviewed by Alexey Proskuryakov.
+
+ 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):
+
</ins><span class="cx"> 2014-10-13 Carlos Alberto Lopez Perez <clopez@igalia.com>
</span><span class="cx">
</span><span class="cx"> [XvfbDriver] Regular expression used to match running X servers fails on Fedora 21.
</span></span></pre></div>
<a id="trunkToolsScriptswebkitpylayout_testscontrollerstest_result_writerpy"></a>
<div class="modfile"><h4>Modified: trunk/Tools/Scripts/webkitpy/layout_tests/controllers/test_result_writer.py (174661 => 174662)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Tools/Scripts/webkitpy/layout_tests/controllers/test_result_writer.py 2014-10-13 22:35:50 UTC (rev 174661)
+++ trunk/Tools/Scripts/webkitpy/layout_tests/controllers/test_result_writer.py 2014-10-13 22:44:48 UTC (rev 174662)
</span><span class="lines">@@ -175,13 +175,8 @@
</span><span class="cx"> if self._filesystem.exists(image_diff_template):
</span><span class="cx"> image_diff_file = self._filesystem.read_text_file(image_diff_template)
</span><span class="cx">
</span><del>- # FIXME: old-run-webkit-tests shows the diff percentage as the text contents of the "diff" link.
- # FIXME: old-run-webkit-tests include a link to the test file.
- html = image_diff_file % {
- 'title': self._test_name,
- 'diff_filename': self._output_testname(self.FILENAME_SUFFIX_IMAGE_DIFF),
- 'prefix': self._output_testname(''),
- }
</del><ins>+ html = image_diff_file.replace('__TITLE__', self._test_name);
+ html = html.replace('__PREFIX__', self._output_testname(''));
</ins><span class="cx">
</span><span class="cx"> diffs_html_filename = self.output_filename(self.FILENAME_SUFFIX_IMAGE_DIFFS_HTML)
</span><span class="cx"> self._filesystem.write_text_file(diffs_html_filename, html)
</span></span></pre>
</div>
</div>
</body>
</html>