From 3b99665b3210ae0dccae762fddeef0e25ca44309 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen <richard@palaepi.org.uk>
Date: Tue, 17 Sep 2024 12:16:00 +0100
Subject: [PATCH 1/5] Fixed: removeChild on Node

The overlay.js code has been changed to apply a div wrapper to the overlay element as opposed to its innerHTML.
---
 src/overlay.js           | 33 +++++++++++-----
 test/modules/overlays.js | 83 +++++++++++++++++++++++++---------------
 2 files changed, 76 insertions(+), 40 deletions(-)

diff --git a/src/overlay.js b/src/overlay.js
index 7d485d42..6bec18cf 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -128,9 +128,22 @@
             };
         }
 
+        this.elementWrapper = document.createElement('div');
         this.element = options.element;
-        this.element.innerHTML = "<div>" + this.element.innerHTML + "</div>";
-        this.style = options.element.style;
+        this.elementWrapper.appendChild(this.element);
+
+        if (this.element.id) {
+            this.elementWrapper.id = "overlay-wrapper-" + this.element.id;
+        } else {
+            this.elementWrapper.id = "overlay-wrapper";
+        }
+
+        const overlayStyles = window.getComputedStyle(this.element);
+
+        for (let style of overlayStyles) {
+            this.elementWrapper.style[style] = overlayStyles.getPropertyValue(style);
+        }
+        this.style = this.elementWrapper.style;
         this._init(options);
     };
 
@@ -197,7 +210,7 @@
          * @function
          */
         destroy: function() {
-            var element = this.element;
+            var element = this.elementWrapper;
             var style = this.style;
 
             if (element.parentNode) {
@@ -242,7 +255,7 @@
          * @param {Element} container
          */
         drawHTML: function(container, viewport) {
-            var element = this.element;
+            var element = this.elementWrapper;
             if (element.parentNode !== container) {
                 //save the source parent for later if we need it
                 element.prevElementParent = element.parentNode;
@@ -253,7 +266,7 @@
                 this.style.position = "absolute";
                 // this.size is used by overlays which don't get scaled in at
                 // least one direction when this.checkResize is set to false.
-                this.size = $.getElementSize(element);
+                this.size = $.getElementSize(this.elementWrapper);
             }
             var positionAndSize = this._getOverlayPositionAndSize(viewport);
             var position = positionAndSize.position;
@@ -270,15 +283,17 @@
                 this.onDraw(position, size, this.element);
             } else {
                 var style = this.style;
-                var innerElement = element.firstChild;
-                var innerStyle = innerElement.style;
+                var innerStyle = this.element.style;
+                innerStyle.display = "block";
                 style.left = position.x + "px";
                 style.top = position.y + "px";
                 if (this.width !== null) {
                     style.width = size.x + "px";
+                    innerStyle.width = size.x + "px";
                 }
                 if (this.height !== null) {
                     style.height = size.y + "px";
+                    innerStyle.height = size.y + "px";
                 }
                 var transformOriginProp = $.getCssPropertyWithVendorPrefix(
                     'transformOrigin');
@@ -303,7 +318,7 @@
                         style[transformProp] = "";
                     }
                 }
-                style.display = 'block';
+                style.display = 'flex';
             }
         },
 
@@ -355,7 +370,7 @@
             }
             if (this.checkResize &&
                 (this.width === null || this.height === null)) {
-                var eltSize = this.size = $.getElementSize(this.element);
+                var eltSize = this.size = $.getElementSize(this.elementWrapper);
                 if (this.width === null) {
                     width = eltSize.x;
                 }
diff --git a/test/modules/overlays.js b/test/modules/overlays.js
index 8b9cd58f..2b988acb 100644
--- a/test/modules/overlays.js
+++ b/test/modules/overlays.js
@@ -254,7 +254,7 @@
 
             var expPosition = viewport.imageToViewerElementCoordinates(
                 new OpenSeadragon.Point(13, 120));
-            var actPosition = $("#overlay").position();
+            var actPosition = $("#overlay-wrapper-overlay").position();
             Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
                 "X position mismatch " + contextMessage);
             Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@@ -263,23 +263,23 @@
             var zoom = viewport.viewportToImageZoom(viewport.getZoom(true));
             var expectedWidth = 124 * zoom;
             var expectedHeight = 132 * zoom;
