fix: Fix positioning of dropdown/widgetdivs in a bordered injection div

packages/blockly/core/dropdowndiv.ts

@@ -806,11 +806,16 @@ function positionInternal(
 
   const parentElement = div.parentElement;
   if (parentElement) {
-    const bounds = parentElement.getBoundingClientRect();
-    initialX -= bounds.left + window.scrollX;
-    finalX -= bounds.left + window.scrollX;
-    initialY -= bounds.top + window.scrollY;
-    finalY -= bounds.top + window.scrollY;
+    ({x: initialX, y: initialY} = style.pageToContainerOffset(
+      initialX,
+      initialY,
+      parentElement,
+    ));
+    ({x: finalX, y: finalY} = style.pageToContainerOffset(
+      finalX,
+      finalY,
+      parentElement,
+    ));
   }
 
   // First apply initial translation.

packages/blockly/core/field_input.ts

@@ -30,6 +30,7 @@ import {Verbosity} from './utils/aria.js';
 import * as dom from './utils/dom.js';
 import {Rect} from './utils/rect.js';
 import type {Size} from './utils/size.js';
+import * as style from './utils/style.js';
 import {Svg} from './utils/svg.js';
 import * as svgMath from './utils/svg_math.js';
 import * as userAgent from './utils/useragent.js';
@@ -828,9 +829,7 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
 
       const parentElement = div?.parentElement;
       if (parentElement) {
-        const bounds = parentElement.getBoundingClientRect();
-        x -= bounds.left + window.scrollX;
-        y -= bounds.top + window.scrollY;
+        ({x, y} = style.pageToContainerOffset(x, y, parentElement));
       }
 
       div.style.left = `${x}px`;

packages/blockly/core/utils/style.ts

@@ -138,6 +138,32 @@ export function getBorderBox(element: Element): Rect {
   return new Rect(top, bottom, left, right);
 }
 
+/**
+ * Converts a point in page coordinates into the equivalent CSS `left`/`top`
+ * for an absolutely positioned child of `container`.
+ *
+ * Those properties are resolved against the container's padding box, so the
+ * container's border widths have to be subtracted along with its position.
+ *
+ * @param x Horizontal page coordinate.
+ * @param y Vertical page coordinate.
+ * @param container The relatively positioned parent element.
+ * @returns The equivalent point relative to the container's padding box.
+ * @internal
+ */
+export function pageToContainerOffset(
+  x: number,
+  y: number,
+  container: Element,
+): Coordinate {
+  const bounds = container.getBoundingClientRect();
+  const border = getBorderBox(container);
+  return new Coordinate(
+    x - (bounds.left + window.scrollX + border.left),
+    y - (bounds.top + window.scrollY + border.top),
+  );
+}
+
 /**
  * Changes the scroll position of `container` with the minimum amount so
  * that the content and the borders of the given `element` become visible.

packages/blockly/core/widgetdiv.ts

@@ -16,6 +16,7 @@ import * as dom from './utils/dom.js';
 import * as idGenerator from './utils/idgenerator.js';
 import type {Rect} from './utils/rect.js';
 import type {Size} from './utils/size.js';
+import * as style from './utils/style.js';
 import type {WorkspaceSvg} from './workspace_svg.js';
 
 /** The object currently using this container. */
@@ -285,9 +286,7 @@ function positionInternal(x: number, y: number, height: number) {
 
   const parentElement = containerDiv.parentElement;
   if (parentElement) {
-    const bounds = parentElement.getBoundingClientRect();
-    x -= bounds.left + window.scrollX;
-    y -= bounds.top + window.scrollY;
+    ({x, y} = style.pageToContainerOffset(x, y, parentElement));
   }
 
   containerDiv.style.left = x + 'px';

packages/blockly/package.json

@@ -195,7 +195,7 @@
     "gulp-replace": "^1.1.4",
     "gulp-sourcemaps": "^3.0.0",
     "http-server": "^14.1.1",
-    "jsdom": "30.0.1",
+    "jsdom": "30.1.0",
     "json5": "^2.2.3",
     "mocha": "^12.0.0",
     "puppeteer-core": "^25.8.0",
@@ -209,6 +209,6 @@
     "node": ">=22"
   },
   "peerDependencies": {
-    "jsdom": ">=27.4.0 <30.0.0"
+    "jsdom": ">=27.4.0 <31.0.0"
   }
 }