diff --git a/test/resources/reftest-analyzer.css b/test/resources/reftest-analyzer.css index 5adc69991..925e7346d 100644 --- a/test/resources/reftest-analyzer.css +++ b/test/resources/reftest-analyzer.css @@ -35,7 +35,7 @@ Original author: L. David Baron } html { - background-color: #FFF; + background-color: #fff; font: message-box; font-size: 14px; } @@ -48,7 +48,8 @@ a { color: #000; } -#loading, #viewer { +#loading, +#viewer { display: none; } @@ -88,8 +89,10 @@ a { display: block; } -#itemtable, #itemtable td, #itemtable th { - border: 1px solid #CCC; +#itemtable, +#itemtable td, +#itemtable th { + border: 1px solid #ccc; padding: 0; } @@ -108,7 +111,7 @@ a { } #itemtable td.selected { - background-color: #DDD; + background-color: #ddd; } #magnification > svg { @@ -172,6 +175,7 @@ a { margin-top: 1em; } -#referenceImage, #differences { +#referenceImage, +#differences { margin: 0 0 10px 20px; } diff --git a/test/resources/reftest-analyzer.js b/test/resources/reftest-analyzer.js index 195ce97d9..37fa1419f 100644 --- a/test/resources/reftest-analyzer.js +++ b/test/resources/reftest-analyzer.js @@ -40,10 +40,10 @@ window.gMagZoom = 16; // size of the zoomed in pixels window.gImage1Data; // ImageData object for the test output image window.gImage2Data; // ImageData object for the reference image window.gFlashingPixels = []; // array of objects that should be flashed due to pixel color mismatch -window.gPath = ''; // path taken from #web= and prepended to ref/snp urls +window.gPath = ""; // path taken from #web= and prepended to ref/snp urls window.gSelected = null; // currently selected comparison -window.onload = function() { +window.onload = function () { load(); function ID(id) { @@ -51,19 +51,19 @@ window.onload = function() { } function hashParameters() { - var result = { }; - var params = window.location.hash.substring(1).split(/[&;]/); - for (var i = 0; i < params.length; i++) { - var parts = params[i].split("="); + const result = {}; + const params = window.location.hash.substring(1).split(/[&;]/); + for (let i = 0; i < params.length; i++) { + const parts = params[i].split("="); result[parts[0]] = unescape(unescape(parts[1])); } return result; } function load() { - gPhases = [ ID("entry"), ID("loading"), ID("viewer") ]; + gPhases = [ID("entry"), ID("loading"), ID("viewer")]; buildMag(); - var params = hashParameters(); + const params = hashParameters(); if (params.log) { ID("logEntry").value = params.log; logPasted(); @@ -74,26 +74,53 @@ window.onload = function() { } function buildMag() { - var mag = ID("mag"); - var r = document.createElementNS(SVG_NS, "rect"); - r.setAttribute("x", gMagZoom * -gMagWidth / 2); - r.setAttribute("y", gMagZoom * -gMagHeight / 2); + const mag = ID("mag"); + const r = document.createElementNS(SVG_NS, "rect"); + r.setAttribute("x", (gMagZoom * -gMagWidth) / 2); + r.setAttribute("y", (gMagZoom * -gMagHeight) / 2); r.setAttribute("width", gMagZoom * gMagWidth); r.setAttribute("height", gMagZoom * gMagHeight); mag.appendChild(r); - mag.setAttribute("transform", "translate(" + (gMagZoom * (gMagWidth / 2) + 1) + "," + (gMagZoom * (gMagHeight / 2) + 1) + ")"); + mag.setAttribute( + "transform", + "translate(" + + (gMagZoom * (gMagWidth / 2) + 1) + + "," + + (gMagZoom * (gMagHeight / 2) + 1) + + ")" + ); - for (var x = 0; x < gMagWidth; x++) { + for (let x = 0; x < gMagWidth; x++) { gMagPixPaths[x] = []; - for (var y = 0; y < gMagHeight; y++) { - var p1 = document.createElementNS(SVG_NS, "path"); - p1.setAttribute("d", "M" + ((x - gMagWidth / 2) + 1) * gMagZoom + "," + (y - gMagHeight / 2) * gMagZoom + "h" + -gMagZoom + "v" + gMagZoom); + for (let y = 0; y < gMagHeight; y++) { + const p1 = document.createElementNS(SVG_NS, "path"); + p1.setAttribute( + "d", + "M" + + (x - gMagWidth / 2 + 1) * gMagZoom + + "," + + (y - gMagHeight / 2) * gMagZoom + + "h" + + -gMagZoom + + "v" + + gMagZoom + ); p1.setAttribute("stroke", "#CCC"); p1.setAttribute("stroke-width", "1px"); p1.setAttribute("fill", "#aaa"); - var p2 = document.createElementNS(SVG_NS, "path"); - p2.setAttribute("d", "M" + ((x - gMagWidth / 2) + 1) * gMagZoom + "," + (y - gMagHeight / 2) * gMagZoom + "v" + gMagZoom + "h" + -gMagZoom); + const p2 = document.createElementNS(SVG_NS, "path"); + p2.setAttribute( + "d", + "M" + + (x - gMagWidth / 2 + 1) * gMagZoom + + "," + + (y - gMagHeight / 2) * gMagZoom + + "v" + + gMagZoom + + "h" + + -gMagZoom + ); p2.setAttribute("stroke", "#CCC"); p2.setAttribute("stroke-width", "1px"); p2.setAttribute("fill", "#888"); @@ -104,17 +131,17 @@ window.onload = function() { } } - var flashedOn = false; - setInterval(function() { + let flashedOn = false; + setInterval(function () { flashedOn = !flashedOn; flashPixels(flashedOn); }, 500); } function showPhase(phaseId) { - for (var i in gPhases) { - var phase = gPhases[i]; - phase.style.display = (phase.id == phaseId) ? "block" : "none"; + for (const i in gPhases) { + const phase = gPhases[i]; + phase.style.display = phase.id == phaseId ? "block" : "none"; } if (phaseId == "viewer") { ID("images").style.display = "none"; @@ -122,39 +149,39 @@ window.onload = function() { } function loadFromWeb(url) { - var lastSlash = url.lastIndexOf('/'); + const lastSlash = url.lastIndexOf("/"); if (lastSlash) { gPath = url.substring(0, lastSlash + 1); } - var r = new XMLHttpRequest(); + const r = new XMLHttpRequest(); r.open("GET", url); - r.onreadystatechange = function() { + r.onreadystatechange = function () { if (r.readyState == 4) { processLog(r.response); } - } + }; r.send(null); } function fileEntryChanged() { showPhase("loading"); - var input = ID("fileEntry"); - var files = input.files; + const input = ID("fileEntry"); + const files = input.files; if (files.length > 0) { // Only handle the first file; don't handle multiple selection. // The parts of the log we care about are ASCII-only. Since we // can ignore lines we don't care about, best to read in as // ISO-8859-1, which guarantees we don't get decoding errors. - var fileReader = new FileReader(); - fileReader.onload = function(e) { - var log = e.target.result; + const fileReader = new FileReader(); + fileReader.onload = function (e) { + const log = e.target.result; if (log) { processLog(log); } else { showPhase("entry"); } - } + }; fileReader.readAsText(files[0], "iso-8859-1"); } // So the user can process the same filename again (after @@ -165,45 +192,47 @@ window.onload = function() { function logPasted() { showPhase("loading"); - var entry = ID("logEntry"); - var log = entry.value; + const entry = ID("logEntry"); + const log = entry.value; entry.value = ""; processLog(log); } - var gTestItems; + let gTestItems; function processLog(contents) { - var lines = contents.split(/[\r\n]+/); + const lines = contents.split(/[\r\n]+/); gTestItems = []; - for (var j in lines) { - var line = lines[j]; - var match = line.match(/^(?:NEXT ERROR )?REFTEST (.*)$/); + for (const j in lines) { + let line = lines[j]; + let match = line.match(/^(?:NEXT ERROR )?REFTEST (.*)$/); if (!match) { continue; } line = match[1]; - match = line.match(/^(TEST-PASS|TEST-UNEXPECTED-PASS|TEST-KNOWN-FAIL|TEST-UNEXPECTED-FAIL)(\(EXPECTED RANDOM\)|) \| ([^\|]+) \|(.*)/); + match = line.match( + /^(TEST-PASS|TEST-UNEXPECTED-PASS|TEST-KNOWN-FAIL|TEST-UNEXPECTED-FAIL)(\(EXPECTED RANDOM\)|) \| ([^\|]+) \|(.*)/ + ); if (match) { - var state = match[1]; - var random = match[2]; - var url = match[3]; - var extra = match[4]; + const state = match[1]; + const random = match[2]; + const url = match[3]; + const extra = match[4]; gTestItems.push({ pass: !state.match(/FAIL$/), // only one of the following three should ever be true unexpected: !!state.match(/^TEST-UNEXPECTED/), - random: (random == "(EXPECTED RANDOM)"), - skip: (extra == " (SKIP)"), - url: url, - images: [] + random: random == "(EXPECTED RANDOM)", + skip: extra == " (SKIP)", + url, + images: [], }); continue; } - match = line.match(/^ IMAGE[^:]*: (.*)$/); + match = line.match(/^ {2}IMAGE[^:]*: (.*)$/); if (match) { - var item = gTestItems[gTestItems.length - 1]; + const item = gTestItems[gTestItems.length - 1]; item.images.push(match[1]); } } @@ -216,24 +245,24 @@ window.onload = function() { return; } - var cell = ID("itemlist"); - var table = document.getElementById("itemtable"); + const cell = ID("itemlist"); + const table = document.getElementById("itemtable"); while (table.childNodes.length > 0) { table.removeChild(table.childNodes[table.childNodes.length - 1]); } - var tbody = document.createElement("tbody"); + const tbody = document.createElement("tbody"); table.appendChild(tbody); for (var i in gTestItems) { - var item = gTestItems[i]; + const item = gTestItems[i]; if (item.pass && !item.unexpected) { continue; } - var tr = document.createElement("tr"); - var rowclass = item.pass ? "pass" : "fail"; - var td = document.createElement("td"); - var text = ""; + const tr = document.createElement("tr"); + let rowclass = item.pass ? "pass" : "fail"; + let td = document.createElement("td"); + let text = ""; if (item.unexpected) { text += "!"; @@ -254,10 +283,10 @@ window.onload = function() { td.id = "url" + i; td.className = "url"; - var match = item.url.match(/\/mozilla\/(.*)/); + const match = item.url.match(/\/mozilla\/(.*)/); text = document.createTextNode(match ? match[1] : item.url); if (item.images.length > 0) { - var a = document.createElement("a"); + const a = document.createElement("a"); a.id = i; a.className = "image"; a.href = "#"; @@ -272,23 +301,27 @@ window.onload = function() { } // Bind an event handler to each image link - var images = document.getElementsByClassName("image"); + const images = document.getElementsByClassName("image"); for (var i = 0; i < images.length; i++) { - images[i].addEventListener("click", function(e) { - showImages(e.target.id); - }, false); + images[i].addEventListener( + "click", + function (e) { + showImages(e.target.id); + }, + false + ); } showPhase("viewer"); } function getImageData(src, whenReady) { - var img = new Image(); - img.onload = function() { - var canvas = document.createElement("canvas"); + const img = new Image(); + img.onload = function () { + const canvas = document.createElement("canvas"); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; - var ctx = canvas.getContext("2d"); + const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); whenReady(ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight)); @@ -298,12 +331,12 @@ window.onload = function() { function showImages(i) { if (gSelected !== null) { - ID('url' + gSelected).classList.remove('selected'); + ID("url" + gSelected).classList.remove("selected"); } gSelected = i; - ID('url' + gSelected).classList.add('selected'); - var item = gTestItems[i]; - var cell = ID("images"); + ID("url" + gSelected).classList.add("selected"); + const item = gTestItems[i]; + const cell = ID("images"); ID("image1").style.display = ""; ID("image2").style.display = "none"; @@ -312,22 +345,34 @@ window.onload = function() { ID("image1").setAttributeNS(XLINK_NS, "xlink:href", gPath + item.images[0]); // Making the href be #image1 doesn't seem to work - ID("feimage1").setAttributeNS(XLINK_NS, "xlink:href", gPath + item.images[0]); + ID("feimage1").setAttributeNS( + XLINK_NS, + "xlink:href", + gPath + item.images[0] + ); if (item.images.length == 1) { ID("imgcontrols").style.display = "none"; } else { ID("imgcontrols").style.display = ""; - ID("image2").setAttributeNS(XLINK_NS, "xlink:href", gPath + item.images[1]); + ID("image2").setAttributeNS( + XLINK_NS, + "xlink:href", + gPath + item.images[1] + ); // Making the href be #image2 doesn't seem to work - ID("feimage2").setAttributeNS(XLINK_NS, "xlink:href", gPath + item.images[1]); + ID("feimage2").setAttributeNS( + XLINK_NS, + "xlink:href", + gPath + item.images[1] + ); } cell.style.display = ""; - getImageData(item.images[0], function(data) { + getImageData(item.images[0], function (data) { gImage1Data = data; syncSVGSize(gImage1Data); }); - getImageData(item.images[1], function(data) { - gImage2Data = data + getImageData(item.images[1], function (data) { + gImage2Data = data; }); } @@ -351,17 +396,17 @@ window.onload = function() { } function flashPixels(on) { - var stroke = on ? "#FF0000" : "#CCC"; - var strokeWidth = on ? "2px" : "1px"; - for (var i = 0; i < gFlashingPixels.length; i++) { + const stroke = on ? "#FF0000" : "#CCC"; + const strokeWidth = on ? "2px" : "1px"; + for (let i = 0; i < gFlashingPixels.length; i++) { gFlashingPixels[i].setAttribute("stroke", stroke); gFlashingPixels[i].setAttribute("stroke-width", strokeWidth); } } function cursorPoint(evt) { - var m = evt.target.getScreenCTM().inverse(); - var p = ID("svg").createSVGPoint(); + const m = evt.target.getScreenCTM().inverse(); + let p = ID("svg").createSVGPoint(); p.x = evt.clientX; p.y = evt.clientY; p = p.matrixTransform(m); @@ -373,42 +418,55 @@ window.onload = function() { } function canvasPixelAsHex(data, x, y) { - var offset = (y * data.width + x) * 4; - var r = data.data[offset]; - var g = data.data[offset + 1]; - var b = data.data[offset + 2]; + const offset = (y * data.width + x) * 4; + const r = data.data[offset]; + const g = data.data[offset + 1]; + const b = data.data[offset + 2]; return "#" + hex2(r) + hex2(g) + hex2(b); } function hexAsRgb(hex) { - return "rgb(" + [parseInt(hex.substring(1, 3), 16), parseInt(hex.substring(3, 5), 16), parseInt(hex.substring(5, 7), 16)] + ")"; + return ( + "rgb(" + + [ + parseInt(hex.substring(1, 3), 16), + parseInt(hex.substring(3, 5), 16), + parseInt(hex.substring(5, 7), 16), + ] + + ")" + ); } function magnify(evt) { - var cursor = cursorPoint(evt); - var x = cursor.x; - var y = cursor.y; - var centerPixelColor1, centerPixelColor2; + const cursor = cursorPoint(evt); + const x = cursor.x; + const y = cursor.y; + let centerPixelColor1, centerPixelColor2; - var dx_lo = -Math.floor(gMagWidth / 2); - var dx_hi = Math.floor(gMagWidth / 2); - var dy_lo = -Math.floor(gMagHeight / 2); - var dy_hi = Math.floor(gMagHeight / 2); + const dx_lo = -Math.floor(gMagWidth / 2); + const dx_hi = Math.floor(gMagWidth / 2); + const dy_lo = -Math.floor(gMagHeight / 2); + const dy_hi = Math.floor(gMagHeight / 2); flashPixels(false); gFlashingPixels = []; - for (var j = dy_lo; j <= dy_hi; j++) { - for (var i = dx_lo; i <= dx_hi; i++) { - var px = x + i; - var py = y + j; - var p1 = gMagPixPaths[i + dx_hi][j + dy_hi][0]; - var p2 = gMagPixPaths[i + dx_hi][j + dy_hi][1]; - if (px < 0 || py < 0 || px >= gImage1Data.width || py >= gImage1Data.height) { + for (let j = dy_lo; j <= dy_hi; j++) { + for (let i = dx_lo; i <= dx_hi; i++) { + const px = x + i; + const py = y + j; + const p1 = gMagPixPaths[i + dx_hi][j + dy_hi][0]; + const p2 = gMagPixPaths[i + dx_hi][j + dy_hi][1]; + if ( + px < 0 || + py < 0 || + px >= gImage1Data.width || + py >= gImage1Data.height + ) { p1.setAttribute("fill", "#aaa"); p2.setAttribute("fill", "#888"); } else { - var color1 = canvasPixelAsHex(gImage1Data, x + i, y + j); - var color2 = canvasPixelAsHex(gImage2Data, x + i, y + j); + const color1 = canvasPixelAsHex(gImage1Data, x + i, y + j); + const color2 = canvasPixelAsHex(gImage2Data, x + i, y + j); p1.setAttribute("fill", color1); p2.setAttribute("fill", color2); if (color1 != color2) { @@ -424,11 +482,18 @@ window.onload = function() { } } flashPixels(true); - showPixelInfo(x, y, centerPixelColor1, hexAsRgb(centerPixelColor1), centerPixelColor2, hexAsRgb(centerPixelColor2)); + showPixelInfo( + x, + y, + centerPixelColor1, + hexAsRgb(centerPixelColor1), + centerPixelColor2, + hexAsRgb(centerPixelColor2) + ); } function showPixelInfo(x, y, pix1rgb, pix1hex, pix2rgb, pix2hex) { - var pixelinfo = ID("pixelinfo"); + const pixelinfo = ID("pixelinfo"); ID("coords").textContent = [x, y]; ID("pix1hex").textContent = pix1hex; ID("pix1rgb").textContent = pix1rgb; @@ -436,46 +501,64 @@ window.onload = function() { ID("pix2rgb").textContent = pix2rgb; } - var logPastedButton = document.getElementById("logPasted"); + const logPastedButton = document.getElementById("logPasted"); logPastedButton.addEventListener("click", logPasted, false); - var fileEntryButton = document.getElementById("fileEntry"); + const fileEntryButton = document.getElementById("fileEntry"); fileEntryButton.addEventListener("change", fileEntryChanged, false); - var testImage = document.getElementById("testImage"); - testImage.addEventListener("click", function() { - showImage(1); - }, false); + const testImage = document.getElementById("testImage"); + testImage.addEventListener( + "click", + function () { + showImage(1); + }, + false + ); - var referenceImage = document.getElementById("referenceImage"); - referenceImage.addEventListener("click", function() { - showImage(2); - }, false); + const referenceImage = document.getElementById("referenceImage"); + referenceImage.addEventListener( + "click", + function () { + showImage(2); + }, + false + ); - var differences = document.getElementById("differences"); - differences.addEventListener("click", function(e) { - showDifferences(e.target); - }, false); + const differences = document.getElementById("differences"); + differences.addEventListener( + "click", + function (e) { + showDifferences(e.target); + }, + false + ); - var magnifyElement = document.getElementById("magnify"); - magnifyElement.addEventListener("mousemove", function(e) { - magnify(e); - }, false); + const magnifyElement = document.getElementById("magnify"); + magnifyElement.addEventListener( + "mousemove", + function (e) { + magnify(e); + }, + false + ); - window.addEventListener('keydown', function keydown(event) { + window.addEventListener("keydown", function keydown(event) { if (event.which === 84) { // 't' switch test/ref images - var val = 0; + let val = 0; if (document.querySelector('input[name="which"][value="0"]:checked')) { val = 1; } - document.querySelector('input[name="which"][value="' + val + '"]').click(); + document + .querySelector('input[name="which"][value="' + val + '"]') + .click(); } else if (event.which === 68) { // 'd' toggle differences document.getElementById("differences").click(); } else if (event.which === 78 || event.which === 80) { // 'n' next image, 'p' previous image - var select = gSelected; + let select = gSelected; if (gSelected === null) { select = 0; } else if (event.which === 78) { @@ -483,9 +566,9 @@ window.onload = function() { } else { select--; } - var length = gTestItems.length; + const length = gTestItems.length; select = select < 0 ? length - 1 : select >= length ? 0 : select; showImages(select); } }); -} +};