-            Util.assessNumericValue(assert, $("#overlay").width(), expectedWidth, epsilon,
+            Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").width(), expectedWidth, epsilon,
                 "Width mismatch " + contextMessage);
-            Util.assessNumericValue(assert, $("#overlay").height(), expectedHeight, epsilon,
+            Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").height(), expectedHeight, epsilon,
                 "Height mismatch " + contextMessage);
 
 
             expPosition = viewport.imageToViewerElementCoordinates(
                 new OpenSeadragon.Point(400, 500));
-            actPosition = $("#fixed-overlay").position();
+            actPosition = $("#overlay-wrapper-fixed-overlay").position();
             Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
                 "Fixed overlay X position mismatch " + contextMessage);
             Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
                 "Fixed overlay Y position mismatch " + contextMessage);
 
-            Util.assessNumericValue(assert, $("#fixed-overlay").width(), 70, epsilon,
+            Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").width(), 70, epsilon,
                 "Fixed overlay width mismatch " + contextMessage);
-            Util.assessNumericValue(assert, $("#fixed-overlay").height(), 60, epsilon,
+            Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").height(), 60, epsilon,
                 "Fixed overlay height mismatch " + contextMessage);
         }
 
@@ -326,7 +326,7 @@
 
             var expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.2, 0.1));
-            var actPosition = $("#overlay").position();
+            var actPosition = $("#overlay-wrapper-overlay").position();
             Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
                 "X position mismatch " + contextMessage);
             Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@@ -334,23 +334,23 @@
 
             var expectedSize = viewport.deltaPixelsFromPoints(
                 new OpenSeadragon.Point(0.5, 0.1));
-            Util.assessNumericValue(assert, $("#overlay").width(), expectedSize.x, epsilon,
+            Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").width(), expectedSize.x, epsilon,
                 "Width mismatch " + contextMessage);
-            Util.assessNumericValue(assert, $("#overlay").height(), expectedSize.y, epsilon,
+            Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").height(), expectedSize.y, epsilon,
                 "Height mismatch " + contextMessage);
 
 
             expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.5, 0.6));
-            actPosition = $("#fixed-overlay").position();
+            actPosition = $("#overlay-wrapper-fixed-overlay").position();
             Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
                 "Fixed overlay X position mismatch " + contextMessage);
             Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
                 "Fixed overlay Y position mismatch " + contextMessage);
 
-            Util.assessNumericValue(assert, $("#fixed-overlay").width(), 70, epsilon,
+            Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").width(), 70, epsilon,
                 "Fixed overlay width mismatch " + contextMessage);
-            Util.assessNumericValue(assert, $("#fixed-overlay").height(), 60, epsilon,
+            Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").height(), 60, epsilon,
                 "Fixed overlay height mismatch " + contextMessage);
         }
 
@@ -402,7 +402,7 @@
 
             var expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.2, 0.1));
-            var actPosition = $("#overlay").position();
+            var actPosition = $("#overlay-wrapper-overlay").position();
             Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
                 "X position mismatch " + contextMessage);
             Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@@ -415,7 +415,7 @@
             var expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.5, 0.6))
                 .plus(expectedOffset);
-            var actPosition = $("#fixed-overlay").position();
+            var actPosition = $("#overlay-wrapper-fixed-overlay").position();
             Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
                 "Fixed overlay X position mismatch " + contextMessage);
             Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@@ -481,7 +481,7 @@
             var expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.5, 0.6))
                 .plus(expectedOffset);
-            var actPosition = $("#fixed-overlay").position();
+            var actPosition = $("#overlay-wrapper-fixed-overlay").position();
             Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
                 "Fixed overlay X position mismatch " + contextMessage);
             Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@@ -492,8 +492,8 @@
             checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
                 "with overlay of size 70,60.");
 
