From a5555d78c86902c76b96fefadb2567d43d7359da Mon Sep 17 00:00:00 2001
From: SGavrl <277843151+SGavrl@users.noreply.github.com>
Date: Thu, 30 Jul 2026 20:41:58 +0000
Subject: [PATCH] Fix replaced element aspect ratios
---
crates/obscura-render/src/dom.rs | 18 ++++++-
crates/obscura-render/src/lib.rs | 4 ++
crates/obscura-render/src/style.rs | 5 +-
crates/obscura-render/tests/layout_test.rs | 57 ++++++++++++++++++++--
4 files changed, 79 insertions(+), 5 deletions(-)
diff --git a/crates/obscura-render/src/dom.rs b/crates/obscura-render/src/dom.rs
index 129bdf2..e336162 100644
--- a/crates/obscura-render/src/dom.rs
+++ b/crates/obscura-render/src/dom.rs
@@ -633,6 +633,7 @@ fn apply_presentational_hints(node: &obscura_dom::tree::Node, style: &mut crate:
if let (Some(w), Some(h)) = (aw, ah) {
if w > 0.0 && h > 0.0 {
style.aspect_ratio = Some(w / h);
+ style.aspect_ratio_is_mapped = true;
}
}
}
@@ -762,6 +763,7 @@ fn apply_picture_source_hints(
(Some(width), Some(height)) => Some(width / height),
_ => None,
};
+ style.aspect_ratio_is_mapped = style.aspect_ratio.is_some();
}
/// Compute the UA + author style for every element in preorder, maintaining
@@ -2021,8 +2023,9 @@ pub(crate) fn layout_dom_with_web_fonts(
}
if let Some(s) = styles.get_mut(&nid) {
s.intrinsic_size = Some((iw, ih));
- if s.aspect_ratio.is_none() {
+ if s.aspect_ratio.is_none() || s.aspect_ratio_is_mapped {
s.aspect_ratio = Some(iw / ih);
+ s.aspect_ratio_is_mapped = false;
}
let w_auto = matches!(s.width, crate::Dimension::Auto);
let h_auto = matches!(s.height, crate::Dimension::Auto);
@@ -4573,6 +4576,19 @@ fn build(
if _name.local.as_ref() == "svg" {
if let Some(ratio) = style.aspect_ratio.filter(|ratio| ratio.is_finite() && *ratio > 0.0)
{
+ // A percentage inline size inside an auto grid track is cyclic
+ // during intrinsic sizing: it behaves as auto for the contribution
+ // pass, then fills the final track. Taffy 0.12 keeps the intrinsic
+ // fallback width instead of revisiting that percentage. Express
+ // the final fill as grid self-stretch so the known content width
+ // reaches the replaced-item measure callback.
+ if matches!(style.width, crate::Dimension::Percent(_))
+ && matches!(style.height, crate::Dimension::Auto)
+ {
+ taffy_style.size.width = taffy::Dimension::auto();
+ taffy_style.min_size.width = taffy::Dimension::length(0.0);
+ taffy_style.justify_self = Some(taffy::AlignSelf::STRETCH);
+ }
// A viewBox supplies a ratio but no intrinsic dimensions. The
// 300px default inline size is CSS Images' default object size;
// the ratio supplies the corresponding block size. Definite CSS
diff --git a/crates/obscura-render/src/lib.rs b/crates/obscura-render/src/lib.rs
index 0cd3551..6f65620 100644
--- a/crates/obscura-render/src/lib.rs
+++ b/crates/obscura-render/src/lib.rs
@@ -212,6 +212,10 @@ pub struct LayoutStyle {
/// size when percentage dimensions are resolved through an auto-sized
/// wrapper (`img { width:100%; height:auto }`).
pub intrinsic_size: Option<(f32, f32)>,
+ /// The current ratio came from HTML width/height presentation hints
+ /// (`![]()
` or its selected ``), rather than authored
+ /// CSS. A decoded image's natural ratio replaces this provisional ratio.
+ pub aspect_ratio_is_mapped: bool,
pub margin: Edges,
/// Which margin sides are `auto` (top, right, bottom, left). `margin: 0
/// auto` / `margin-inline: auto` centering needs a real Auto margin, which
diff --git a/crates/obscura-render/src/style.rs b/crates/obscura-render/src/style.rs
index c6a35f1..e5ec6c9 100644
--- a/crates/obscura-render/src/style.rs
+++ b/crates/obscura-render/src/style.rs
@@ -468,7 +468,10 @@ fn apply_value(style: &mut LayoutStyle, name: &str, value: &str) {
style.max_height = dimension_value(value);
style.size_expressions[5] = deferred_length_expression(value);
}
- "aspect-ratio" => style.aspect_ratio = parse_aspect_ratio(value),
+ "aspect-ratio" => {
+ style.aspect_ratio = parse_aspect_ratio(value);
+ style.aspect_ratio_is_mapped = false;
+ }
"margin" => apply_margin_shorthand(style, value),
"margin-top" => set_margin_side(style, 0, value),
"margin-right" => set_margin_side(style, 1, value),
diff --git a/crates/obscura-render/tests/layout_test.rs b/crates/obscura-render/tests/layout_test.rs
index 0684323..ebeb1af 100644
--- a/crates/obscura-render/tests/layout_test.rs
+++ b/crates/obscura-render/tests/layout_test.rs
@@ -768,11 +768,11 @@ fn ratio_only_inline_svg_sizes_inside_an_auto_grid_row() {
let logo = rect("logo");
assert!((logo.width - 254.0).abs() < 0.01, "SVG width: {logo:?}");
assert!(
- (logo.height - 76.1875).abs() < 0.01,
- "viewBox ratio must transfer the final grid width: {logo:?}"
+ (logo.height - 76.1875).abs() < 0.25,
+ "viewBox ratio must transfer the final grid width before Obscura's device-pixel rounding: {logo:?}"
);
assert!(
- (cell.height - 108.1875).abs() < 0.01,
+ (cell.height - 108.1875).abs() < 0.25,
"SVG contribution plus block padding must size the auto row: {cell:?}"
);
}
@@ -1697,3 +1697,54 @@ fn selected_picture_source_dimensions_override_fallback_image_ratio() {
assert!((narrow_rect.height - 500.0).abs() < 0.01, "{narrow_rect:?}");
assert_eq!(narrow.styles[&image].aspect_ratio, Some(1.0));
}
+
+/// HTML width/height attributes are provisional presentational hints. Once
+/// the image is decoded, its natural dimensions replace that mapped ratio.
+#[test]
+fn decoded_image_ratio_replaces_mapped_html_ratio() {
+ let tree = parse_html(
+ r#"
+
+ 
+ "#,
+ );
+ let image = tree.get_element_by_id("image").unwrap();
+ let intrinsic = HashMap::from([(image, (800.0, 400.0))]);
+ let layout = layout_dom_with_images(&tree, (1000.0, 600.0), &intrinsic);
+ let rect = layout.rects[&image];
+
+ assert!((rect.width - 500.0).abs() < 0.01, "{rect:?}");
+ assert!((rect.height - 250.0).abs() < 0.01, "{rect:?}");
+ assert_eq!(layout.styles[&image].aspect_ratio, Some(2.0));
+}
+
+/// Unlike HTML presentation hints, an authored `aspect-ratio` declaration
+/// remains authoritative after the resource's natural dimensions are known.
+#[test]
+fn authored_aspect_ratio_wins_over_decoded_image_ratio() {
+ let tree = parse_html(
+ r#"
+
+
+ "#,
+ );
+ let image = tree.get_element_by_id("image").unwrap();
+ let intrinsic = HashMap::from([(image, (800.0, 400.0))]);
+ let layout = layout_dom_with_images(&tree, (1000.0, 600.0), &intrinsic);
+ let rect = layout.rects[&image];
+
+ assert!((rect.width - 500.0).abs() < 0.01, "{rect:?}");
+ assert!((rect.height - 125.0).abs() < 0.01, "{rect:?}");
+ assert_eq!(layout.styles[&image].aspect_ratio, Some(4.0));
+}