Implement renderer-backed nested scrolling

crates/obscura-js/js/bootstrap.js

@@ -2960,14 +2960,30 @@ class Element extends Node {
     return rect;
   }
   get scrollWidth() {
-    if (!this._isViewportRoot()) return 100;
-    const metrics = this._renderScrollMetrics();
-    return metrics ? metrics.scrollWidth : (globalThis.innerWidth || 1280);
+    if (this._isViewportRoot()) {
+      const metrics = this._renderScrollMetrics();
+      return metrics
+        ? Math.round(Math.max(0, metrics.scrollWidth || 0))
+        : (globalThis.innerWidth || 1280);
+    }
+    const metrics = this._renderElementScrollMetrics();
+    if (metrics !== undefined) {
+      return metrics ? Math.round(Math.max(0, metrics.scrollWidth || 0)) : 0;
+    }
+    return 100;
   }
   get scrollHeight() {
-    if (!this._isViewportRoot()) return 20;
-    const metrics = this._renderScrollMetrics();
-    return metrics ? metrics.scrollHeight : (globalThis.innerHeight || 720);
+    if (this._isViewportRoot()) {
+      const metrics = this._renderScrollMetrics();
+      return metrics
+        ? Math.round(Math.max(0, metrics.scrollHeight || 0))
+        : (globalThis.innerHeight || 720);
+    }
+    const metrics = this._renderElementScrollMetrics();
+    if (metrics !== undefined) {
+      return metrics ? Math.round(Math.max(0, metrics.scrollHeight || 0)) : 0;
+    }
+    return 20;
   }
   _isViewportRoot() {
     const t = this.tagName;
@@ -2982,6 +2998,17 @@ class Element extends Node {
       return null;
     }
   }