-            $("#fixed-overlay").width(50);
-            $("#fixed-overlay").height(40);
+            $("#overlay-wrapper-fixed-overlay").width(50);
+            $("#overlay-wrapper-fixed-overlay").height(40);
 
             // The resizing of the overlays is not detected by the viewer's loop.
             viewer.forceRedraw();
@@ -503,8 +503,8 @@
                     "with overlay of size 50,40.");
 
                 // Restore original size
-                $("#fixed-overlay").width(70);
-                $("#fixed-overlay").height(60);
+                $("#overlay-wrapper-fixed-overlay").width(70);
+                $("#overlay-wrapper-fixed-overlay").height(60);
 
                 done();
             }, 100);
@@ -536,7 +536,7 @@
             var expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.5, 0.6))
                 .plus(expectedOffset);
-            var actPosition = $("#fixed-overlay").position();
+            var actPosition = $("#overlay-wrapper-fixed-overlay").position();
             Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
                 "Fixed overlay X position mismatch " + contextMessage);
             Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
@@ -547,8 +547,8 @@
             checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
                 "with overlay of size 70,60.");
 
-            $("#fixed-overlay").width(50);
-            $("#fixed-overlay").height(40);
+            $("#overlay-wrapper-fixed-overlay").width(50);
+            $("#overlay-wrapper-fixed-overlay").height(40);
 
             // The resizing of the overlays is not detected by the viewer's loop.
             viewer.forceRedraw();
@@ -558,8 +558,8 @@
                     "with overlay of size 50,40.");
 
                 // Restore original size
-                $("#fixed-overlay").width(70);
-                $("#fixed-overlay").height(60);
+                $("#overlay-wrapper-fixed-overlay").width(70);
+                $("#overlay-wrapper-fixed-overlay").height(60);
 
                 done();
             }, 100);
