@woosh/meep-engine 3.60.2 → 3.60.3

package/package.json

@@ -6,7 +6,7 @@
   "description": "Advanced 3D game engine",
   "type": "module",
   "author": "Alexander Goldring",
-  "version": "3.60.2",
+  "version": "3.60.3",
   "exports": {
     "./build/*": "./build/*",
     "./src/*": "./src/*",

package/src/shade/renderer/light/environment/shader_convolve_reflection_map_from_averages.d.ts

@@ -1,10 +1,10 @@
 /**
  * Samples per texel. Each reads the average whose texel matches the solid angle it stands for, so
- * the count sets the noise of the lobe's shape, not whether a bright texel is counted. Measured on a
- * single bright texel of a 1024 map at 48 places, level 1 over level 0 in solid-angle energy:
- * 32 → 0.995 ± 0.014, 64 → 0.998 ± 0.008 (at most 1.005), 196 → 1.001 ± 0.019 — 196 asks for a
- * finer average than the 2x2 one, so it point-samples level 0 again. UE filters with 32 below
- * roughness 0.1 and 64 above.
+ * fewer samples read coarser averages and more read finer ones, back toward point taps that catch or
+ * miss a bright texel. Measured on a single bright texel of a 1024 map at 48 places, level 1 over
+ * level 0 in solid-angle energy: 32 → 0.995 ± 0.014, 64 → 0.998 ± 0.008 (at most 1.005),
+ * 196 → 1.001 ± 0.019 — at 196 the lod is 0.5 .. 1.7, and every read below 1 blends in level 0's
+ * point taps. UE filters with 32 below roughness 0.1 and 64 above.
  * @type {number}
  */
 export const CONVOLVE_FROM_AVERAGES_SAMPLE_COUNT: number;

package/src/shade/renderer/light/environment/shader_convolve_reflection_map_from_averages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shader_convolve_reflection_map_from_averages.d.ts","sourceRoot":"","sources":["../../../../../../src/shade/renderer/light/environment/shader_convolve_reflection_map_from_averages.js"],"names":[],"mappings":"AAoCA;;;;;;;;GAQG;AACH,kDAFU,MAAM,CAEsC;AAuHtD,yEAII;8BAtJ0B,+BAA+B"}
+{"version":3,"file":"shader_convolve_reflection_map_from_averages.d.ts","sourceRoot":"","sources":["../../../../../../src/shade/renderer/light/environment/shader_convolve_reflection_map_from_averages.js"],"names":[],"mappings":"AAqCA;;;;;;;;GAQG;AACH,kDAFU,MAAM,CAEsC;AAmJtD,yEAII;8BAlL0B,+BAA+B"}

package/src/shade/renderer/light/environment/shader_convolve_reflection_map_from_averages.js

@@ -9,6 +9,7 @@ import {
     chunk_uv_octahedral_unit_encode
 } from "../../shader/chunk/geometry/octahedron/chunk_uv_octahedral_unit_encode.js";
 import { chunk_uniform_sample_cone } from "../../shader/chunk/geometry/ray/chunk_uniform_sample_cone.js";
+import { chunk_pow2 } from "../../shader/chunk/math/chunk_pow2.js";
 import { chunk_safe_rcp } from "../../shader/chunk/math/chunk_safe_rcp.js";
 import { chunk_hammersley_2d } from "../../shader/chunk/noise/chunk_hammersley_2d.js";
 import {
@@ -36,15 +37,31 @@ resources.createGroup()
 
 /**
  * Samples per texel. Each reads the average whose texel matches the solid angle it stands for, so
- * the count sets the noise of the lobe's shape, not whether a bright texel is counted. Measured on a
- * single bright texel of a 1024 map at 48 places, level 1 over level 0 in solid-angle energy:
- * 32 → 0.995 ± 0.014, 64 → 0.998 ± 0.008 (at most 1.005), 196 → 1.001 ± 0.019 — 196 asks for a
- * finer average than the 2x2 one, so it point-samples level 0 again. UE filters with 32 below
- * roughness 0.1 and 64 above.
+ * fewer samples read coarser averages and more read finer ones, back toward point taps that catch or
+ * miss a bright texel. Measured on a single bright texel of a 1024 map at 48 places, level 1 over
+ * level 0 in solid-angle energy: 32 → 0.995 ± 0.014, 64 → 0.998 ± 0.008 (at most 1.005),
+ * 196 → 1.001 ± 0.019 — at 196 the lod is 0.5 .. 1.7, and every read below 1 blends in level 0's
+ * point taps. UE filters with 32 below roughness 0.1 and 64 above.
  * @type {number}
  */
 export const CONVOLVE_FROM_AVERAGES_SAMPLE_COUNT = 64;
 
+/**
+ * How much a read of the averages widens the lobe, as mean squared angle per steradian a sample
+ * stands for. The lobe exp(2 (N·H - 1) / r^4) is a Gaussian of mean squared angle 4 r^4 (N·H =
+ * cos(θ/2), so N·H - 1 ≈ -θ²/8), and convolving adds variances, so the lobe is narrowed to
+ * r^4 - k Ω_s / 4 and lands at the width it is asked for.
+ *
+ * A box over the texel plus the bilinear tent across its neighbours predicts 1/2; 1 is measured. On
+ * a 1024 map's sun against level 1 from 8192 point taps (1.315° rms): k = 0 → 1.436°, 1/2 → 1.380°,
+ * 1 → 1.317°; the sun's tail error 110% → 49%. The two reads a lod between levels blends, and an
+ * average's footprint 2 + 2/n texels of the one above rather than 2, are the likely difference.
+ * Matching the width leaves the shape: the core is flatter than a Gaussian, and the sky's rms error
+ * against the reference goes 0.166 → 0.222.
+ * @type {number}
+ */
+const AVERAGES_BLUR_PER_SOLID_ANGLE = 1;
+
 /**
  * Level 1 of the prefilter, by filtered importance sampling: each sample reads the plain average of
  * level 0 whose texel is the solid angle the sample stands for, so a texel brighter than its
@@ -53,6 +70,11 @@ export const CONVOLVE_FROM_AVERAGES_SAMPLE_COUNT = 64;
  * one bright texel's share of level 1 anywhere from 0.79 to 1.21 of its energy, and an HDR sun
  * came out 0.66% brighter than it went in.
  *
+ * Samples are uniform in the cone, so each stands for the same solid angle and reads the same
+ * average: the averages blur the lobe by one fixed amount, which the lobe gives back by narrowing
+ * (see AVERAGES_BLUR_PER_SOLID_ANGLE). UE's importance sampling read fine averages in the lobe's core
+ * and coarse ones in its tail, and the sun came out in blocks.
+ *
  * Level 1 only. The levels after it read the level above, already smooth at their sample spacing
  * (see shader_convolve_reflection_map). Read from level 0 instead, their samples land on averages
  * 8 to 16 texels a side, too coarse an octahedral grid to keep a bright texel's energy: ±11% at
@@ -112,6 +134,12 @@ fn main(
     // uniform in the cone, so every sample stands for the same solid angle
     let sample_solid_angle = 2.0 * PI * (1.0 - cone_cos) / f32(sample_count);
 
+    // narrowed by the blur the averages add, so the lobe comes out at the roughness asked for
+    let lobe_roughness = sqrt(sqrt(max(
+        pow2(pow2(roughness)) - ${AVERAGES_BLUR_PER_SOLID_ANGLE.toFixed(6)} * sample_solid_angle / 4.0,
+        pow2(pow2(${BSDF_ROUGHNESS_MINIMUM}))
+    )));
+
     // level 0's octahedral square, n texels a side, spans 2 in octahedron coordinates; a texel there
     // covers (2/n)^2 of it, and the octahedron's solid angle per unit area is |d|_1^3 along unit d
     let level_0_interior = f32(textureDimensions(level_0).x) - 2.0;
@@ -137,7 +165,7 @@ fn main(
             lod - lod_floor
         );
 
-        let weight = reflection_sample_weight(out_direction, in_direction, roughness);
+        let weight = reflection_sample_weight(out_direction, in_direction, lobe_roughness);
 
         radiance_accum += radiance * weight;
         weight_accum += weight;
@@ -152,6 +180,7 @@ fn main(
         chunk_hammersley_2d,
         chunk_build_orthonormal_matrix_n,
         chunk_safe_rcp,
+        chunk_pow2,
         chunk_uniform_sample_cone,
         chunk_texture_octahedral_skirt_texel_uv,
         chunk_texture_octahedral_skirt_uv,

package/src/view/elements/progress/segmented/SegmentedResourceBarView.d.ts

@@ -140,6 +140,25 @@ export class SegmentedResourceBarView extends View {
      * @private
      */
     private __columns;
+    /**
+     * scratch for {@link segment_frame_transform}: [scale, offset]
+     * @type {number[]}
+     * @private
+     */
+    private __frame;
+    /**
+     * The timer that re-checks the placement while linked; 0 when none
+     * @type {number}
+     * @private
+     */
+    private __recheck_timer;
+    /**
+     * Place again if anything moved that no event reports: an ancestor's transform, the transform of an iframe the
+     * bar sits in, a move by a fraction of a pixel. Cheap when nothing did — a computed width and a few rects —
+     * and {@link updateSegments} rebuilds only on a change.
+     * @private
+     */
+    private __recheck;
     /**
      *
      * @type {List<NumericInterval>}

package/src/view/elements/progress/segmented/SegmentedResourceBarView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedResourceBarView.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/SegmentedResourceBarView.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;;;;;;GAiBG;AACH;IACI;;;;;;;;;;;;OAYG;IACH;QAVgD,MAAM,EAA3C,CAAC,OAAO,kBAAgB,CAAC,EAAE;QAC0B,GAAG,GAAxD,OAAO,uCAAmC;QACvB,SAAS,GAA5B,MAAM,EAAE;QAC6E,KAAK,GAA1F;YAAC,IAAI,EAAC,MAAM,CAAC;YAAC,UAAU,EAAC,MAAM,CAAC;YAAC,QAAQ,EAAC,MAAM,CAAC;YAAC,cAAc,EAAC,MAAM,CAAA;SAAC,EAAE;QAC9B,KAAK,GAAjD;YAAC,KAAK,EAAC,MAAM,CAAC;YAAC,KAAK,EAAC,MAAM,CAAA;SAAC,GAAC,IAAI;QAChB,cAAc,GAA/B,MAAM;QACW,qBAAqB,GAAtC,MAAM;QACW,qBAAqB,GAAtC,MAAM;OAyShB;IA5QG;;;;OAIG;IACH,yBAA8B;IAE9B;;;;OAIG;IACH,oBAAsB;IAEtB;;;OAGG;IACH,gBAAoB;IAEpB;;;OAGG;IACH,gBAAoB;IAEpB;;;OAGG;IACH,gBAA+B;IAG/B;;;OAGG;IACH,gCAAoD;IAEpD;;;OAGG;IACH,gCAAoD;IAEpD;;;;OAIG;IACH,yBAAyB;IAEzB;;;OAGG;IACH,yBAAgH;IAEhH;;;;OAIG;IACH,oBAAuB;IAgiB3B;;OAEG;IACH,4BASC;IAxiBG,yBAA4B;IAC5B,mBAAmB;IA6fvB;;OAEG;IACH,wBAQC;IArgBG;;;;OAIG;IACH,oBAAwB;IAGxB,oBAAsB;IACtB,sBAAwB;IACxB,sBAAwB;IACxB,6BAA+B;IAE/B;;;;OAIG;IACH,sBAAyB;IAEzB;;;;OAIG;IACH,qBAAqB;IAErB;;;;OAIG;IACH,kBAAmB;IAEnB;;;OAGG;IACH,YAFU,qBAAqB,CAEH;IAG5B,mBAAuC;IASvC;;;OAGG;IACH,mBAA+C;IAG/C;;;OAGG;IACH,sBAAuB;IAEvB;;;;OAIG;IACH,sBAAuB;IAEvB;;;;OAIG;IACH,mBAAsB;IACtB,gCAA2B;IAC3B,+BAA0B;IAkBtB;;;;OAIG;IACH,oBAAgD;IAoCpD;;;OAGG;IACH,gBAFU,QAAQ,CAsChB;IAWF;;;;OAIG;IACH,uBAA2C;IAuC/C,eAGC;IAED,wBAMC;IAED;;;;;;;OAOG;IACH,uBA4DC;IAED;;;;;;OAMG;IACH,sBAKC;IAED;;;;;;OAMG;IACH,wBA2CC;IAED;;;;;OAKG;IACH,sBAoBC;IAED,mBAiDC;IAED;;;;OAIG;IACH,eAaC;IAED;;;;OAIG;IACH,qBAoBC;IAeD;;;;OAIG;IACH,mCAUC;CAeJ;iBA5rBgB,kBAAkB;iBALlB,0CAA0C;qBAGtC,6BAA6B;oBAF9B,kCAAkC"}
+{"version":3,"file":"SegmentedResourceBarView.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/SegmentedResourceBarView.js"],"names":[],"mappings":"AAoCA;;;;;;;;;;;;;;;;;GAiBG;AACH;IACI;;;;;;;;;;;;OAYG;IACH;QAVgD,MAAM,EAA3C,CAAC,OAAO,kBAAgB,CAAC,EAAE;QAC0B,GAAG,GAAxD,OAAO,uCAAmC;QACvB,SAAS,GAA5B,MAAM,EAAE;QAC6E,KAAK,GAA1F;YAAC,IAAI,EAAC,MAAM,CAAC;YAAC,UAAU,EAAC,MAAM,CAAC;YAAC,QAAQ,EAAC,MAAM,CAAC;YAAC,cAAc,EAAC,MAAM,CAAA;SAAC,EAAE;QAC9B,KAAK,GAAjD;YAAC,KAAK,EAAC,MAAM,CAAC;YAAC,KAAK,EAAC,MAAM,CAAA;SAAC,GAAC,IAAI;QAChB,cAAc,GAA/B,MAAM;QACW,qBAAqB,GAAtC,MAAM;QACW,qBAAqB,GAAtC,MAAM;OAyThB;IA5RG;;;;OAIG;IACH,yBAA8B;IAE9B;;;;OAIG;IACH,oBAAsB;IAEtB;;;OAGG;IACH,gBAAoB;IAEpB;;;OAGG;IACH,gBAAoB;IAEpB;;;OAGG;IACH,gBAA+B;IAG/B;;;OAGG;IACH,gCAAoD;IAEpD;;;OAGG;IACH,gCAAoD;IAEpD;;;;OAIG;IACH,yBAAyB;IAEzB;;;OAGG;IACH,yBAAgH;IAEhH;;;;OAIG;IACH,oBAAuB;IA0kB3B;;OAEG;IACH,4BASC;IAllBG,yBAA4B;IAC5B,mBAAmB;IAuiBvB;;OAEG;IACH,wBAQC;IA/iBG;;;;OAIG;IACH,oBAAwB;IAGxB,oBAAsB;IACtB,sBAAwB;IACxB,sBAAwB;IACxB,6BAA+B;IAE/B;;;;OAIG;IACH,sBAAyB;IAEzB;;;;OAIG;IACH,qBAAqB;IAErB;;;;OAIG;IACH,kBAAmB;IAEnB;;;;OAIG;IACH,gBAAqB;IAErB;;;;OAIG;IACH,wBAAwB;IA0e5B;;;;;OAKG;IACH,kBAIC;IAhfG;;;OAGG;IACH,YAFU,qBAAqB,CAEH;IAG5B,mBAAuC;IASvC;;;OAGG;IACH,mBAA+C;IAG/C;;;OAGG;IACH,sBAAuB;IAEvB;;;;OAIG;IACH,sBAAuB;IAEvB;;;;OAIG;IACH,mBAAsB;IACtB,gCAA2B;IAC3B,+BAA0B;IAkBtB;;;;OAIG;IACH,oBAAgD;IAoCpD;;;OAGG;IACH,gBAFU,QAAQ,CAsChB;IAWF;;;;OAIG;IACH,uBAA2C;IAgD/C,eAGC;IAED,wBAMC;IAED;;;;;;;OAOG;IACH,uBAiEC;IAED;;;;;;OAMG;IACH,sBAKC;IAED;;;;;;OAMG;IACH,wBA2CC;IAED;;;;;OAKG;IACH,sBAoBC;IAED,mBAiDC;IAED;;;;OAIG;IACH,eAaC;IAED;;;;OAIG;IACH,qBAoBC;IA2BD;;;;OAIG;IACH,mCAUC;CAeJ;iBA9uBgB,kBAAkB;iBALlB,0CAA0C;qBAGtC,6BAA6B;oBAF9B,kCAAkC"}

package/src/view/elements/progress/segmented/SegmentedResourceBarView.js

@@ -10,6 +10,7 @@ import { GhostTrail } from "./GhostTrail.js";
 import { SEGMENT_TIERS_DEFAULT } from "./SEGMENT_TIERS_DEFAULT.js";
 import { segment_cell_extent } from "./segment_cell_extent.js";
 import { segment_cell_layout } from "./segment_cell_layout.js";
+import { segment_frame_transform } from "./segment_frame_transform.js";
 import { segment_mask_apply, segment_mask_url } from "./segment_mask_url.js";
 import { segment_mask_width } from "./segment_mask_width.js";
 import { segment_tick_positions } from "./segment_tick_positions.js";
@@ -26,6 +27,13 @@ const REBUILD_WIDTH_THRESHOLD_PX = 0.5;
  */
 const UNSCALED_TOLERANCE = 2e-3;
 
+/**
+ * How often a linked bar checks that its notches or cells still sit on the screen's pixels, in milliseconds. A
+ * transform on an ancestor or on a containing iframe moves them without any event the bar hears.
+ * @type {number}
+ */
+const RECHECK_INTERVAL_MS = 250;
+
 /**
  * Resource bar in the style of a MOBA health bar: the values fill it end to end, notches mark fixed amounts, and
  * a ghost behind the fill trails a drop so the loss stays readable for a moment.
@@ -189,6 +197,22 @@ export class SegmentedResourceBarView extends View {
          */
         this.__columns = [];
 
+        /**
+         * scratch for {@link segment_frame_transform}: [scale, offset]
+         * @type {number[]}
+         * @private
+         */
+        this.__frame = [1, 0];
+
+        /**
+         * The timer that re-checks the placement while linked; 0 when none
+         * @type {number}
+         * @private
+         */
+        this.__recheck_timer = 0;
+
+        this.__recheck = this.__recheck.bind(this);
+
         /**
          *
          * @type {List<NumericInterval>}
@@ -364,6 +388,10 @@ export class SegmentedResourceBarView extends View {
         this.__sizeObserver.start();
         this.__watch_device_pixel_ratio();
         this.update();
+
+        if (typeof setInterval === 'function') {
+            this.__recheck_timer = setInterval(this.__recheck, RECHECK_INTERVAL_MS);
+        }
     }
 
     unlink() {
@@ -373,6 +401,11 @@ export class SegmentedResourceBarView extends View {
 
         this.__sizeObserver.stop();
 
+        if (this.__recheck_timer !== 0) {
+            clearInterval(this.__recheck_timer);
+            this.__recheck_timer = 0;
+        }
+
         if (this.__dpr_query !== null) {
             this.__dpr_query.removeEventListener('change', this.__handle_dpr_change);
             this.__dpr_query = null;
@@ -430,16 +463,21 @@ export class SegmentedResourceBarView extends View {
 
         const dpr = typeof devicePixelRatio === 'number' && devicePixelRatio > 0 ? devicePixelRatio : 1;
 
+        // how the iframes this bar sits in are drawn by the pages around them — invisible from in here
+        const frame = segment_frame_transform(el.ownerDocument.defaultView, this.__frame);
+        const frame_scale = frame[0];
+        const frame_offset = frame[1];
+
         // a CSS scale on an ancestor shows each CSS pixel of the bar as `scale` page pixels. The computed width is
         // serialised to a few decimals (175.844 for 175.84375), so an unscaled bar measures a hair off 1 — enough to
         // put a width that should be whole in device pixels just past it — and is read as unscaled
-        const measured_scale = rect.width > 0 ? rect.width / layout_width : 1;
+        const measured_scale = (rect.width > 0 ? rect.width / layout_width : 1) * frame_scale;
         const scale = Math.abs(measured_scale - 1) < UNSCALED_TOLERANCE ? 1 : measured_scale;
 
         // device pixels per CSS pixel of the bar
         const ratio = dpr * scale;
 
-        const origin_device = rect.left * dpr;
+        const origin_device = (frame_offset + rect.left * frame_scale) * dpr;
         const origin_phase = origin_device - Math.round(origin_device);
 
         const max = this.__value_max.getValue();
@@ -661,6 +699,18 @@ export class SegmentedResourceBarView extends View {
         ghost.width = `${segment_cell_extent(layout, ghost_fraction * count) / ratio}px`;
     }
 
+    /**
+     * Place again if anything moved that no event reports: an ancestor's transform, the transform of an iframe the
+     * bar sits in, a move by a fraction of a pixel. Cheap when nothing did — a computed width and a few rects —
+     * and {@link updateSegments} rebuilds only on a change.
+     * @private
+     */
+    __recheck() {
+        if (this.isLinked) {
+            this.updateSegments();
+        }
+    }
+
     /**
      * @private
      */

package/src/view/elements/progress/segmented/segment_frame_transform.d.ts

@@ -0,0 +1,15 @@
+/**
+ * How a point in a window's CSS pixels lands in the top-most window this one can see: `top = offset + local * scale`,
+ * through every same-origin iframe it sits in, each frame's own transform included.
+ *
+ * Nothing inside an iframe can see how the page around it draws it: an iframe the host scales to fit (a preview, a
+ * playground) reports `devicePixelRatio` and every rect as though unscaled, so something drawn for that pixel grid
+ * is painted on another. Walking out through `frameElement` is the one way to find out. A cross-origin frame stops
+ * the walk (its `frameElement` reads null, or throws), and is taken as unscaled from there out.
+ *
+ * @param {Window|null|undefined} win the window the element is in
+ * @param {number[]} result receives [scale, offset]
+ * @returns {number[]} result
+ */
+export function segment_frame_transform(win: Window | null | undefined, result: number[]): number[];
+//# sourceMappingURL=segment_frame_transform.d.ts.map

package/src/view/elements/progress/segmented/segment_frame_transform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment_frame_transform.d.ts","sourceRoot":"","sources":["../../../../../../src/view/elements/progress/segmented/segment_frame_transform.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,6CAJW,MAAM,GAAC,IAAI,GAAC,SAAS,UACrB,MAAM,EAAE,GACN,MAAM,EAAE,CAyDpB"}

package/src/view/elements/progress/segmented/segment_frame_transform.js

@@ -0,0 +1,69 @@
+/**
+ * How a point in a window's CSS pixels lands in the top-most window this one can see: `top = offset + local * scale`,
+ * through every same-origin iframe it sits in, each frame's own transform included.
+ *
+ * Nothing inside an iframe can see how the page around it draws it: an iframe the host scales to fit (a preview, a
+ * playground) reports `devicePixelRatio` and every rect as though unscaled, so something drawn for that pixel grid
+ * is painted on another. Walking out through `frameElement` is the one way to find out. A cross-origin frame stops
+ * the walk (its `frameElement` reads null, or throws), and is taken as unscaled from there out.
+ *
+ * @param {Window|null|undefined} win the window the element is in
+ * @param {number[]} result receives [scale, offset]
+ * @returns {number[]} result
+ */
+export function segment_frame_transform(win, result) {
+    let scale = 1;
+    let offset = 0;
+
+    let w = win;
+
+    for (let depth = 0; depth < 16 && w; depth++) {
+        let frame = null;
+
+        try {
+            frame = w.frameElement;
+        } catch (e) {
+            frame = null;
+        }
+
+        if (!frame) {
+            break;
+        }
+
+        const host = frame.ownerDocument && frame.ownerDocument.defaultView;
+
+        if (!host) {
+            break;
+        }
+
+        const style = host.getComputedStyle(frame);
+
+        const border_left = parseFloat(style.borderLeftWidth) || 0;
+        const border_right = parseFloat(style.borderRightWidth) || 0;
+        const padding_left = parseFloat(style.paddingLeft) || 0;
+        const padding_right = parseFloat(style.paddingRight) || 0;
+
+        let layout_width = parseFloat(style.width);
+
+        if (style.boxSizing !== 'border-box') {
+            layout_width += border_left + border_right + padding_left + padding_right;
+        }
+
+        const rect = frame.getBoundingClientRect();
+
+        const frame_scale = layout_width > 0 && rect.width > 0 ? rect.width / layout_width : 1;
+
+        // where the frame's content starts, in the host window's CSS pixels
+        const content_left = rect.left + (border_left + padding_left) * frame_scale;
+
+        offset = content_left + offset * frame_scale;
+        scale *= frame_scale;
+
+        w = host;
+    }
+
+    result[0] = scale;
+    result[1] = offset;
+
+    return result;
+}