+  _renderElementScrollMetrics() {
+    if (typeof Deno.core.ops.op_element_scroll_metrics !== 'function') return undefined;
+    try {
+      const raw = Deno.core.ops.op_element_scroll_metrics(String(this._nid | 0));
+      if (!raw) return null;
+      const metrics = JSON.parse(raw);
+      return metrics && metrics.hasBox !== false ? metrics : null;
+    } catch (_e) {
+      return null;
+    }
+  }
   _renderScrollOffset() {
     if (typeof Deno.core.ops.op_scroll_offset !== 'function') return null;
     try {
@@ -3000,14 +3027,25 @@ class Element extends Node {
       return null;
     }
   }
-  // Render builds clamp the viewport root against measured document overflow.
-  // Nested element scrollers still use synthetic, deliberately unclamped state:
-  // their contents do not yet participate in scroll-container layout, and a
-  // guessed maximum would pin lazy-loading scrollers at zero.
+  _setRenderElementScroll(x, y) {
+    if (typeof Deno.core.ops.op_element_scroll_to !== 'function') return null;
+    try {
+      const raw = Deno.core.ops.op_element_scroll_to(String(this._nid | 0), +x || 0, +y || 0);
+      return raw ? JSON.parse(raw) : null;
+    } catch (_e) {
+      return null;
+    }
+  }
+  // Render builds clamp both viewport and element scroll areas against the
+  // exact overflow used by geometry and paint. Non-render builds retain the
+  // synthetic compatibility state.
   get scrollTop() {
     if (this._isViewportRoot()) {
       const offset = this._renderScrollOffset();
       if (offset) return offset.y || 0;
+    } else {
+      const metrics = this._renderElementScrollMetrics();
+      if (metrics !== undefined) return metrics ? (metrics.y || 0) : 0;
     }
     return this._scrollTop || 0;
   }
@@ -3020,11 +3058,18 @@ class Element extends Node {
       const offset = this._renderScrollOffset();
       const updated = offset && this._setRenderScroll(offset.x, nv);
       if (updated) actual = updated.y || 0;
+    } else {
+      const metrics = this._renderElementScrollMetrics();
+      if (metrics !== undefined) {
+        actual = metrics ? (metrics.y || 0) : 0;
+        const updated = metrics && this._setRenderElementScroll(metrics.x, nv);
+        if (updated) actual = updated.y || 0;
+      }
     }
     const changed = actual !== old;
     this._scrollTop = actual;
     if (changed && !this._scrollSuppress) this._fireScroll();
-    if (changed && this._isViewportRoot() &&
+    if (changed &&
         typeof globalThis.__obscura_recompute_intersections === "function") {
       globalThis.__obscura_recompute_intersections();
     }
@@ -3033,6 +3078,9 @@ class Element extends Node {
     if (this._isViewportRoot()) {
       const offset = this._renderScrollOffset();
       if (offset) return offset.x || 0;
+    } else {
+      const metrics = this._renderElementScrollMetrics();
+      if (metrics !== undefined) return metrics ? (metrics.x || 0) : 0;
     }
     return this._scrollLeft || 0;
   }
@@ -3045,11 +3093,18 @@ class Element extends Node {
       const offset = this._renderScrollOffset();
       const updated = offset && this._setRenderScroll(nv, offset.y);
       if (updated) actual = updated.x || 0;
+    } else {
+      const metrics = this._renderElementScrollMetrics();
+      if (metrics !== undefined) {
+        actual = metrics ? (metrics.x || 0) : 0;
+        const updated = metrics && this._setRenderElementScroll(nv, metrics.y);
+        if (updated) actual = updated.x || 0;
+      }
     }
     const changed = actual !== old;
     this._scrollLeft = actual;
     if (changed && !this._scrollSuppress) this._fireScroll();
-    if (changed && this._isViewportRoot() &&
+    if (changed &&
         typeof globalThis.__obscura_recompute_intersections === "function") {
       globalThis.__obscura_recompute_intersections();
     }
@@ -3180,26 +3235,66 @@ class Element extends Node {
     let left, top;
     if (x !== null && typeof x === 'object') { left = x.left; top = x.top; }
     else { left = x; top = y; }
+    const oldLeft = this.scrollLeft, oldTop = this.scrollTop;
+    let native = false, updated = null;
+    if (this._isViewportRoot()) {
+      const offset = this._renderScrollOffset();
+      if (offset) {
+        native = true;
+        updated = this._setRenderScroll(
+          left === undefined ? offset.x : (+left || 0),
+          top === undefined ? offset.y : (+top || 0),
+        );
+      }
+    } else {
+      const metrics = this._renderElementScrollMetrics();
+      if (metrics !== undefined) {
+        native = true;
+        updated = metrics
+          ? this._setRenderElementScroll(
+              left === undefined ? metrics.x : (+left || 0),
+              top === undefined ? metrics.y : (+top || 0),
+            )
+          : { x: 0, y: 0 };
+      }
+    }
+    if (native) {
+      const actualLeft = updated ? (updated.x || 0) : oldLeft;
+      const actualTop = updated ? (updated.y || 0) : oldTop;
+      this._scrollLeft = actualLeft;
+      this._scrollTop = actualTop;
+      if (actualLeft !== oldLeft || actualTop !== oldTop) {
+        if (typeof globalThis.__obscura_recompute_intersections === "function") {
+          globalThis.__obscura_recompute_intersections();
+        }
+        this._fireScroll();
+      }
+      return;
+    }
     this._scrollSuppress = true;
     if (left !== undefined) this.scrollLeft = +left || 0;
     if (top !== undefined) this.scrollTop = +top || 0;
     this._scrollSuppress = false;
-    this._fireScroll();
+    if (this.scrollLeft !== oldLeft || this.scrollTop !== oldTop) this._fireScroll();
   }
   scroll(x, y) { this.scrollTo(x, y); }
   scrollBy(x, y) {
     let dl, dt;
     if (x !== null && typeof x === 'object') { dl = x.left; dt = x.top; }
     else { dl = x; dt = y; }
-    this._scrollSuppress = true;
-    this.scrollLeft = (this.scrollLeft || 0) + (+dl || 0);
-    this.scrollTop = (this.scrollTop || 0) + (+dt || 0);
-    this._scrollSuppress = false;
-    this._fireScroll();
+    this.scrollTo({
+      left: (this.scrollLeft || 0) + (+dl || 0),
+      top: (this.scrollTop || 0) + (+dt || 0),
+    });
   }
   _fireScroll() {
+    if (this._scrollEventPending) return;
+    this._scrollEventPending = true;
     const self = this;
-    setTimeout(() => { try { self.dispatchEvent(new Event('scroll', { bubbles: false })); } catch (e) {} }, 0);
+    setTimeout(() => {
+      self._scrollEventPending = false;
+      try { self.dispatchEvent(new Event('scroll', { bubbles: false })); } catch (e) {}
+    }, 0);
   }
   animate(keyframes, options) {
     const duration = typeof options === 'number' ? options : (options?.duration || 0);

crates/obscura-js/src/ops.rs

@@ -129,6 +129,15 @@ pub struct ObscuraState {
     /// read by CSSOM geometry and screenshot paint.
     #[cfg(feature = "render")]
     pub scroll_offset: (f32, f32),
+    /// Element scroll offsets persist by DOM identity across relayout. Dense
+    /// renderer ScrollIds are rebuild-local and are resolved only into the
+    /// cached snapshot below.
+    #[cfg(feature = "render")]
+    pub element_scroll_offsets: HashMap<NodeId, (f32, f32)>,
+    #[cfg(feature = "render")]
+    pub scroll_generation: u64,
+    #[cfg(feature = "render")]
+    pub resolved_scroll: Option<(u64, obscura_render::ResolvedScrollState)>,
     /// Window-global import-map state shared by parser-discovered scripts,
     /// dynamically inserted import maps, and the module loader.
     pub(crate) import_map: Rc<RefCell<ImportMap>>,
@@ -172,6 +181,12 @@ impl ObscuraState {
             viewport: (1280.0, 720.0),
             #[cfg(feature = "render")]
             scroll_offset: (0.0, 0.0),
+            #[cfg(feature = "render")]
+            element_scroll_offsets: HashMap::new(),
+            #[cfg(feature = "render")]
+            scroll_generation: 0,
+            #[cfg(feature = "render")]
+            resolved_scroll: None,
             import_map: Rc::new(RefCell::new(ImportMap::default())),
             already_started_scripts: RefCell::new(HashSet::new()),
         }
@@ -330,22 +345,81 @@ fn op_dom(state: &OpState, #[string] cmd: String, #[string] arg1: String, #[stri
 fn op_dom_inner(state: &OpState, cmd: String, arg1: String, arg2: String) -> String {
     let shared = state.borrow::<SharedState>().clone();
     #[cfg(feature = "render")]
-    if matches!(
-        cmd.as_str(),
-        "set_attribute"
-            | "remove_attribute"
-            | "append_child"
-            | "remove_child"
-            | "insert_before"
-            | "set_inner_html"
-            | "set_inner_html_context"
-            | "set_text_content"
-    ) {
+    {
+        // Scroll offsets belong to a node at its current tree position.
+        // Temporary box/style loss keeps that latent state, but DOM removal,
+        // reparenting, and subtree replacement reset the affected identities,
+        // matching Chromium's lifecycle behavior.
+        let reset_nodes = {
+            let state = shared.borrow();
+            let mut roots = Vec::new();
+            if let Some(dom) = state.dom.as_ref() {
+                match cmd.as_str() {
+                    "remove_child" => {
+                        if let Ok(node) = arg1.parse::<u32>() {
+                            roots.push(NodeId::new(node));
+                        }
+                    }
+                    "append_child" => {
+                        if let Ok(node) = arg2.parse::<u32>() {
+                            let node = NodeId::new(node);
+                            if dom.get_node(node).and_then(|node| node.parent).is_some() {
+                                roots.push(node);
+                            }
+                        }
+                    }
+                    "insert_before" => {
+                        if let Ok(node) = arg1.parse::<u32>() {
+                            let node = NodeId::new(node);
+                            if dom.get_node(node).and_then(|node| node.parent).is_some() {
+                                roots.push(node);
+                            }
+                        }
+                    }
+                    "set_inner_html" | "set_inner_html_context" | "set_text_content" => {
+                        if let Ok(node) = arg1.parse::<u32>() {
+                            roots.extend(dom.children(NodeId::new(node)));
+                        }
+                    }
+                    _ => {}
+                }
+                roots
+                    .into_iter()
+                    .flat_map(|root| {
+                        let mut nodes = vec![root];
+                        nodes.extend(dom.descendants(root));
+                        nodes
+                    })
+                    .collect::<HashSet<_>>()
+            } else {
+                HashSet::new()
+            }
+        };
         // Any attribute can participate in an author selector, so even a
         // seemingly non-geometric attribute may change computed layout.
         // Detached-node creation and every read-only op deliberately skip this
         // invalidation; the next geometry/scroll read rebuilds at most once.
-        shared.borrow_mut().prepared_render = None;
+        let mut state = shared.borrow_mut();
+        if !reset_nodes.is_empty() {
+            state
+                .element_scroll_offsets
+                .retain(|node, _| !reset_nodes.contains(node));
+            state.scroll_generation = state.scroll_generation.wrapping_add(1);
+        }
+        if matches!(
+            cmd.as_str(),
+            "set_attribute"
+                | "remove_attribute"
+                | "append_child"
+                | "remove_child"
+                | "insert_before"
+                | "set_inner_html"
+                | "set_inner_html_context"
+                | "set_text_content"
+        ) {
+            state.prepared_render = None;
+            state.resolved_scroll = None;
+        }
     }
     let gs = shared.borrow();
     let dom = match &gs.dom {
@@ -2440,6 +2514,7 @@ fn op_set_dynamic_fonts(state: &OpState, #[string] registrations: &str) -> bool
     if state.dynamic_fonts != fonts {
         state.dynamic_fonts = fonts;
         state.prepared_render = None;
+        state.resolved_scroll = None;
     }
     true
 }
@@ -2482,6 +2557,8 @@ pub fn build_extension() -> Extension {
         ops.push(op_computed_style());
         ops.push(op_css_supports());
         ops.push(op_layout_metrics());
+        ops.push(op_element_scroll_metrics());
+        ops.push(op_element_scroll_to());
         ops.push(op_scroll_offset());
         ops.push(op_scroll_to());
     }
@@ -2531,10 +2608,53 @@ pub(crate) fn ensure_prepared_render(
             )?
         };
         state.prepared_render = Some(prepared);
+        state.resolved_scroll = None;
     }
     state.prepared_render.as_ref()
 }
 
+#[cfg(feature = "render")]
+pub(crate) fn ensure_resolved_scroll(state: &mut ObscuraState) -> Option<()> {
+    ensure_prepared_render(state)?;
+    if state
+        .resolved_scroll
+        .as_ref()
+        .is_some_and(|(generation, _)| *generation == state.scroll_generation)
+    {
+        return Some(());
+    }
+
+    let valid = state
+        .prepared_render
+        .as_ref()?
+        .scroll_container_nodes()
+        .collect::<HashSet<_>>();
+    let snapshot = {
+        let dom = state.dom.as_ref()?;
+        state.prepared_render.as_ref()?.resolve_scroll_state(
+            dom,
+            state.scroll_offset,
+            &state.element_scroll_offsets,
+        )
+    };
+    state.scroll_offset = snapshot.root_offset();
+    for node in valid {
+        let offset = state
+            .prepared_render
+            .as_ref()?
+            .element_scroll_metrics(node, &snapshot)
+            .map(|metrics| metrics.offset)
+            .unwrap_or((0.0, 0.0));
+        if offset == (0.0, 0.0) {
+            state.element_scroll_offsets.remove(&node);
+        } else {
+            state.element_scroll_offsets.insert(node, offset);
+        }
+    }
+    state.resolved_scroll = Some((state.scroll_generation, snapshot));
+    Some(())
+}
+
 /// Probe one ordinary `<img src>` through the renderer's page-scoped resource
 /// cache. This is deliberately a synchronous render-only op: the current
 /// renderer loader is synchronous too, and sharing it is what guarantees that
@@ -2636,9 +2756,14 @@ fn op_image_metadata(state: &OpState, nid: u32, cached_only: bool) -> String {
 
 #[cfg(feature = "render")]
 pub(crate) fn clamp_scroll_offset(state: &mut ObscuraState, requested: (f32, f32)) -> (f32, f32) {
-    state.scroll_offset = ensure_prepared_render(state)
+    let clamped = ensure_prepared_render(state)
         .map(|prepared| prepared.clamp_scroll(requested))
         .unwrap_or((0.0, 0.0));
+    if state.scroll_offset != clamped {
+        state.scroll_offset = clamped;
+        state.scroll_generation = state.scroll_generation.wrapping_add(1);
+        state.resolved_scroll = None;
+    }
     state.scroll_offset
 }
 
@@ -2659,15 +2784,20 @@ fn op_layout_geometry(state: &OpState, #[string] nid_str: String) -> String {
     let nid: u32 = nid_str.parse().unwrap_or(0);
     let nid = obscura_dom::tree::NodeId::new(nid);
     let mut gs = shared.borrow_mut();
-    let scroll = gs.scroll_offset;
-    if let Some(prepared) = ensure_prepared_render(&mut gs) {
-        let Some(rect) = prepared.viewport_rect(nid, scroll) else {
+    if ensure_resolved_scroll(&mut gs).is_some() {
+        let Some((_, scroll)) = gs.resolved_scroll.as_ref() else {
+            return String::new();
+        };
+        let Some(prepared) = gs.prepared_render.as_ref() else {
+            return String::new();
+        };
+        let Some(rect) = prepared.viewport_rect_with_scroll(nid, scroll) else {
             return String::new();
         };
         let Some((client_width, client_height)) = prepared.client_size(nid) else {
             return String::new();
         };
-        let Some(client_rects) = prepared.viewport_client_rects(nid, scroll) else {
+        let Some(client_rects) = prepared.viewport_client_rects_with_scroll(nid, scroll) else {
             return String::new();
         };
         let client_rects = client_rects
@@ -2755,6 +2885,86 @@ fn op_layout_metrics(state: &OpState) -> String {
     )
 }
 
+#[cfg(feature = "render")]
+#[op2]
+#[string]
+fn op_element_scroll_metrics(state: &OpState, #[string] nid_str: String) -> String {
+    let shared = state.borrow::<SharedState>().clone();
+    let nid = NodeId::new(nid_str.parse().unwrap_or(0));
+    let mut gs = shared.borrow_mut();
+    if ensure_resolved_scroll(&mut gs).is_none() {
+        return String::new();
+    }
+    let Some((_, scroll)) = gs.resolved_scroll.as_ref() else {
+        return String::new();
+    };
+    let Some(metrics) = gs
+        .prepared_render
+        .as_ref()
+        .and_then(|prepared| prepared.element_scroll_metrics(nid, scroll))
+    else {
+        // The op exists in render builds, so an unboxed/detached node must not
+        // fall through to bootstrap's synthetic non-render metrics.
+        return r#"{"scrollWidth":0,"scrollHeight":0,"clientWidth":0,"clientHeight":0,"x":0,"y":0,"maxX":0,"maxY":0,"hasBox":false}"#.to_string();
+    };
+    serde_json::json!({
+        "scrollWidth": metrics.content_size.0,
+        "scrollHeight": metrics.content_size.1,
+        "clientWidth": metrics.client_size.0,
+        "clientHeight": metrics.client_size.1,
+        "x": metrics.offset.0,
+        "y": metrics.offset.1,
+        "maxX": metrics.max_offset.0,
+        "maxY": metrics.max_offset.1,
+        "hasBox": true,
+    })
+    .to_string()
+}
+
+#[cfg(feature = "render")]
+#[op2]
+#[string]
+fn op_element_scroll_to(
+    state: &OpState,
+    #[string] nid_str: String,
+    x: f64,
+    y: f64,
+) -> String {
+    let shared = state.borrow::<SharedState>().clone();
+    let nid = NodeId::new(nid_str.parse().unwrap_or(0));
+    let mut gs = shared.borrow_mut();
+    if ensure_resolved_scroll(&mut gs).is_none() {
+        return String::new();
+    }
+    let current = gs.resolved_scroll.as_ref().and_then(|(_, scroll)| {
+        gs.prepared_render
+            .as_ref()?
+            .element_scroll_metrics(nid, scroll)
+    });
+    let Some(current) = current else {
+        return String::new();
+    };
+    let clamp = |value: f64, max: f32| {
+        if value.is_finite() {
+            obscura_render::quantize_scroll_value(value as f32, 1.0).clamp(0.0, max)
+        } else {
+            0.0
+        }
+    };
+    let requested = (clamp(x, current.max_offset.0), clamp(y, current.max_offset.1));
+    if requested != current.offset {
+        if requested == (0.0, 0.0) {
+            gs.element_scroll_offsets.remove(&nid);
+        } else {
+            gs.element_scroll_offsets.insert(nid, requested);
+        }
+        gs.scroll_generation = gs.scroll_generation.wrapping_add(1);
+        gs.resolved_scroll = None;
+        return format!("{{\"x\":{},\"y\":{}}}", requested.0, requested.1);
+    }
+    format!("{{\"x\":{},\"y\":{}}}", current.offset.0, current.offset.1)
+}
+
 #[cfg(feature = "render")]
 #[op2]
 #[string]

crates/obscura-js/src/runtime.rs

@@ -12,7 +12,11 @@ pub use deno_core::v8::IsolateHandle;
 use crate::import_map::ImportMap;
 use crate::module_loader::ObscuraModuleLoader;
 #[cfg(feature = "render")]
-use crate::ops::{clamp_scroll_offset, document_base_url, ensure_prepared_render};
+use crate::ops::{
+    clamp_scroll_offset, document_base_url, ensure_resolved_scroll,
+};
+#[cfg(all(test, feature = "render"))]
+use crate::ops::ensure_prepared_render;
 use crate::ops::{
     build_extension, node_is_script, ObscuraState, StoredNetworkResponseBody,
 };
@@ -227,6 +231,9 @@ impl ObscuraJsRuntime {
             gs.render_resources = obscura_render::RenderResourceCache::default();
             gs.dynamic_fonts.clear();
             gs.scroll_offset = (0.0, 0.0);
+            gs.element_scroll_offsets.clear();
+            gs.scroll_generation = 0;
+            gs.resolved_scroll = None;
         }
     }
 
@@ -240,6 +247,7 @@ impl ObscuraJsRuntime {
                 // present. Keep already-fetched absolute bytes, but rebuild
                 // candidate selection/layout against the new base.
                 state.prepared_render = None;
+                state.resolved_scroll = None;
             }
         }
     }
@@ -340,6 +348,7 @@ impl ObscuraJsRuntime {
             let mut state = self.state.borrow_mut();
             state.viewport = (width as f32, height as f32);
             state.prepared_render = None;
+            state.resolved_scroll = None;
         }
         let _ = self.runtime.execute_script(
             "<set-viewport>",
@@ -380,20 +389,16 @@ impl ObscuraJsRuntime {
         if viewport != state.viewport || base_url != effective_base.as_deref() {
             return None;
         }
-        ensure_prepared_render(&mut state)?;
-        let requested = state.scroll_offset;
-        let scroll = state
-            .prepared_render
-            .as_ref()
-            .map(|prepared| prepared.clamp_scroll(requested))?;
-        state.scroll_offset = scroll;
+        ensure_resolved_scroll(&mut state)?;
         let ObscuraState {
             dom,
             prepared_render,
             render_resources,
+            resolved_scroll,
             ..
         } = &mut *state;
-        obscura_render::screenshot_prepared(
+        let (_, scroll) = resolved_scroll.as_ref()?;
+        obscura_render::screenshot_prepared_with_scroll(
             dom.as_ref()?,
             prepared_render.as_mut()?,
             render_resources,
@@ -1211,6 +1216,8 @@ impl ObscuraJsRuntime {
             state.prepared_render = None;
             state.render_resources = obscura_render::RenderResourceCache::default();
             state.dynamic_fonts.clear();
+            state.element_scroll_offsets.clear();
+            state.resolved_scroll = None;
         }
         state.dom.take()
     }
@@ -3254,7 +3261,11 @@ mod tests {
 
     #[test]
     fn element_scroll_methods_update_scroll_offsets() {
-        let mut rt = setup_runtime(r#"<div id="scroller"></div>"#);
+        let mut rt = setup_runtime(
+            r#"<div id="scroller" style="width:100px;height:100px;overflow:auto">
+                   <div style="width:300px;height:300px"></div>
+               </div>"#,
+        );
         let result = rt
             .evaluate(
                 r#"
@@ -3956,6 +3967,403 @@ mod tests {
         assert!(values[12..].iter().all(|value| value == &serde_json::json!(true)));
     }
 
+    #[cfg(feature = "render")]
+    #[test]
+    fn nested_scroll_metrics_geometry_pixels_and_relayout_share_one_state() {
+        let dom = parse_html(
+            r#"<html style="margin:0"><body style="margin:0">
+                <div id="outer" style="box-sizing:border-box;width:120px;height:100px;
+                     border:4px solid red;overflow:hidden;position:relative;background:red">
+                  <div id="inner" style="width:220px;height:200px;overflow:hidden;
+                       position:relative;background:blue">
+                    <div id="target" style="position:absolute;left:300px;top:280px;
+                         width:30px;height:20px;background:lime"></div>
+                  </div>
+                </div>
+            </body></html>"#,
+        );
+        let mut rt = ObscuraJsRuntime::new();
+        rt.set_dom(dom);
+        rt.set_viewport(360.0, 240.0);
+        rt.run_page_init();
+
+        let top = rt
+            .screenshot_prepared((360.0, 240.0), Some("about:blank"))
+            .expect("top screenshot");
+        let result = rt
+            .evaluate(
+                r#"
+                const outer = document.getElementById('outer');
+                const inner = document.getElementById('inner');
+                const target = document.getElementById('target');
+                const before = {
+                  outer: outer.getBoundingClientRect(),
+                  inner: inner.getBoundingClientRect(),
+                  target: target.getBoundingClientRect(),
+                };
+                outer.scrollTo(9999, 9999);
+                inner.scrollTo(9999, 9999);
+                const after = {
+                  outer: outer.getBoundingClientRect(),
+                  inner: inner.getBoundingClientRect(),
+                  target: target.getBoundingClientRect(),
+                };
+                const first = [target.getBoundingClientRect().left, target.getBoundingClientRect().top];
+                outer.scrollTo(0, 0); inner.scrollTo(0, 0);
+                outer.scrollTo(9999, 9999); inner.scrollTo(9999, 9999);
+                const repeated = [target.getBoundingClientRect().left, target.getBoundingClientRect().top];
+                return {
+                  outerMetrics: [outer.clientWidth, outer.clientHeight, outer.scrollWidth, outer.scrollHeight],
+                  innerMetrics: [inner.clientWidth, inner.clientHeight, inner.scrollWidth, inner.scrollHeight],
+                  offsets: [outer.scrollLeft, outer.scrollTop, inner.scrollLeft, inner.scrollTop],
+                  outerDelta: [after.outer.left - before.outer.left, after.outer.top - before.outer.top],
+                  innerDelta: [after.inner.left - before.inner.left, after.inner.top - before.inner.top],
+                  targetDelta: [after.target.left - before.target.left, after.target.top - before.target.top],
+                  repeated: [first[0] === repeated[0], first[1] === repeated[1]],
+                };
+                "#,
+            )
+            .expect("nested scroll state");
+        assert_eq!(result["outerMetrics"], serde_json::json!([112, 92, 220, 200]));
+        assert_eq!(result["innerMetrics"], serde_json::json!([220, 200, 330, 300]));
+        assert_eq!(result["offsets"], serde_json::json!([108, 108, 110, 100]));
+        assert_eq!(result["outerDelta"], serde_json::json!([0, 0]));
+        assert_eq!(result["innerDelta"], serde_json::json!([-108, -108]));
+        assert_eq!(result["targetDelta"], serde_json::json!([-218, -208]));
+        assert_eq!(result["repeated"], serde_json::json!([true, true]));
+
+        let scrolled = rt
+            .screenshot_prepared((360.0, 240.0), Some("about:blank"))
+            .expect("scrolled screenshot");
+        let scrolled_repeat = rt
+            .screenshot_prepared((360.0, 240.0), Some("about:blank"))
+            .expect("repeat screenshot");
+        assert_ne!(top, scrolled, "nested scroll must move painted pixels");
+        assert_eq!(scrolled, scrolled_repeat, "capture must not accumulate movement");
+
+        let retained = rt
+            .evaluate(
+                r#"
+                const outer = document.getElementById('outer');
+                const inner = document.getElementById('inner');
+                outer.setAttribute('data-relayout', '1');
+                return [outer.scrollLeft, outer.scrollTop, inner.scrollLeft, inner.scrollTop];
+                "#,
+            )
+            .expect("retained offsets");
+        assert_eq!(retained, serde_json::json!([108, 108, 110, 100]));
+
+        let reclamped = rt
+            .evaluate(
+                r#"
+                const outer = document.getElementById('outer');
+                const inner = document.getElementById('inner');
+                inner.setAttribute('style', 'width:150px;height:120px;overflow:hidden;position:relative;background:blue');
+                document.getElementById('target').setAttribute(
+                  'style',
+                  'position:absolute;left:100px;top:80px;width:30px;height:20px;background:lime'
+                );
+                return [outer.scrollLeft, outer.scrollTop, inner.scrollLeft, inner.scrollTop];
+                "#,
+            )
+            .expect("reclamped offsets");
+        assert_eq!(reclamped, serde_json::json!([38, 28, 0, 0]));
+
+        rt.evaluate("(function(){ document.getElementById('outer').remove(); document.documentElement.getBoundingClientRect(); return true; })()")
+            .expect("remove scroller");
+        assert!(
+            rt.state.borrow().element_scroll_offsets.is_empty(),
+            "removed scroll containers must be pruned after relayout"
+        );
+    }
+
+    /// Chromium 150 oracle for CSSOM scrolling overflow. Visible and clip
+    /// boxes expose descendant overflow but cannot move; an actual scrolling
+    /// box includes trailing padding. A clip boundary suppresses propagation
+    /// only on its clipped axis, and ordinary inline boxes expose zero metrics.
+    #[cfg(feature = "render")]
+    #[test]
+    fn element_scroll_metrics_match_chromium_overflow_oracles() {
+        let dom = parse_html(
+            r#"<html style="margin:0"><body style="margin:0">
+              <style>
+                .box { width:100px;height:80px;padding:10px;border:2px solid;position:absolute }
+                .child { width:200px;height:150px }
+              </style>
+              <div id="visible" class="box" style="overflow:visible;top:0"><div class="child"></div></div>
+              <div id="clip" class="box" style="overflow:clip;top:150px"><div class="child"></div></div>
+              <div id="hidden" class="box" style="overflow:hidden;top:300px"><div class="child"></div></div>
+              <div id="outer" style="width:100px;height:80px;overflow:visible;position:absolute;top:450px">
+                <div id="axis" style="width:150px;height:120px;overflow-x:visible;overflow-y:clip">
+                  <div style="width:300px;height:250px"></div>
+                </div>
+              </div>
+              <div id="f1" style="width:10px;overflow:visible"><div style="width:100.1px;height:1px"></div></div>
+              <div id="f2" style="width:10px;overflow:visible"><div style="width:100.6px;height:1px"></div></div>
+              <span id="inline">long inline text</span>
+            </body></html>"#,
+        );
+        let mut rt = ObscuraJsRuntime::new();
+        rt.set_dom(dom);
+        rt.set_viewport(420.0, 700.0);
+        rt.run_page_init();
+
+        let result = rt
+            .evaluate(
+                r#"
+                const visible = document.getElementById('visible');
+                const clip = document.getElementById('clip');
+                const hidden = document.getElementById('hidden');
+                const outer = document.getElementById('outer');
+                const axis = document.getElementById('axis');
+                const inline = document.getElementById('inline');
+                visible.scrollTo(99, 99);
+                clip.scrollTo(99, 99);
+                hidden.scrollTo(99, 99);
+                return {
+                  visible: [visible.scrollWidth, visible.scrollHeight, visible.scrollLeft, visible.scrollTop],
+                  clip: [clip.scrollWidth, clip.scrollHeight, clip.scrollLeft, clip.scrollTop],
+                  hidden: [hidden.scrollWidth, hidden.scrollHeight, hidden.scrollLeft, hidden.scrollTop],
+                  axis: [outer.scrollWidth, outer.scrollHeight, axis.scrollWidth, axis.scrollHeight],
+                  fractional: [document.getElementById('f1').scrollWidth, document.getElementById('f2').scrollWidth],
+                  inline: [inline.scrollWidth, inline.scrollHeight, inline.clientWidth, inline.clientHeight],
+                };
+                "#,
+            )
+            .expect("overflow oracle metrics");
+        assert_eq!(result["visible"], serde_json::json!([210, 160, 0, 0]));
+        assert_eq!(result["clip"], serde_json::json!([210, 160, 0, 0]));
+        assert_eq!(result["hidden"], serde_json::json!([220, 170, 99, 70]));
+        assert_eq!(result["axis"], serde_json::json!([300, 120, 300, 250]));
+        assert_eq!(result["fractional"], serde_json::json!([100, 101]));
+        assert_eq!(result["inline"], serde_json::json!([0, 0, 0, 0]));
+    }
+
+    /// Chromium quantizes effective scrolling ranges and assigned offsets to
+    /// the current device-pixel grid. At the renderer's present 1x scale a
+    /// 100.4px area cannot move a 100px scrollport, while 100.6px rounds to a
+    /// one-pixel range and assigning `.5` moves geometry and paint by 1px.
+    #[cfg(feature = "render")]
+    #[test]
+    fn fractional_scroll_ranges_quantize_geometry_and_pixels_at_one_x() {
+        let dom = parse_html(
+            r#"<html style="margin:0"><body style="margin:0">
+              <div id="low" style="width:100px;height:40px;overflow:auto;position:absolute;top:0">
+                <div style="width:100.4px;height:40px;position:relative;background:white">
+                  <div id="lowChild" style="position:absolute;left:40px;top:5px;width:10px;height:25px;background:red"></div>
+                </div>
+              </div>
+              <div id="high" style="width:100px;height:40px;overflow:auto;position:absolute;top:60px">
+                <div style="width:100.6px;height:40px;position:relative;background:white">
+                  <div id="highChild" style="position:absolute;left:40px;top:5px;width:10px;height:25px;background:blue"></div>
+                </div>
+              </div>
+            </body></html>"#,
+        );
+        let mut rt = ObscuraJsRuntime::new();
+        rt.set_dom(dom);
+        rt.set_viewport(160.0, 120.0);
+        rt.run_page_init();
+
+        let initial = rt
+            .screenshot_prepared((160.0, 120.0), Some("about:blank"))
+            .expect("initial fractional screenshot");
+        let low = rt
+            .evaluate(
+                r#"
+                const low = document.getElementById('low');
+                const child = document.getElementById('lowChild');
+                const before = child.getBoundingClientRect();
+                low.scrollLeft = 999;
+                const after = child.getBoundingClientRect();
+                return [low.scrollWidth, low.clientWidth, low.scrollLeft, after.left - before.left];
+                "#,
+            )
+            .expect("low fractional range");
+        assert_eq!(low, serde_json::json!([100, 100, 0, 0]));
+        let after_low = rt
+            .screenshot_prepared((160.0, 120.0), Some("about:blank"))
+            .expect("low fractional screenshot");
+        assert_eq!(initial, after_low, "a rounded-zero range cannot move pixels");
+
+        let high = rt
+            .evaluate(
+                r#"
+                const high = document.getElementById('high');
+                const child = document.getElementById('highChild');
+                const before = child.getBoundingClientRect();
+                high.scrollLeft = .5;
+                const after = child.getBoundingClientRect();
+                return [high.scrollWidth, high.clientWidth, high.scrollLeft, after.left - before.left];
+                "#,
+            )
+            .expect("high fractional range");
+        assert_eq!(high, serde_json::json!([101, 100, 1, -1]));
+        let after_high = rt
+            .screenshot_prepared((160.0, 120.0), Some("about:blank"))
+            .expect("high fractional screenshot");
+        assert_ne!(after_low, after_high, "the quantized pixel must repaint");
+
+        let root_dom = parse_html(
+            r#"<html style="margin:0"><body style="margin:0">
+                 <div id="wide" style="width:100.6px;height:20px"></div>
+               </body></html>"#,
+        );
+        let mut root_rt = ObscuraJsRuntime::new();
+        root_rt.set_dom(root_dom);
+        root_rt.set_viewport(100.0, 60.0);
+        root_rt.run_page_init();
+        let root = root_rt
+            .evaluate(
+                r#"
+                const wide = document.getElementById('wide');
+                const before = wide.getBoundingClientRect();
+                window.scrollTo(.5, 0);
+                const after = wide.getBoundingClientRect();
+                const high = [document.documentElement.scrollWidth, window.scrollX, after.left - before.left];
+                wide.style.width = '100.4px';
+                window.scrollTo(999, 0);
+                return { high, low: [document.documentElement.scrollWidth, window.scrollX] };
+                "#,
+            )
+            .expect("root fractional range");
+        assert_eq!(root["high"], serde_json::json!([101, 1, -1]));
+        assert_eq!(root["low"], serde_json::json!([100, 0]));
+    }
+
+    #[cfg(feature = "render")]
+    #[test]
+    fn element_scroll_offsets_follow_chromium_box_and_dom_lifecycles() {
+        let dom = parse_html(
+            r#"<html style="margin:0"><body style="margin:0">
+              <div id="first"><div id="scroller" style="width:100px;height:80px;overflow:auto">
+                <div style="width:250px;height:200px"></div>
+              </div></div>
+              <div id="second"></div>
+            </body></html>"#,
+        );
+        let mut rt = ObscuraJsRuntime::new();
+        rt.set_dom(dom);
+        rt.set_viewport(360.0, 240.0);
+        rt.run_page_init();
+
+        let result = rt
+            .evaluate(
+                r#"
+                const scroller = document.getElementById('scroller');
+                const first = document.getElementById('first');
+                const second = document.getElementById('second');
+                scroller.scrollTo(70, 60);
+                const initial = [scroller.scrollLeft, scroller.scrollTop];
+                scroller.style.overflow = 'visible';
+                const visible = [scroller.scrollLeft, scroller.scrollTop];
+                scroller.style.overflow = 'auto';
+                const restoredStyle = [scroller.scrollLeft, scroller.scrollTop];
+                scroller.style.display = 'none';
+                const noBox = [scroller.scrollWidth, scroller.scrollHeight, scroller.scrollLeft, scroller.scrollTop];
+                scroller.scrollTo(5, 5);
+                scroller.style.display = 'block';
+                const restoredDisplay = [scroller.scrollLeft, scroller.scrollTop];
+                second.appendChild(scroller);
+                const moved = [scroller.scrollLeft, scroller.scrollTop];
+                scroller.scrollTo(40, 30);
+                second.removeChild(scroller);
+                first.appendChild(scroller);
+                const reattached = [scroller.scrollLeft, scroller.scrollTop];
+                scroller.scrollTo(20, 10);
+                first.textContent = 'replacement';
+                document.body.appendChild(scroller);
+                const textReplacement = [scroller.scrollLeft, scroller.scrollTop];
+                const detached = document.createElement('div');
+                detached.style.cssText = 'width:100px;height:80px;overflow:auto';
+                let recomputes = 0;
+                globalThis.__obscura_recompute_intersections = () => { recomputes++; };
+                detached.scrollTo(30, 20);
+                scroller.scrollTo(11, 12);
+                return {
+                  initial, visible, restoredStyle, noBox, restoredDisplay,
+                  moved, reattached, textReplacement,
+                  detached: [detached.scrollWidth, detached.scrollHeight, detached.scrollLeft, detached.scrollTop],
+                  atomic: [scroller.scrollLeft, scroller.scrollTop, recomputes],
+                };
+                "#,
+            )
+            .expect("scroll lifecycle state");
+        assert_eq!(result["initial"], serde_json::json!([70, 60]));
+        assert_eq!(result["visible"], serde_json::json!([0, 0]));
+        assert_eq!(result["restoredStyle"], serde_json::json!([70, 60]));
+        assert_eq!(result["noBox"], serde_json::json!([0, 0, 0, 0]));
+        assert_eq!(result["restoredDisplay"], serde_json::json!([70, 60]));
+        assert_eq!(result["moved"], serde_json::json!([0, 0]));
+        assert_eq!(result["reattached"], serde_json::json!([0, 0]));
+        assert_eq!(result["textReplacement"], serde_json::json!([0, 0]));
+        assert_eq!(result["detached"], serde_json::json!([0, 0, 0, 0]));
+        assert_eq!(result["atomic"], serde_json::json!([11, 12, 1]));
+    }
+
+    #[cfg(feature = "render")]
+    #[test]
+    fn fixed_panels_scroll_locally_and_transformed_descendants_remain_supported() {
+        let dom = parse_html(
+            r#"<html style="margin:0"><body style="margin:0;height:1800px">
+              <div id="modal" style="position:fixed;left:20px;top:20px;width:140px;height:120px;background:red">
+                <div id="panel" style="width:100px;height:80px;overflow:hidden;position:relative;background:blue">
+                  <div id="fixedTarget" style="position:absolute;left:180px;top:160px;width:20px;height:20px;background:lime"></div>
+                </div>
+              </div>
+              <div id="transformedScroller" style="position:absolute;top:300px;width:100px;height:80px;overflow:hidden">
+                <div id="transformedTarget" style="width:240px;height:180px;transform:scale(1.1)"></div>
+              </div>
+              <div style="position:absolute;top:600px;transform:scale(1.2)">
+                <div id="affineAncestorScroller" style="width:100px;height:80px;overflow:hidden">
+                  <div style="width:240px;height:180px"></div>
+                </div>
+              </div>
+            </body></html>"#,
+        );
+        let mut rt = ObscuraJsRuntime::new();
+        rt.set_dom(dom);
+        rt.set_viewport(360.0, 240.0);
+        rt.run_page_init();
+
+        let result = rt
+            .evaluate(
+                r#"
+                const modal = document.getElementById('modal');
+                const panel = document.getElementById('panel');
+                const fixedTarget = document.getElementById('fixedTarget');
+                const transformedScroller = document.getElementById('transformedScroller');
+                const transformedTarget = document.getElementById('transformedTarget');
+                const affineAncestorScroller = document.getElementById('affineAncestorScroller');
+                const before = {
+                  modal: modal.getBoundingClientRect(),
+                  fixedTarget: fixedTarget.getBoundingClientRect(),
+                  transformedTarget: transformedTarget.getBoundingClientRect(),
+                };
+                panel.scrollTo(60, 50);
+                transformedScroller.scrollTo(50, 40);
+                affineAncestorScroller.scrollTo(50, 40);
+                window.scrollTo(0, 500);
+                const after = {
+                  modal: modal.getBoundingClientRect(),
+                  fixedTarget: fixedTarget.getBoundingClientRect(),
+                  transformedTarget: transformedTarget.getBoundingClientRect(),
+                };
+                return {
+                  modalDelta: [after.modal.left - before.modal.left, after.modal.top - before.modal.top],
+                  fixedDelta: [after.fixedTarget.left - before.fixedTarget.left, after.fixedTarget.top - before.fixedTarget.top],
+                  transformedDelta: [after.transformedTarget.left - before.transformedTarget.left, after.transformedTarget.top - before.transformedTarget.top],
+                  offsets: [panel.scrollLeft, panel.scrollTop, transformedScroller.scrollLeft, transformedScroller.scrollTop, affineAncestorScroller.scrollLeft, affineAncestorScroller.scrollTop],
+                };
+                "#,
+            )
+            .expect("fixed and transformed scroll state");
+        assert_eq!(result["modalDelta"], serde_json::json!([0, 0]));
+        assert_eq!(result["fixedDelta"], serde_json::json!([-60, -50]));
+        assert_eq!(result["transformedDelta"], serde_json::json!([-50, -540]));
+        assert_eq!(result["offsets"], serde_json::json!([60, 50, 50, 40, 0, 0]));
+    }
+
     /// CSSOM View exposes the viewport through the standards-mode root, but
     /// ordinary elements (including body) report their padding box. Modern
     /// animation libraries commonly measure a fixed 100vh sentinel through