From 699283e8600e29a3a41fba7526164273ed4cdefb Mon Sep 17 00:00:00 2001
From: Pierre Le Fevre <hello@pierrelf.com>
Date: Sat, 18 Jul 2026 15:48:03 +0800
Subject: [PATCH] Improve Opera interaction and text metrics parity (isu issue
 281)

---
 .isu/issues.json                           |  16 +-
 crates/e2e/scenarios/real-web/opera.com.we |   2 +
 crates/e2e/src/render.rs                   | 193 +++++++++++++++++++--
 crates/layout/src/lib.rs                   | 152 ++++++++++++----
 crates/render/src/atlas.rs                 |  17 +-
 crates/render/src/lib.rs                   |  28 ++-
 crates/text/src/font/mod.rs                |  88 ++++++++++
 7 files changed, 426 insertions(+), 70 deletions(-)

diff --git a/.isu/issues.json b/.isu/issues.json
index f469af0..0eb1567 100644
--- a/.isu/issues.json
+++ b/.isu/issues.json
@@ -1,5 +1,5 @@
 {
-  "next_id": 403,
+  "next_id": 404,
   "issues": [
     {
       "id": 1,
@@ -4922,6 +4922,20 @@
       "author": "piefev",
       "state": "open",
       "created_at": "2026-07-18T07:06:15Z"
+    },
+    {
+      "id": 403,
+      "repo": "we",
+      "title": "Opera parity remains blocked after dynamic interaction and font metrics fixes",
+      "body": "Parent: isu issue 281\n\nThis pass fixed two deterministic gaps while working on Opera parity:\n- scenario interactions now drain dynamically inserted scripts and refresh adopted styles/images before repainting, so the Opera SurveyMonkey path hydrates after the existing footer input interaction;\n- inline text layout now uses scaled font ascent/descent metrics for baseline offsets instead of assuming the baseline is exactly one font-size from the line top.\n\nThe Opera scenario now asserts the post-interaction survey container, but the Chromium screenshot assertions still fail.\n\nRepro:\n  cargo run -p we-e2e -- --scenario crates/e2e/scenarios/real-web/opera.com.we --out-dir crates/e2e/artifacts\n\nCurrent result after this pass:\n- desktop L100: 64.71% match (433569/1228500 px differ, tol=4, max_diff=0.1000%)\n- mobile L112: 67.77% match (106103/329160 px differ, tol=4, max_diff=0.1000%)\n\nArtifacts:\n- crates/e2e/artifacts/real-web/opera.com/desktop.png\n- crates/e2e/artifacts/real-web/opera.com/desktop.png.diff.png\n- crates/e2e/artifacts/real-web/opera.com/desktop_dom.txt\n- crates/e2e/artifacts/real-web/opera.com/desktop_interaction_dom.txt\n- crates/e2e/artifacts/real-web/opera.com/mobile.png\n- crates/e2e/artifacts/real-web/opera.com/mobile.png.diff.png\n- crates/e2e/artifacts/real-web/opera.com/mobile_dom.txt\n- crates/e2e/artifacts/real-web/opera.com/mobile_interaction_dom.txt\n\nRemaining visible blockers are broad text raster/antialiasing differences, hero/cookie vertical placement, and first-screenshot timing/state differences versus the 5s-settled live Chromium golden. Keep crates/e2e/scenarios/real-web/opera.com.we xfail until both screenshot assertions pass within the default threshold.",
+      "labels": [
+        "real-web",
+        "text"
+      ],
+      "assigned": [],
+      "author": "piefev",
+      "state": "open",
+      "created_at": "2026-07-18T07:37:25Z"
     }
   ]
 }
diff --git a/crates/e2e/scenarios/real-web/opera.com.we b/crates/e2e/scenarios/real-web/opera.com.we
index ed1dd09..a4007ef 100644
--- a/crates/e2e/scenarios/real-web/opera.com.we
+++ b/crates/e2e/scenarios/real-web/opera.com.we
@@ -96,6 +96,7 @@ assert_dom_contains "Opera"
 type [id=footer__lang-input-next] interactivity
 dump_dom real-web/opera.com/desktop_interaction_dom.txt
 assert_dom_contains https://www.opera.com/interactivity
+assert_dom_contains survey_container
 assert_screenshot_matches real-web/opera.com/desktop.png opera.com.desktop.chromium.expected.png
 
 viewport 390 844
@@ -107,4 +108,5 @@ assert_dom_contains "Opera"
 type [id=footer__lang-input-next] interactivity
 dump_dom real-web/opera.com/mobile_interaction_dom.txt
 assert_dom_contains https://www.opera.com/interactivity
+assert_dom_contains survey_container
 assert_screenshot_matches real-web/opera.com/mobile.png opera.com.mobile.chromium.expected.png