@@ -783,7 +783,7 @@
         viewer.addOnceHandler('open', function() {
             var viewport = viewer.viewport;
 
-            var $overlay = $("#fully-scaled-overlay");
+            var $overlay = $("#overlay-wrapper-fully-scaled-overlay");
             var expectedSize = viewport.deltaPixelsFromPointsNoRotate(
                 new OpenSeadragon.Point(1, 1));
             var expectedPosition = viewport.viewportToViewerElementCoordinates(
@@ -834,7 +834,7 @@
         });
 
         viewer.addOnceHandler('open', function() {
-            var $overlay = $("#horizontally-scaled-overlay");
+            var $overlay = $("#overlay-wrapper-horizontally-scaled-overlay");
             var notScaledWidth = 100;
             var notScaledHeight = 100;
             $overlay.get(0).style.height = notScaledHeight + "px";
@@ -897,7 +897,7 @@
         });
 
         viewer.addOnceHandler('open', function() {
-            var $overlay = $("#vertically-scaled-overlay");
+            var $overlay = $("#overlay-wrapper-vertically-scaled-overlay");
             var notScaledWidth = 100;
             var notScaledHeight = 100;
             $overlay.get(0).style.width = notScaledWidth + "px";
@@ -959,7 +959,7 @@
         });
 
         viewer.addOnceHandler('open', function() {
-            var $overlay = $("#not-scaled-overlay");
+            var $overlay = $("#overlay-wrapper-not-scaled-overlay");
             var notScaledWidth = 100;
             var notScaledHeight = 100;
             $overlay.get(0).style.width = notScaledWidth + "px";
@@ -1024,7 +1024,7 @@
         viewer.addOnceHandler('open', function() {
             var viewport = viewer.viewport;
 
-            var $overlay = $("#fully-scaled-overlay");
+            var $overlay = $("#overlay-wrapper-fully-scaled-overlay");
             var expectedRect = viewport.viewportToViewerElementRectangle(
                 new OpenSeadragon.Rect(0, 0, 1, 1)).getBoundingBox();
             var actualPosition = $overlay.position();
@@ -1060,6 +1060,28 @@
         });
     });
 
+
+    // ----------
+    QUnit.test('Remove Child from Overlay', function(assert){
+        var done = assert.async();
+        viewer = OpenSeadragon({
+            id: 'example-overlays',
+            prefixUrl: '/build/openseadragon/images/',
+            tileSources: '/test/data/testpattern.dzi'
+        });
+
+        viewer.addOnceHandler('open', function() {
+            var $overlay = document.createElement("div");
+            var something = document.createElement("p");
+            $overlay.appendChild(something);
+            viewer.addOverlay($overlay);
+            $overlay.removeChild(something);
+            something.innerHTML = '...';
+            assert.equal(something.innerHTML, '...');
+            done();
+        });
+    });
+
     // ----------
     QUnit.test('Fully scaled overlay rotation mode EXACT', function(assert) {
         var done = assert.async();
@@ -1082,8 +1104,7 @@
 
         viewer.addOnceHandler('open', function() {
             var viewport = viewer.viewport;
-
-            var $overlay = $("#fully-scaled-overlay");
+            var $overlay = $("#overlay-wrapper-fully-scaled-overlay");
             var expectedSize = viewport.deltaPixelsFromPointsNoRotate(
                 new OpenSeadragon.Point(1, 1));
             var expectedPosition = viewport.pixelFromPoint(

From b28b77fdbd58d4952f97fc2efff81f50b3451791 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen <richard@palaepi.org.uk>
Date: Tue, 17 Sep 2024 23:30:06 +0100
Subject: [PATCH 2/5] FIxed: Removed unnecessary references in selectors

We can test the overlay dimensions still
---
 test/modules/overlays.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/test/modules/overlays.js b/test/modules/overlays.js
index 2b988acb..df0e799a 100644
--- a/test/modules/overlays.js
+++ b/test/modules/overlays.js
@@ -263,9 +263,9 @@
             var zoom = viewport.viewportToImageZoom(viewport.getZoom(true));
             var expectedWidth = 124 * zoom;
             var expectedHeight = 132 * zoom;
-            Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").width(), expectedWidth, epsilon,
+            Util.assessNumericValue(assert, $("#overlay").width(), expectedWidth, epsilon,
                 "Width mismatch " + contextMessage);
-            Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").height(), expectedHeight, epsilon,
+            Util.assessNumericValue(assert, $("#overlay").height(), expectedHeight, epsilon,
                 "Height mismatch " + contextMessage);
 
 
@@ -277,9 +277,9 @@
             Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
                 "Fixed overlay Y position mismatch " + contextMessage);
 
-            Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").width(), 70, epsilon,
+            Util.assessNumericValue(assert, $("#fixed-overlay").width(), 70, epsilon,
                 "Fixed overlay width mismatch " + contextMessage);
-            Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").height(), 60, epsilon,
+            Util.assessNumericValue(assert, $("#fixed-overlay").height(), 60, epsilon,
                 "Fixed overlay height mismatch " + contextMessage);
         }
 
@@ -334,9 +334,9 @@
 
             var expectedSize = viewport.deltaPixelsFromPoints(
                 new OpenSeadragon.Point(0.5, 0.1));
-            Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").width(), expectedSize.x, epsilon,
+            Util.assessNumericValue(assert, $("#overlay").width(), expectedSize.x, epsilon,
                 "Width mismatch " + contextMessage);
-            Util.assessNumericValue(assert, $("#overlay-wrapper-overlay").height(), expectedSize.y, epsilon,
+            Util.assessNumericValue(assert, $("#overlay").height(), expectedSize.y, epsilon,
                 "Height mismatch " + contextMessage);
 
 
@@ -348,9 +348,9 @@
             Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
                 "Fixed overlay Y position mismatch " + contextMessage);
 
-            Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").width(), 70, epsilon,
+            Util.assessNumericValue(assert, $("#fixed-overlay").width(), 70, epsilon,
                 "Fixed overlay width mismatch " + contextMessage);
-            Util.assessNumericValue(assert, $("#overlay-wrapper-fixed-overlay").height(), 60, epsilon,
+            Util.assessNumericValue(assert, $("#fixed-overlay").height(), 60, epsilon,
                 "Fixed overlay height mismatch " + contextMessage);
         }
 
@@ -492,8 +492,8 @@
             checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
                 "with overlay of size 70,60.");
 
-            $("#overlay-wrapper-fixed-overlay").width(50);
-            $("#overlay-wrapper-fixed-overlay").height(40);
+            $("#fixed-overlay").width(50);
+            $("#fixed-overlay").height(40);
 
             // The resizing of the overlays is not detected by the viewer's loop.
             viewer.forceRedraw();
@@ -503,8 +503,8 @@
                     "with overlay of size 50,40.");
 
                 // Restore original size
-                $("#overlay-wrapper-fixed-overlay").width(70);
-                $("#overlay-wrapper-fixed-overlay").height(60);
+                $("#fixed-overlay").width(70);
+                $("#fixed-overlay").height(60);
 
                 done();
             }, 100);
