From e0daabd2dd2cc3272728806a6b926baba15b85e1 Mon Sep 17 00:00:00 2001
From: Jani Pehkonen <janpe2@users.noreply.github.com>
Date: Tue, 10 Mar 2020 19:09:15 +0200
Subject: [PATCH] Magnifier positioning in reftest analyzer

When reftest analyzer shows magnified pixels, there is a seemingly random offset between the mouse position and the magnified position. The reason for this is that reftest analyzer assumes all images have 800 * 1000 pixels but actually the test images have varying sizes.
---
 test/resources/reftest-analyzer.html |  2 +-
 test/resources/reftest-analyzer.js   | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/test/resources/reftest-analyzer.html b/test/resources/reftest-analyzer.html
index a3e5b030d..2836f6860 100644
--- a/test/resources/reftest-analyzer.html
+++ b/test/resources/reftest-analyzer.html
@@ -104,7 +104,7 @@ Original author: L. David Baron <dbaron@dbaron.org>
         <input type="checkbox" id="differences"> Circle differences
       </label>
     </form>
-    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800px" height="1130px" viewbox="0 0 800 1130" id="svg">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="1000" id="svg">
       <defs>
         <!-- use sRGB to avoid loss of data -->
         <filter id="showDifferences" x="0%" y="0%" width="100%" height="100%"
diff --git a/test/resources/reftest-analyzer.js b/test/resources/reftest-analyzer.js
index 828cbe54c..195ce97d9 100644
--- a/test/resources/reftest-analyzer.js
+++ b/test/resources/reftest-analyzer.js
@@ -285,13 +285,13 @@ window.onload = function() {
     var img = new Image();
     img.onload = function() {
       var canvas = document.createElement("canvas");
-      canvas.width = 800;
-      canvas.height = 1000;
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
 
       var ctx = canvas.getContext("2d");
       ctx.drawImage(img, 0, 0);
 
-      whenReady(ctx.getImageData(0, 0, 800, 1000));
+      whenReady(ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight));
     };
     img.src = gPath + src;
   }
@@ -323,13 +323,19 @@ window.onload = function() {
     }
     cell.style.display = "";
     getImageData(item.images[0], function(data) {
-      gImage1Data = data
+      gImage1Data = data;
+      syncSVGSize(gImage1Data);
     });
     getImageData(item.images[1], function(data) {
       gImage2Data = data
     });
   }
 
+  function syncSVGSize(imageData) {
+    ID("svg").setAttribute("width", imageData.width);
+    ID("svg").setAttribute("height", imageData.height);
+  }
+
   function showImage(i) {
     if (i == 1) {
       ID("image1").style.display = "";
@@ -397,7 +403,7 @@ window.onload = function() {
         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 >= 800 || py >= 1000) {
+        if (px < 0 || py < 0 || px >= gImage1Data.width || py >= gImage1Data.height) {
           p1.setAttribute("fill", "#aaa");
           p2.setAttribute("fill", "#888");
         } else {