diff --git a/crates/e2e/src/render.rs b/crates/e2e/src/render.rs
index 307f6b2..3b71034 100644
--- a/crates/e2e/src/render.rs
+++ b/crates/e2e/src/render.rs
@@ -35,7 +35,7 @@ use we_render::{build_display_list_with_page_scroll, GpuRenderer, RenderFonts};
 use we_style::computed::resolve_styles;
 use we_svg::{render_svg, svg_intrinsic_size, SvgIntrinsicSize};
 use we_text::font::{self, Font, FontRegistry};
-use we_url::Url;
+use we_url::{Origin, Url};
 
 use crate::console::{CapturedConsole, RcConsole};
 
@@ -87,10 +87,12 @@ pub struct Session {
     pub height: u32,
     /// Captured `console.*` output.
     pub console: Rc<CapturedConsole>,
-    /// Captured stylesheet from initial load (`<style>` + `<link>`).
-    /// Re-used for subsequent re-paints. Re-collecting after every
-    /// interaction would re-fetch every external CSS — not what we want.
+    /// Captured stylesheet used for the next paint.
     stylesheet: Stylesheet,
+    /// Base document stylesheet from `<style>` + `<link>`, without adopted
+    /// stylesheets. Re-used after interactions so dynamic adopted stylesheet
+    /// refreshes do not re-fetch every external CSS.
+    document_stylesheet: Stylesheet,
     /// Font picked for rendering.
     font: Font,
     /// Font registry with system fonts plus fonts registered by @font-face.
@@ -107,6 +109,10 @@ pub struct Session {
     /// Images collected at load time (subresources only; canvas/SVG bitmaps
     /// are re-collected on each repaint).
     images: ImageStore,
+    /// Loader state for fetching dynamic resources inserted after interactions.
+    loader: ResourceLoader,
+    /// Document origin used for same-origin checks while loading dynamic scripts.
+    document_origin: Origin,
 }
 
 impl Session {
@@ -142,8 +148,16 @@ impl Session {
     fn from_loaded(loaded: LoadedHtml, width: u32, height: u32) -> Result<Self, String> {
         let mut warnings = Vec::new();
         let console = Rc::new(CapturedConsole::new());
-        let (vm, stylesheet, images, font_registry, base_url) =
-            prepare_page(loaded, width, height, Rc::clone(&console), &mut warnings);
+        let (
+            vm,
+            document_stylesheet,
+            stylesheet,
+            images,
+            font_registry,
+            base_url,
+            loader,
+            document_origin,
+        ) = prepare_page(loaded, width, height, Rc::clone(&console), &mut warnings);
 
         let font = font_registry
             .find_best_font()
@@ -161,6 +175,7 @@ impl Session {
             height,
             console,
             stylesheet,
+            document_stylesheet,
             font,
             font_registry,
             backend,
@@ -168,6 +183,8 @@ impl Session {
             bgra: Vec::new(),
             warnings,
             images,
+            loader,
+            document_origin,
         };
         session.repaint();
         Ok(session)
@@ -389,7 +406,75 @@ impl Session {
     /// Pump the JS event loop (microtasks + timers). Used by interactivity
     /// commands to flush async work kicked off by a synthetic event.
     pub fn pump_event_loop(&mut self) {
-        let _ = self.vm.pump_event_loop();
+        drain_event_loop_and_dynamic_scripts(
+            &mut self.vm,
+            &mut self.loader,
+            &self.base_url,
+            &self.document_origin,
+        );
+        self.refresh_render_resources();
+    }
+
+    /// Refresh styles, web fonts, and image resources after script-driven DOM
+    /// mutations. Interaction handlers can append scripts that add adopted
+    /// stylesheets or reveal images, so repainting against load-time resources
+    /// would miss those updates.
+    fn refresh_render_resources(&mut self) {
+        let Some(doc_ref) = self.vm.borrow_document() else {
+            return;
+        };
+
+        let viewport = (self.width as f32, self.height as f32);
+        let stylesheet = stylesheet_with_adopted(self.document_stylesheet.clone(), &self.vm);
+
+        let mut font_registry = FontRegistry::new();
+        let fr = load_web_fonts(
+            &stylesheet,
+            &mut self.loader,
+            &self.base_url,
+            &mut font_registry,
+        );
+        if fr.failed > 0 {
+            self.warnings.push(format!(
+                "{} post-interaction web font(s) failed to load",
+                fr.failed
+            ));
+        }
+
+        let mut images =
+            collect_images_for_viewport(&doc_ref, &mut self.loader, &self.base_url, viewport);
+        if let Some(styled) = resolve_styles(
+            &doc_ref,
+            std::slice::from_ref(&stylesheet),
+            (self.width as f32, self.height as f32),
+        ) {
+            collect_background_images(
+                &doc_ref,
+                &styled,
+                &mut self.loader,
+                &self.base_url,
+                &mut images,
+            );
+        }
+        drop(doc_ref);
+
+        self.vm.with_document_mut(|doc| {
+            for (node_id, resource) in &images {
+                if let Some(img) = &resource.image {
+                    doc.store_image_data(*node_id, img.data.clone(), img.width, img.height);
+                }
+            }
+        });
+
+        if let Some(font) = font_registry
+            .find_best_font()
+            .or_else(|| font::load_system_font().ok())
+        {
+            self.font = font;
+        }
+        self.stylesheet = stylesheet;
+        self.font_registry = font_registry;
+        self.images = images;
     }
 
     /// Detach the document from the VM and return a one-shot [`RenderOutput`]
@@ -529,7 +614,13 @@ fn collect_stylesheets_with_adopted(
     viewport: (f32, f32),
     vm: &Vm,
 ) -> Stylesheet {
-    let mut stylesheet = collect_stylesheets_for_viewport(doc, loader, base_url, viewport);
+    stylesheet_with_adopted(
+        collect_stylesheets_for_viewport(doc, loader, base_url, viewport),
+        vm,
+    )
+}
+
+fn stylesheet_with_adopted(mut stylesheet: Stylesheet, vm: &Vm) -> Stylesheet {
     for css in vm.adopted_stylesheet_texts() {
         stylesheet.rules.extend(CssParser::parse(&css).rules);
     }
@@ -546,7 +637,16 @@ fn prepare_page(
     height: u32,
     console: Rc<CapturedConsole>,
     warnings: &mut Vec<String>,
-) -> (Vm, Stylesheet, ImageStore, FontRegistry, Url) {
+) -> (
+    Vm,
+    Stylesheet,
+    Stylesheet,
+    ImageStore,
+    FontRegistry,
+    Url,
+    ResourceLoader,
+    Origin,
+) {
     let doc = parse_html(&loaded.text);
 
     let meta_csp = csp::extract_meta_csp(&doc);
@@ -614,19 +714,15 @@ fn prepare_page(
     );
     drain_event_loop_and_dynamic_scripts(&mut vm, &mut loader, &loaded.base_url, &document_origin);
 
-    let (stylesheet, font_registry, images) = {
+    let (document_stylesheet, stylesheet, font_registry, images) = {
         let doc_ref = vm
             .borrow_document()
             .expect("document still attached after load scripts");
 
         let viewport = (width as f32, height as f32);
-        let stylesheet = collect_stylesheets_with_adopted(
-            &doc_ref,
-            &mut loader,
-            &loaded.base_url,
-            viewport,
-            &vm,
-        );
+        let document_stylesheet =
+            collect_stylesheets_for_viewport(&doc_ref, &mut loader, &loaded.base_url, viewport);
+        let stylesheet = stylesheet_with_adopted(document_stylesheet.clone(), &vm);
         let mut font_registry = FontRegistry::new();
         let fr = load_web_fonts(
             &stylesheet,
@@ -655,7 +751,7 @@ fn prepare_page(
                 &mut images,
             );
         }
-        (stylesheet, font_registry, images)
+        (document_stylesheet, stylesheet, font_registry, images)
     };
 
     vm.with_document_mut(|doc| {
@@ -666,7 +762,16 @@ fn prepare_page(
         }
     });
 
-    (vm, stylesheet, images, font_registry, loaded.base_url)
+    (
+        vm,
+        document_stylesheet,
+        stylesheet,
+        images,
+        font_registry,
+        loaded.base_url,
+        loader,
+        document_origin,
+    )
 }
 
 // ---------------------------------------------------------------------------
@@ -761,3 +866,53 @@ fn collect_canvas_images(doc: &Document) -> HashMap<NodeId, Image> {
     }
     out
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn interaction_pump_executes_dynamic_script_and_refreshes_adopted_styles() {
+        let html = r#"<!doctype html>
+<button id="go">go</button>
+<div id="status">initial</div>
+<script>
+document.getElementById('go').addEventListener('click', function() {
+  var s = document.createElement('script');
+  s.src = 'data:text/javascript,var sheet = new CSSStyleSheet(); sheet.replaceSync(%22#status { color: rgb(1, 2, 3); }%22); document.adoptedStyleSheets = [sheet]; window.loadedFromDynamicScript = 1;';
+  s.onload = function() {
+    document.getElementById('status').textContent =
+      window.loadedFromDynamicScript ? 'loaded' : 'missing';
+  };
+  document.body.appendChild(s);
+});
+</script>"#;
+        let path =
+            std::env::temp_dir().join(format!("we-e2e-dynamic-script-{}.html", std::process::id()));
+        std::fs::write(&path, html).expect("write test page");
+
+        let mut session =
+            Session::load_file_as_url(path.to_str().unwrap(), "https://example.test/", 320, 200)
+                .expect("load test page");
+        session
+            .execute_js(
+                "document.getElementById('go').dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));",
+                "test click",
+            )
+            .expect("dispatch click");
+        session.pump_event_loop();
+
+        let dump = session.dom_dump();
+        let _ = std::fs::remove_file(path);
+
+        assert!(
+            dump.contains("\"loaded\""),
+            "dynamic script onload should update DOM; dump:\n{dump}"
+        );
+        assert_eq!(
+            session.stylesheet.rules.len(),
+            1,
+            "adopted stylesheet from the dynamic script should be refreshed"
+        );
+    }
+}
diff --git a/crates/layout/src/lib.rs b/crates/layout/src/lib.rs
index b85e27d..ca375e4 100644
--- a/crates/layout/src/lib.rs
+++ b/crates/layout/src/lib.rs
@@ -64,6 +64,10 @@ pub struct TextLine {
     pub y: f32,
     pub width: f32,
     pub font_size: f32,
+    /// Distance from `y` to this fragment's baseline.
+    pub baseline_offset: f32,
+    /// Height of this fragment's CSS inline box.
+    pub line_height: f32,
     /// Computed CSS `font-weight` numeric value for this text fragment.
     pub font_weight: f32,
     /// Computed CSS `letter-spacing` in px for this text fragment.
@@ -5946,6 +5950,7 @@ enum InlineItemKind {
         node: NodeId,
         text: String,
         font_size: f32,
+        line_height: f32,
         font_weight: f32,
         letter_spacing: f32,
         font_family: String,
@@ -5963,6 +5968,7 @@ enum InlineItemKind {
         /// The source DOM node (text node) this space came from.
         node: NodeId,
         font_size: f32,
+        line_height: f32,
         font_weight: f32,
         letter_spacing: f32,
         font_family: String,
@@ -6014,6 +6020,8 @@ struct PendingFragment {
     width: f32,
     height: f32,
     font_size: f32,
+    ascent: f32,
+    line_height: f32,
     font_weight: f32,
     letter_spacing: f32,
     font_family: String,
@@ -6066,6 +6074,7 @@ fn flatten_inline_tree(
                                 node,
                                 text: w,
                                 font_size: child.font_size,
+                                line_height: child.line_height,
                                 font_weight: child.font_weight,
                                 letter_spacing: child.letter_spacing,
                                 font_family: child.font_family.clone(),
@@ -6081,6 +6090,7 @@ fn flatten_inline_tree(
                             items.push(InlineItemKind::Space {
                                 node,
                                 font_size: child.font_size,
+                                line_height: child.line_height,
                                 font_weight: child.font_weight,
                                 letter_spacing: child.letter_spacing,
                                 font_family: child.font_family.clone(),
@@ -6275,6 +6285,40 @@ fn split_into_words_preserve(text: &str) -> Vec<WordSegment> {
     segments
 }
 
+#[derive(Clone, Copy)]
+struct InlineTextMetrics {
+    ascent: f32,
+    descent: f32,
+    line_height: f32,
+}
+
+fn inline_text_metrics(font: &Font, font_size: f32, line_height: f32) -> InlineTextMetrics {
+    if font_size <= 0.0 {
+        return InlineTextMetrics {
+            ascent: 0.0,
+            descent: 0.0,
+            line_height: 0.0,
+        };
+    }
+
+    let metrics = font.metrics(font_size);
+    let content_height = (metrics.ascent + metrics.descent + metrics.line_gap).max(0.0);
+    if content_height <= f32::EPSILON {
+        return InlineTextMetrics {
+            ascent: font_size,
+            descent: (line_height - font_size).max(0.0),
+            line_height,
+        };
+    }
+
+    let half_leading = (line_height - content_height) * 0.5;
+    InlineTextMetrics {
+        ascent: (metrics.ascent + metrics.line_gap * 0.5 + half_leading).max(0.0),
+        descent: (metrics.descent + metrics.line_gap * 0.5 + half_leading).max(0.0),
+        line_height,
+    }
+}
+
 /// Lay out inline children using a proper inline formatting context.
 ///
 /// If `float_ctx` is provided, line boxes are shortened to avoid overlapping
@@ -6312,9 +6356,15 @@ fn layout_inline_children(
     // The tallest atomic-inline box on the current line, if any.
     // Atomic boxes are placed with their bottom edge on the baseline.
     let mut current_line_max_atomic_height: f32 = 0.0;
-    // The largest font-size of any text fragment on the current line.
-    let mut current_line_max_font_size: f32 = 0.0;
+    // The largest text metrics of any text fragment on the current line.
+    let mut current_line_max_text_ascent: f32 = 0.0;
+    let mut current_line_max_text_descent: f32 = 0.0;
+    let mut current_line_max_text_line_height: f32 = 0.0;
     let mut font_resolver = FontResolver::new(ctx.font_registry, ctx.font);
+    let parent_text_metrics = {
+        let font = font_resolver.resolve(&parent.font_family, parent.font_weight, parent.italic);
+        inline_text_metrics(font, parent_font_size, line_height)
+    };
 
     // Compute the available width for the current line, narrowed by floats.
     let line_avail = |y: f32| -> (f32, f32) {
@@ -6336,23 +6386,21 @@ fn layout_inline_children(
     // used line height.
     let finalise = |fragments: &mut [PendingFragment],
                     max_atomic_height: f32,
-                    max_frag_font_size: f32|
+                    max_text_ascent: f32,
+                    max_text_descent: f32,
+                    max_text_line_height: f32|
      -> f32 {
-        // The dominant ascent is the larger of the strut's ascent (the parent's
-        // font-size) and the largest text fragment's font-size on the line.
-        // Atomic boxes are placed with their bottom edge on the baseline, so
-        // their height contributes to ascent as well.
-        let text_ascent = parent_font_size.max(max_frag_font_size);
-        let line_ascent = text_ascent.max(max_atomic_height);
-        // Descent below the baseline: the strut contributes (line_height -
-        // parent_font_size); text fragments contribute their half-leading
-        // (~0.2 * font_size at the default line-height of 1.2). Atomic boxes
-        // sit on the baseline so contribute nothing below it.
-        let strut_descent = (line_height - parent_font_size).max(0.0);
-        let frag_descent = max_frag_font_size * 0.2;
-        let descent = strut_descent.max(frag_descent);
-
-        let used_height = (line_ascent + descent).max(line_height);
+        // The strut and text fragments contribute font-derived ascent/descent.
+        // Atomic boxes sit on the baseline, so their full height is ascent.
+        let line_ascent = parent_text_metrics
+            .ascent
+            .max(max_text_ascent)
+            .max(max_atomic_height);
+        let line_descent = parent_text_metrics.descent.max(max_text_descent);
+
+        let used_height = (line_ascent + line_descent)
+            .max(line_height)
+            .max(max_text_line_height);
 
         for frag in fragments.iter_mut() {
             // Atomic-inline placeholders (empty text, transparent color) sit
@@ -6362,9 +6410,9 @@ fn layout_inline_children(
                 frag.y_offset = (line_ascent - frag.height).max(0.0);
             } else {
                 // Baseline-align text: renderer places the glyph baseline at
-                // frag.y + frag.font_size. To align all baselines at
-                // line_top + line_ascent: frag.y_offset = line_ascent - font_size.
-                frag.y_offset = (line_ascent - frag.font_size).max(0.0);
+                // frag.y + frag.ascent. To align all baselines at line_top +
+                // line_ascent: frag.y_offset = line_ascent - frag.ascent.
+                frag.y_offset = (line_ascent - frag.ascent).max(0.0);
             }
         }
 
@@ -6377,6 +6425,7 @@ fn layout_inline_children(
                 node,
                 text,
                 font_size,
+                line_height: item_line_height,
                 font_weight,
                 letter_spacing,
                 font_family,
@@ -6401,7 +6450,9 @@ fn layout_inline_children(
                     let used_height = finalise(
                         &mut current_line,
                         current_line_max_atomic_height,
-                        current_line_max_font_size,
+                        current_line_max_text_ascent,
+                        current_line_max_text_descent,
+                        current_line_max_text_line_height,
                     );
                     all_lines.push((
                         std::mem::take(&mut current_line),
@@ -6411,16 +6462,20 @@ fn layout_inline_children(
                     ));
                     line_y += used_height;
                     current_line_max_atomic_height = 0.0;
-                    current_line_max_font_size = 0.0;
+                    current_line_max_text_ascent = 0.0;
+                    current_line_max_text_descent = 0.0;
+                    current_line_max_text_line_height = 0.0;
                     let (off, w) = line_avail(line_y);
                     current_line_offset = off;
                     current_line_width = w;
                     cursor_x = 0.0;
                 }
 
-                if *font_size > current_line_max_font_size {
-                    current_line_max_font_size = *font_size;
-                }
+                let metrics = inline_text_metrics(resolved_font, *font_size, *item_line_height);
+                current_line_max_text_ascent = current_line_max_text_ascent.max(metrics.ascent);
+                current_line_max_text_descent = current_line_max_text_descent.max(metrics.descent);
+                current_line_max_text_line_height =
+                    current_line_max_text_line_height.max(metrics.line_height);
 
                 current_line.push(PendingFragment {
                     node: *node,
@@ -6430,6 +6485,8 @@ fn layout_inline_children(
                     width: word_width,
                     height: 0.0,
                     font_size: *font_size,
+                    ascent: metrics.ascent,
+                    line_height: metrics.line_height,
                     font_weight: *font_weight,
                     letter_spacing: *letter_spacing,
                     font_family: font_family.clone(),
@@ -6446,6 +6503,7 @@ fn layout_inline_children(
             InlineItemKind::Space {
                 node,
                 font_size,
+                line_height: item_line_height,
                 font_weight,
                 letter_spacing,
                 font_family,
@@ -6465,9 +6523,12 @@ fn layout_inline_children(
                 if *preserved {
                     // Emit a real fragment for the space so its width is preserved
                     // even in leading position.
-                    if *font_size > current_line_max_font_size {
-                        current_line_max_font_size = *font_size;
-                    }
+                    let metrics = inline_text_metrics(resolved_font, *font_size, *item_line_height);
+                    current_line_max_text_ascent = current_line_max_text_ascent.max(metrics.ascent);
+                    current_line_max_text_descent =
+                        current_line_max_text_descent.max(metrics.descent);
+                    current_line_max_text_line_height =
+                        current_line_max_text_line_height.max(metrics.line_height);
                     current_line.push(PendingFragment {
                         node: *node,
                         text: " ".to_string(),
@@ -6476,6 +6537,8 @@ fn layout_inline_children(
                         width: space_width,
                         height: 0.0,
                         font_size: *font_size,
+                        ascent: metrics.ascent,
+                        line_height: metrics.line_height,
                         font_weight: *font_weight,
                         letter_spacing: *letter_spacing,
                         font_family: font_family.clone(),
@@ -6520,7 +6583,9 @@ fn layout_inline_children(
                 let used_height = finalise(
                     &mut current_line,
                     current_line_max_atomic_height,
-                    current_line_max_font_size,
+                    current_line_max_text_ascent,
+                    current_line_max_text_descent,
+                    current_line_max_text_line_height,
                 );
                 all_lines.push((
                     std::mem::take(&mut current_line),
@@ -6530,7 +6595,9 @@ fn layout_inline_children(
                 ));
                 line_y += used_height;
                 current_line_max_atomic_height = 0.0;
-                current_line_max_font_size = 0.0;
+                current_line_max_text_ascent = 0.0;
+                current_line_max_text_descent = 0.0;
+                current_line_max_text_line_height = 0.0;
                 let (off, w) = line_avail(line_y);
                 current_line_offset = off;
                 current_line_width = w;
@@ -6561,7 +6628,9 @@ fn layout_inline_children(
                     let used_height = finalise(
                         &mut current_line,
                         current_line_max_atomic_height,
-                        current_line_max_font_size,
+                        current_line_max_text_ascent,
+                        current_line_max_text_descent,
+                        current_line_max_text_line_height,
                     );
                     all_lines.push((
                         std::mem::take(&mut current_line),
@@ -6571,7 +6640,9 @@ fn layout_inline_children(
                     ));
                     line_y += used_height;
                     current_line_max_atomic_height = 0.0;
-                    current_line_max_font_size = 0.0;
+                    current_line_max_text_ascent = 0.0;
+                    current_line_max_text_descent = 0.0;
+                    current_line_max_text_line_height = 0.0;
                     let (off, w) = line_avail(line_y);
                     current_line_offset = off;
                     current_line_width = w;
@@ -6592,6 +6663,8 @@ fn layout_inline_children(
                     width: *width,
                     height: *height,
                     font_size: *height,
+                    ascent: *height,
+                    line_height: *height,
                     font_weight: 400.0,
                     letter_spacing: 0.0,
                     font_family: parent.font_family.clone(),
@@ -6617,7 +6690,9 @@ fn layout_inline_children(
         let used_height = finalise(
             &mut current_line,
             current_line_max_atomic_height,
-            current_line_max_font_size,
+            current_line_max_text_ascent,
+            current_line_max_text_descent,
+            current_line_max_text_line_height,
         );
         all_lines.push((
             current_line,
@@ -6721,6 +6796,8 @@ fn layout_inline_children(
                 y: frag_y,
                 width: frag.width,
                 font_size: frag.font_size,
+                baseline_offset: frag.ascent,
+                line_height: frag.line_height,
                 font_weight: frag.font_weight,
                 letter_spacing: frag.letter_spacing,
                 font_family: frag.font_family.clone(),
@@ -8925,10 +9002,9 @@ body { margin: 0; }
             small.y
         );
 
-        // Baselines (renderer convention: baseline_y = line.y + font_size)
-        // must coincide for fragments on the same line.
-        let big_baseline = big.y + big.font_size;
-        let small_baseline = small.y + small.font_size;
+        // Baselines must coincide for fragments on the same line.
+        let big_baseline = big.y + big.baseline_offset;
+        let small_baseline = small.y + small.baseline_offset;
         assert!(
             (big_baseline - small_baseline).abs() < 0.5,
             "baselines must coincide: big={}, small={}",
diff --git a/crates/render/src/atlas.rs b/crates/render/src/atlas.rs
index dd8d07f..e675b7a 100644
--- a/crates/render/src/atlas.rs
+++ b/crates/render/src/atlas.rs
@@ -393,14 +393,13 @@ impl GlyphAtlas {
 
             // Screen position: TextLine origin + glyph offset + bearing.
             //
-            // `TextLine.y` is the top of the line box, with the baseline one
-            // `font_size` below it — the convention used by the display-list
-            // builder (see `paint_text`) and the software renderer
-            // (`draw_text_line`). `bearing_y` is the distance from the baseline
-            // up to the glyph's top edge, so the bitmap top sits at
-            // `baseline - bearing_y`. Bitmap metrics are device px → divide by
-            // `scale` for logical quad geometry.
-            let baseline = line.y + size_px;
+            // `TextLine.y` is the top of the fragment's inline box. The
+            // baseline offset comes from layout's resolved font metrics.
+            // `bearing_y` is the distance from the baseline up to the glyph's
+            // top edge, so the bitmap top sits at `baseline - bearing_y`.
+            // Bitmap metrics are device px → divide by `scale` for logical
+            // quad geometry.
+            let baseline = line.y + line.baseline_offset;
             let gx = line.x
                 + sg.x_offset
                 + line.letter_spacing * glyph_index as f32
@@ -499,6 +498,8 @@ mod tests {
             y: 20.0,
             width: 0.0,
             font_size: 18.0,
+            baseline_offset: 18.0,
+            line_height: 18.0 * 1.2,
             font_weight: 400.0,
             letter_spacing,
             font_family: String::new(),
diff --git a/crates/render/src/lib.rs b/crates/render/src/lib.rs
index 35d5123..7387d80 100644
--- a/crates/render/src/lib.rs
+++ b/crates/render/src/lib.rs
@@ -1350,7 +1350,7 @@ fn paint_text(layout_box: &LayoutBox, list: &mut DisplayList, tx: f32, ty: f32)
         //   Overline    — at the top of the text line.
         //   LineThrough — around the x-height (mid-line).
         if line.width > 0.0 {
-            let baseline_y = line.y + ty + font_size;
+            let baseline_y = line.y + ty + line.baseline_offset;
             let decoration_y = match line.text_decoration {
                 TextDecoration::Underline => Some(baseline_y + 2.0),
                 TextDecoration::Overline => Some(line.y + ty),
@@ -1376,7 +1376,7 @@ fn paint_text(layout_box: &LayoutBox, list: &mut DisplayList, tx: f32, ty: f32)
                     x: line.x + tx,
                     y: line.y + ty,
                     width: line.width,
-                    height: font_size * 1.2,
+                    height: line.line_height,
                     color: line.background_color,
                 },
             );
@@ -1408,6 +1408,8 @@ fn paint_list_marker(layout_box: &LayoutBox, list: &mut DisplayList, tx: f32, ty
             y: marker_y,
             width: marker_width,
             font_size,
+            baseline_offset: font_size,
+            line_height: font_size * 1.2,
             font_weight: layout_box.font_weight,
             letter_spacing: 0.0,
             font_family: String::new(),
@@ -1867,6 +1869,8 @@ fn paint_text_input(
                 y: text_y,
                 width: layout_box.rect.width,
                 font_size,
+                baseline_offset: font_size,
+                line_height: font_size * 1.2,
                 font_weight: layout_box.font_weight,
                 letter_spacing: 0.0,
                 font_family: String::new(),
@@ -2215,6 +2219,8 @@ fn paint_button(
                 y: text_y,
                 width: text_width,
                 font_size,
+                baseline_offset: font_size,
+                line_height: font_size * 1.2,
                 font_weight: layout_box.font_weight,
                 letter_spacing: 0.0,
                 font_family: String::new(),
@@ -2295,6 +2301,8 @@ fn paint_select_button(
                 y: text_y,
                 width: layout_box.rect.width - 20.0, // leave room for arrow
                 font_size,
+                baseline_offset: font_size,
+                line_height: font_size * 1.2,
                 font_weight: layout_box.font_weight,
                 letter_spacing: 0.0,
                 font_family: String::new(),
@@ -2432,6 +2440,16 @@ fn paint_select_listbox(
                 } else {
                     font_size
                 },
+                baseline_offset: if opt.is_group_label {
+                    font_size * 0.9
+                } else {
+                    font_size
+                },
+                line_height: if opt.is_group_label {
+                    font_size * 0.9 * 1.2
+                } else {
+                    font_size * 1.2
+                },
                 font_weight: if opt.is_group_label { 700.0 } else { 400.0 },
                 letter_spacing: 0.0,
                 font_family: String::new(),
@@ -2589,6 +2607,8 @@ fn paint_dropdown_overlay(dd: &PendingDropdown, list: &mut DisplayList) {
                 y: oy,
                 width: menu_width - indent - padding,
                 font_size: opt_font_size,
+                baseline_offset: opt_font_size,
+                line_height: opt_font_size * 1.2,
                 font_weight: if opt.is_group_label { 700.0 } else { 400.0 },
                 letter_spacing: 0.0,
                 font_family: String::new(),
@@ -4759,7 +4779,7 @@ input {
         let rects = decoration_rects_for(&list, "Hello");
         assert_eq!(rects.len(), 1, "underline should produce one stroke");
         let (_, y, width, _) = rects[0];
-        let baseline_y = glyph_line.y + glyph_line.font_size;
+        let baseline_y = glyph_line.y + glyph_line.baseline_offset;
         assert!(
             y > baseline_y,
             "underline at y={y} must sit below baseline at {baseline_y}"
@@ -4790,7 +4810,7 @@ input {
         assert_eq!(rects.len(), 1, "line-through should produce one stroke");
         let (_, y, width, _) = rects[0];
         let top = glyph_line.y;
-        let baseline_y = glyph_line.y + glyph_line.font_size;
+        let baseline_y = glyph_line.y + glyph_line.baseline_offset;
         assert!(
             y > top && y < baseline_y,
             "line-through at y={y} must sit between top {top} and baseline {baseline_y}"
diff --git a/crates/text/src/font/mod.rs b/crates/text/src/font/mod.rs
index 7342b82..fe0715b 100644
--- a/crates/text/src/font/mod.rs
+++ b/crates/text/src/font/mod.rs
@@ -62,6 +62,17 @@ pub struct PositionedGlyph {
     pub bitmap: Option<CachedGlyphBitmap>,
 }
 
+/// Scaled vertical metrics for a font face.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct FontMetrics {
+    /// Distance from the baseline to the font ascender, in CSS pixels.
+    pub ascent: f32,
+    /// Distance from the baseline to the font descender, in CSS pixels.
+    pub descent: f32,
+    /// Extra line gap recommended by the font, in CSS pixels.
+    pub line_gap: f32,
+}
+
 /// Errors that can occur during font parsing.
 #[derive(Debug)]
 pub enum FontError {
@@ -433,6 +444,61 @@ impl Font {
         rasterizer::rasterize(&outline, scale)
     }
 
+    /// Return scaled vertical metrics for this font.
+    pub fn metrics(&self, size_px: f32) -> FontMetrics {
+        let fallback = FontMetrics {
+            ascent: size_px,
+            descent: (size_px * 0.2).max(0.0),
+            line_gap: 0.0,
+        };
+        if size_px <= 0.0 {
+            return FontMetrics {
+                ascent: 0.0,
+                descent: 0.0,
+                line_gap: 0.0,
+            };
+        }
+
+        let head = match self.head() {
+            Ok(head) if head.units_per_em > 0 => head,
+            _ => return fallback,
+        };
+        let scale = size_px / head.units_per_em as f32;
+
+        let from_units = |ascent: i16, descent: i16, line_gap: i16| -> Option<FontMetrics> {
+            let ascent = ascent as f32 * scale;
+            let descent = (-(descent as f32) * scale).max(0.0);
+            let line_gap = (line_gap as f32 * scale).max(0.0);
+            if ascent > 0.0 || descent > 0.0 {
+                Some(FontMetrics {
+                    ascent,
+                    descent,
+                    line_gap,
+                })
+            } else {
+                None
+            }
+        };
+
+        if let Ok(os2) = self.os2() {
+            if let Some(metrics) = from_units(
+                os2.s_typo_ascender,
+                os2.s_typo_descender,
+                os2.s_typo_line_gap,
+            ) {
+                return metrics;
+            }
+        }
+
+        if let Ok(hhea) = self.hhea() {
+            if let Some(metrics) = from_units(hhea.ascent, hhea.descent, hhea.line_gap) {
+                return metrics;
+            }
+        }
+
+        fallback
+    }
+
     /// Get a rasterized glyph bitmap, using the cache to avoid re-rasterization.
     ///
     /// The pixel size is quantized to the nearest integer to bound cache size.
@@ -780,6 +846,28 @@ mod tests {
         assert!(hhea.num_long_hor_metrics > 0, "should have metrics");
     }
 
+    #[test]
+    fn font_metrics_scale_hhea_when_os2_missing() {
+        let font = synthetic_font(None);
+        let metrics = font.metrics(20.0);
+
+        assert!(
+            (metrics.ascent - 16.0).abs() < 0.01,
+            "expected hhea ascent to scale from 800/1000 at 20px, got {}",
+            metrics.ascent
+        );
+        assert!(
+            (metrics.descent - 4.0).abs() < 0.01,
+            "expected hhea descent to scale from -200/1000 at 20px, got {}",
+            metrics.descent
+        );
+        assert!(
+            metrics.line_gap.abs() < 0.01,
+            "expected zero synthetic line gap, got {}",
+            metrics.line_gap
+        );
+    }
+
     #[test]
     fn parse_hmtx_table() {
         let font = test_font();
-- 
2.51.2