@@ -547,8 +547,8 @@
             checkFixedOverlayPosition(new OpenSeadragon.Point(-35, -30),
                 "with overlay of size 70,60.");
 
-            $("#overlay-wrapper-fixed-overlay").width(50);
-            $("#overlay-wrapper-fixed-overlay").height(40);
+            $("#fixed-overlay").width(50);
+            $("#fixed-overlay").height(40);
 
             // The resizing of the overlays is not detected by the viewer's loop.
             viewer.forceRedraw();
@@ -558,8 +558,8 @@
                     "with overlay of size 50,40.");
 
                 // Restore original size
-                $("#overlay-wrapper-fixed-overlay").width(70);
-                $("#overlay-wrapper-fixed-overlay").height(60);
+                $("#fixed-overlay").width(70);
+                $("#fixed-overlay").height(60);
 
                 done();
             }, 100);

From c0eae951c6e038ae514b7b5d9b0aa562954d05a7 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen <richard@palaepi.org.uk>
Date: Tue, 17 Sep 2024 23:38:48 +0100
Subject: [PATCH 3/5] Fixed: Removed unnecessary complexity

---
 src/overlay.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/overlay.js b/src/overlay.js
index 6bec18cf..bc903659 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -138,11 +138,6 @@
             this.elementWrapper.id = "overlay-wrapper";
         }
 
-        const overlayStyles = window.getComputedStyle(this.element);
-
-        for (let style of overlayStyles) {
-            this.elementWrapper.style[style] = overlayStyles.getPropertyValue(style);
-        }
         this.style = this.elementWrapper.style;
         this._init(options);
     };

From 4d4ccb99baa1c8dcb6a0226031fcafd28466f7d3 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen <richard@palaepi.org.uk>
Date: Wed, 18 Sep 2024 00:16:41 +0100
Subject: [PATCH 4/5] Fixed: Removed unused style attributes

---
 src/overlay.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/overlay.js b/src/overlay.js
