Title: [174662] trunk
- Revision
- 174662
- Author
- [email protected]
- Date
- 2014-10-13 15:44:48 -0700 (Mon, 13 Oct 2014)
Log 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:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (174661 => 174662)
--- trunk/LayoutTests/ChangeLog 2014-10-13 22:35:50 UTC (rev 174661)
+++ trunk/LayoutTests/ChangeLog 2014-10-13 22:44:48 UTC (rev 174662)
@@ -1,5 +1,18 @@
2014-10-13 Simon Fraser <[email protected]>
+ 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 <[email protected]>
+
Gardening.
* platform/mac/TestExpectations:
Modified: trunk/LayoutTests/fast/harness/image-diff-template-expected.txt (174661 => 174662)
--- 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)
@@ -1,2 +1,3 @@
-Difference between images: diff
+Expected Image Actual Image Diff Image
+Animate: Expected Actual Diff
Loading...
Modified: trunk/LayoutTests/fast/harness/image-diff-template.html (174661 => 174662)
--- 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)
@@ -1,57 +1,183 @@
<!DOCTYPE HTML>
<html>
<head>
-<title>%(title)s</title>
+<title>__TITLE__</title>
<style>
- .label {
- font-weight: bold;
+ .imageContainer {
+ position: absolute;
+ margin: 10px;
+ outline: 10px solid silver;
}
+
+ .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;
+ }
</style>
</head>
<body>
-Difference between images: <a href=""
-<div class="imageText"></div>
-<div class="imageContainer" data-prefix="%(prefix)s">Loading...</div>
+<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=""
+ <td><input type="checkbox" id="cycle-expected" _onchange_="updateImageCycle()" checked></input><label for=""
+ <td><input type="checkbox" id="cycle-actual" _onchange_="updateImageCycle()" checked></input><label for=""
+ <td><input type="checkbox" id="cycle-diff" _onchange_="updateImageCycle()"></input><label for=""
+ </tr>
+</table>
+
+<div class="imageContainer" data-prefix="__PREFIX__">Loading...</div>
<script>
if (window.testRunner)
testRunner.dumpAsText();
-(function() {
- var preloadedImageCount = 0;
+var container = document.querySelector('.imageContainer');
- function preloadComplete()
- {
- ++preloadedImageCount;
- if (preloadedImageCount < 2)
- return;
- toggleImages();
- setInterval(toggleImages, 2000)
- }
+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'),
+ },
+};
- function preloadImage(url)
- {
- image = new Image();
- image.addEventListener('load', preloadComplete);
- image.src = ""
- return image;
+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 = ""
+ 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;
}
+}
- 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);
- }
+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;
}
+}
- 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');
-})();
+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]]);
+}
</script>
</body>
</html>
Modified: trunk/Tools/ChangeLog (174661 => 174662)
--- trunk/Tools/ChangeLog 2014-10-13 22:35:50 UTC (rev 174661)
+++ trunk/Tools/ChangeLog 2014-10-13 22:44:48 UTC (rev 174662)
@@ -1,3 +1,16 @@
+2014-10-13 Simon Fraser <[email protected]>
+
+ 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):
+
2014-10-13 Carlos Alberto Lopez Perez <[email protected]>
[XvfbDriver] Regular _expression_ used to match running X servers fails on Fedora 21.
Modified: trunk/Tools/Scripts/webkitpy/layout_tests/controllers/test_result_writer.py (174661 => 174662)
--- 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)
@@ -175,13 +175,8 @@
if self._filesystem.exists(image_diff_template):
image_diff_file = self._filesystem.read_text_file(image_diff_template)
- # 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(''),
- }
+ html = image_diff_file.replace('__TITLE__', self._test_name);
+ html = html.replace('__PREFIX__', self._output_testname(''));
diffs_html_filename = self.output_filename(self.FILENAME_SUFFIX_IMAGE_DIFFS_HTML)
self._filesystem.write_text_file(diffs_html_filename, html)
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