index bc903659..61f5fa88 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -283,11 +283,9 @@
                 style.left = position.x + "px";
                 style.top = position.y + "px";
                 if (this.width !== null) {
-                    style.width = size.x + "px";
                     innerStyle.width = size.x + "px";
                 }
                 if (this.height !== null) {
-                    style.height = size.y + "px";
                     innerStyle.height = size.y + "px";
                 }
                 var transformOriginProp = $.getCssPropertyWithVendorPrefix(

From 2b010a9a597f39368c8dc662e35d5bc0f1a79ee1 Mon Sep 17 00:00:00 2001
From: Richard Benjamin Allen <richard@palaepi.org.uk>
Date: Thu, 19 Sep 2024 21:13:28 +0100
Subject: [PATCH 5/5] Fixed: JQuery cannot be used to get position with wrapper

---
 test/modules/overlays.js | 87 ++++++++++++++++++++--------------------
 1 file changed, 44 insertions(+), 43 deletions(-)

diff --git a/test/modules/overlays.js b/test/modules/overlays.js
index df0e799a..a328f50b 100644
--- a/test/modules/overlays.js
+++ b/test/modules/overlays.js
@@ -254,10 +254,10 @@
 
             var expPosition = viewport.imageToViewerElementCoordinates(
                 new OpenSeadragon.Point(13, 120));
-            var actPosition = $("#overlay-wrapper-overlay").position();
-            Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
+            var actPosition = viewport.pixelFromPoint(viewer.getOverlayById("overlay").position, true);
+            Util.assessNumericValue(assert, actPosition.x, expPosition.x, epsilon,
                 "X position mismatch " + contextMessage);
-            Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
+            Util.assessNumericValue(assert, actPosition.y, expPosition.y, epsilon,
                 "Y position mismatch " + contextMessage);
 
             var zoom = viewport.viewportToImageZoom(viewport.getZoom(true));
@@ -271,10 +271,10 @@
 
             expPosition = viewport.imageToViewerElementCoordinates(
                 new OpenSeadragon.Point(400, 500));
-            actPosition = $("#overlay-wrapper-fixed-overlay").position();
-            Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
+            actPosition = viewport.pixelFromPoint(viewer.getOverlayById("fixed-overlay").position, true);;
+            Util.assessNumericValue(assert, actPosition.x, expPosition.x, epsilon,
                 "Fixed overlay X position mismatch " + contextMessage);
-            Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
+            Util.assessNumericValue(assert, actPosition.y, expPosition.y, epsilon,
                 "Fixed overlay Y position mismatch " + contextMessage);
 
             Util.assessNumericValue(assert, $("#fixed-overlay").width(), 70, epsilon,
@@ -326,10 +326,10 @@
 
             var expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.2, 0.1));
-            var actPosition = $("#overlay-wrapper-overlay").position();
-            Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
+            var actPosition = viewport.pixelFromPoint(viewer.getOverlayById("overlay").position, true);
+            Util.assessNumericValue(assert, actPosition.x, expPosition.x, epsilon,
                 "X position mismatch " + contextMessage);
-            Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
+            Util.assessNumericValue(assert, actPosition.y, expPosition.y, epsilon,
                 "Y position mismatch " + contextMessage);
 
             var expectedSize = viewport.deltaPixelsFromPoints(
@@ -342,10 +342,10 @@
 
             expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.5, 0.6));
-            actPosition = $("#overlay-wrapper-fixed-overlay").position();
-            Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
+            actPosition = viewport.pixelFromPoint(viewer.getOverlayById("fixed-overlay").position, true);
+            Util.assessNumericValue(assert, actPosition.x, expPosition.x, epsilon,
                 "Fixed overlay X position mismatch " + contextMessage);
-            Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
+            Util.assessNumericValue(assert, actPosition.y, expPosition.y, epsilon,
                 "Fixed overlay Y position mismatch " + contextMessage);
 
             Util.assessNumericValue(assert, $("#fixed-overlay").width(), 70, epsilon,
@@ -402,10 +402,10 @@
 
             var expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.2, 0.1));
-            var actPosition = $("#overlay-wrapper-overlay").position();
-            Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
+            var actPosition = viewport.pixelFromPoint(viewer.getOverlayById("overlay").position, true);
+            Util.assessNumericValue(assert, actPosition.x, expPosition.x, epsilon,
                 "X position mismatch " + contextMessage);
-            Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
+            Util.assessNumericValue(assert, actPosition.y, expPosition.y, epsilon,
                 "Y position mismatch " + contextMessage);
         }
 
@@ -415,10 +415,11 @@
             var expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.5, 0.6))
                 .plus(expectedOffset);
-            var actPosition = $("#overlay-wrapper-fixed-overlay").position();
-            Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
+
+            var actPosition = viewport.pixelFromPoint(viewer.getOverlayById("fixed-overlay").position, true).plus(expectedOffset);
+            Util.assessNumericValue(assert, actPosition.x, expPosition.x, epsilon,
                 "Fixed overlay X position mismatch " + contextMessage);
-            Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
+            Util.assessNumericValue(assert, actPosition.y, expPosition.y, epsilon,
                 "Fixed overlay Y position mismatch " + contextMessage);
         }
 
@@ -481,10 +482,10 @@
             var expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.5, 0.6))
                 .plus(expectedOffset);
-            var actPosition = $("#overlay-wrapper-fixed-overlay").position();
-            Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
+            var actPosition = viewport.pixelFromPoint(viewer.getOverlayById("fixed-overlay").position, true).plus(expectedOffset);
+            Util.assessNumericValue(assert, actPosition.x, expPosition.x, epsilon,
                 "Fixed overlay X position mismatch " + contextMessage);
-            Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
+            Util.assessNumericValue(assert, actPosition.y, expPosition.y, epsilon,
                 "Fixed overlay Y position mismatch " + contextMessage);
         }
 
@@ -536,10 +537,10 @@
             var expPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.5, 0.6))
                 .plus(expectedOffset);
-            var actPosition = $("#overlay-wrapper-fixed-overlay").position();
-            Util.assessNumericValue(assert, actPosition.left, expPosition.x, epsilon,
+            var actPosition = viewport.pixelFromPoint(viewer.getOverlayById("fixed-overlay").position, true).plus(expectedOffset);
+            Util.assessNumericValue(assert, actPosition.x, expPosition.x, epsilon,
                 "Fixed overlay X position mismatch " + contextMessage);
-            Util.assessNumericValue(assert, actPosition.top, expPosition.y, epsilon,
+            Util.assessNumericValue(assert, actPosition.y, expPosition.y, epsilon,
                 "Fixed overlay Y position mismatch " + contextMessage);
         }
 
@@ -783,16 +784,16 @@
         viewer.addOnceHandler('open', function() {
             var viewport = viewer.viewport;
 
-            var $overlay = $("#overlay-wrapper-fully-scaled-overlay");
+            var $overlay = $("#fully-scaled-overlay");
             var expectedSize = viewport.deltaPixelsFromPointsNoRotate(
                 new OpenSeadragon.Point(1, 1));
             var expectedPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(1, 1))
                 .minus(expectedSize);
-            var actualPosition = $overlay.position();
-            Util.assessNumericValue(assert, actualPosition.left, expectedPosition.x, epsilon,
+            var actualPosition = viewport.pixelFromPoint(viewer.getOverlayById("fully-scaled-overlay").position, true).minus(expectedSize);
+            Util.assessNumericValue(assert, actualPosition.x, expectedPosition.x, epsilon,
                 "Scaled overlay position.x should adjust to rotation.");
-            Util.assessNumericValue(assert, actualPosition.top, expectedPosition.y, epsilon,
+            Util.assessNumericValue(assert, actualPosition.y, expectedPosition.y, epsilon,
                 "Scaled overlay position.y should adjust to rotation.");
 
             var actualWidth = $overlay.width();
@@ -834,7 +835,7 @@
         });
 
         viewer.addOnceHandler('open', function() {
-            var $overlay = $("#overlay-wrapper-horizontally-scaled-overlay");
+            var $overlay = $("#horizontally-scaled-overlay");
             var notScaledWidth = 100;
             var notScaledHeight = 100;
             $overlay.get(0).style.height = notScaledHeight + "px";
@@ -851,10 +852,10 @@
             var expectedPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0.5, 0.5))
                 .minus(new OpenSeadragon.Point(expectedWidth / 2, notScaledHeight / 2));
-            var actualPosition = $overlay.position();
-            Util.assessNumericValue(assert, actualPosition.left, expectedPosition.x, epsilon,
+            var actualPosition = viewport.pixelFromPoint(viewer.getOverlayById("horizontally-scaled-overlay").position, true).minus(new OpenSeadragon.Point(expectedWidth / 2, notScaledHeight / 2));
+            Util.assessNumericValue(assert, actualPosition.x, expectedPosition.x, epsilon,
                 "Horizontally scaled overlay position.x should adjust to rotation.");
-            Util.assessNumericValue(assert, actualPosition.top, expectedPosition.y, epsilon,
+            Util.assessNumericValue(assert, actualPosition.y, expectedPosition.y, epsilon,
                 "Horizontally scaled overlay position.y should adjust to rotation.");
 
             var actualWidth = $overlay.width();
@@ -897,7 +898,7 @@
         });
 
         viewer.addOnceHandler('open', function() {
-            var $overlay = $("#overlay-wrapper-vertically-scaled-overlay");
+            var $overlay = $("#vertically-scaled-overlay");
             var notScaledWidth = 100;
             var notScaledHeight = 100;
             $overlay.get(0).style.width = notScaledWidth + "px";
@@ -914,10 +915,10 @@
             var expectedPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(0, 0.5))
                 .minus(new OpenSeadragon.Point(0, expectedHeight / 2));
-            var actualPosition = $overlay.position();
-            Util.assessNumericValue(assert, actualPosition.left, expectedPosition.x, epsilon,
+            var actualPosition= viewport.pixelFromPoint(viewer.getOverlayById("vertically-scaled-overlay").position).minus(new OpenSeadragon.Point(0, expectedHeight / 2));
+            Util.assessNumericValue(assert, actualPosition.x, expectedPosition.x, epsilon,
                 "Vertically scaled overlay position.x should adjust to rotation.");
-            Util.assessNumericValue(assert, actualPosition.top, expectedPosition.y, epsilon,
+            Util.assessNumericValue(assert, actualPosition.y, expectedPosition.y, epsilon,
                 "Vertically scaled overlay position.y should adjust to rotation.");
 
             var actualWidth = $overlay.width();
@@ -959,7 +960,7 @@
         });
 
         viewer.addOnceHandler('open', function() {
-            var $overlay = $("#overlay-wrapper-not-scaled-overlay");
+            var $overlay = $("#not-scaled-overlay");
             var notScaledWidth = 100;
             var notScaledHeight = 100;
             $overlay.get(0).style.width = notScaledWidth + "px";
@@ -975,10 +976,10 @@
             var expectedPosition = viewport.viewportToViewerElementCoordinates(
                 new OpenSeadragon.Point(1, 0))
                 .minus(new OpenSeadragon.Point(notScaledWidth, 0));
-            var actualPosition = $overlay.position();
-            Util.assessNumericValue(assert, actualPosition.left, expectedPosition.x, epsilon,
+            var actualPosition= viewport.pixelFromPoint(viewer.getOverlayById("not-scaled-overlay").position).minus(new OpenSeadragon.Point(notScaledWidth, 0));
+            Util.assessNumericValue(assert, actualPosition.x, expectedPosition.x, epsilon,
                 "Not scaled overlay position.x should adjust to rotation.");
-            Util.assessNumericValue(assert, actualPosition.top, expectedPosition.y, epsilon,
+            Util.assessNumericValue(assert, actualPosition.y, expectedPosition.y, epsilon,
                 "Not scaled overlay position.y should adjust to rotation.");
 
             var actualWidth = $overlay.width();
@@ -1024,7 +1025,7 @@
         viewer.addOnceHandler('open', function() {
             var viewport = viewer.viewport;
 
-            var $overlay = $("#overlay-wrapper-fully-scaled-overlay");
+            var $overlay = $("#fully-scaled-overlay");
             var expectedRect = viewport.viewportToViewerElementRectangle(
                 new OpenSeadragon.Rect(0, 0, 1, 1)).getBoundingBox();
             var actualPosition = $overlay.position();
@@ -1104,14 +1105,14 @@
 
         viewer.addOnceHandler('open', function() {
             var viewport = viewer.viewport;
-            var $overlay = $("#overlay-wrapper-fully-scaled-overlay");
+            var $overlay = $("#fully-scaled-overlay");
             var expectedSize = viewport.deltaPixelsFromPointsNoRotate(
                 new OpenSeadragon.Point(1, 1));
             var expectedPosition = viewport.pixelFromPoint(
                 new OpenSeadragon.Point(1, 1))
                 .minus(expectedSize);
             // We can't rely on jQuery.position with transforms.
-            var actualStyle = $overlay.get(0).style;
+            var actualStyle= viewer.getOverlayById("fully-scaled-overlay").style;
             var left = Number(actualStyle.left.replace("px", ""));
             var top = Number(actualStyle.top.replace("px", ""));
             Util.assessNumericValue(assert, left, expectedPosition.x, epsilon,