//! Regression test: a Hacker-News-shaped nested `` layout must come out //! right using only the general engine (UA defaults + real CSS cascade), with //! no per-site hardcoded selectors. This guards against reintroducing the //! site-specific hacks that used to live in obscura-render for this exact markup. use obscura_dom::tree_sink::parse_html; use obscura_render::{layout_dom, layout_dom_with_images}; use std::collections::HashMap; const HN_HTML: &str = r##"

Hacker News new | past

24.

Exapunks (2018)

"##; /// Top-left of the tightest laid-out element box whose text contains /// `needle`. Text geometry is no longer a per-word list: a pure-text /// container collapses to a single cosmic-text inline formatting context /// (see `inline`), and even in the word-split path the wrapping ``/`` /// are flattened into their block, so the smallest element rect enclosing the /// text is the meaningful, mode-independent anchor. Picking the smallest-area /// match skips the giant ancestor tables that also "contain" the text. fn find_by_text( tree: &obscura_dom::tree::DomTree, layout: &obscura_render::DomLayout, needle: &str, ) -> Option<(f32, f32)> { let mut best: Option<(f32, obscura_render::Rect)> = None; for (id, rect) in &layout.rects { if tree.text_content(*id).contains(needle) { let area = rect.width * rect.height; if best.as_ref().map(|(a, _)| area < *a).unwrap_or(true) { best = Some((area, *rect)); } } } best.map(|(_, r)| (r.x, r.y)) } #[test] fn hn_shaped_table_lays_out_without_site_hardcoding() { let tree = parse_html(HN_HTML); let layout = layout_dom(&tree, (1000.0, 1000.0)); // Every element got a rect; the tree isn't just being dropped. assert!(layout.rects.len() > 10, "expected many laid-out elements, got {}", layout.rects.len()); // "Hacker News" (a bold link in the top bar) sits above the first // headline row ("Exapunks (2018)"): normal top-to-bottom flow, not a // hardcoded absolute position. let (brand_x, brand_y) = find_by_text(&tree, &layout, "Hacker News").expect("brand text laid out"); let (_, headline_y) = find_by_text(&tree, &layout, "Exapunks (2018)").expect("headline text laid out"); assert!( headline_y > brand_y, "headline should be below the header bar: brand.y={} headline.y={}", brand_y, headline_y ); // Within the header row, "login" (right-aligned cell) sits to the right // of "Hacker News" (left cell) — plain flex/table layout, not a magic // per-class x-offset. let (login_x, _) = find_by_text(&tree, &layout, "login").expect("login text laid out"); assert!( login_x > brand_x, "login cell should be right of the brand: brand.x={} login.x={}", brand_x, login_x ); } #[test] fn table_width_uses_local_space_and_keeps_width_hints_shrinkable() { let tree = parse_html( r#"

alpha beta gamma delta epsilon zeta eta theta iota kappa lambda mu

fixed overflow

"#, ); let layout = layout_dom(&tree, (400.0, 1000.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let local = rect("local-table"); let local_cell = rect("local-cell"); assert!((local.width - 300.0).abs() < 0.01, "local table: {local:?}"); assert!( local.height >= 39.0 && (local_cell.width - 300.0).abs() < 0.01, "wrappable content must use the 300px local containing block: table={local:?} cell={local_cell:?}" ); for id in ["outer", "outer-cell", "inner", "inner-cell"] { let box_rect = rect(id); assert!( (box_rect.width - 300.0).abs() < 0.01 && box_rect.height >= 39.0, "nested table sizing must settle outer-first for {id}: {box_rect:?}" ); } let overflow = rect("overflow"); assert!( (overflow.width - 500.0).abs() < 0.01, "a definite table width may overflow its local CB and viewport: {overflow:?}" ); let preferred = rect("preferred"); let wide = rect("preferred-wide"); let narrow = rect("preferred-narrow"); assert!((preferred.width - 200.0).abs() < 0.01, "preferred table: {preferred:?}"); assert!( wide.width > 160.0 && wide.width < 175.0 && narrow.width > 25.0 && narrow.width < 40.0 && (wide.width + narrow.width - 200.0).abs() < 0.01, "cell width hints are preferred contributions, not minimums: wide={wide:?} narrow={narrow:?}" ); } #[test] fn table_rowspans_are_clipped_to_the_originating_row_group() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (400.0, 1000.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; for (table_id, span_id, next_id) in [ ("zero", "zero-span", "zero-next"), ("oversized", "oversized-span", "oversized-next"), ] { let table = rect(table_id); let spanning = rect(span_id); let next_group = rect(next_id); assert!( (spanning.height - 40.0).abs() < 0.01, "{span_id} must stop at the tbody boundary: {spanning:?}" ); assert!( (next_group.x - table.x).abs() < 0.01, "{next_id} must restart at column zero in its row group: table={table:?} cell={next_group:?}" ); } } #[test] fn relative_units_resolve_against_viewport_and_font_size() { // 50vw of a 1000px viewport = 500px; 10em at the default 16px = 160px. // Both were previously mis-resolved (vw kept as raw px, em hardcoded to 16 // regardless of context), so this guards the deferred-resolution pass. let html = r##"

"##; let tree = parse_html(html); let layout = layout_dom(&tree, (1000.0, 800.0)); let hit = layout.rects.values().any(|r| (r.width - 500.0).abs() < 1.0 && (r.height - 160.0).abs() < 1.0); assert!(hit, "expected a 500x160 box from 50vw/10em, rects: {:?}", layout.rects.values().map(|r| (r.width, r.height)).collect::>()); } #[test] fn dynamic_viewport_units_use_the_live_viewport() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (1000.0, 800.0)); assert!( layout .rects .values() .any(|rect| (rect.width - 250.0).abs() < 0.01 && (rect.height - 120.0).abs() < 0.01), "dvw/dvh should resolve against the capture viewport" ); } #[test] fn fixed_inset_box_uses_viewport_not_document_height() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (900.0, 1000.0)); for id in ["overlay", "surface"] { let rect = layout.rects[&tree.get_element_by_id(id).unwrap()]; assert!( (rect.width - 900.0).abs() < 0.01 && (rect.height - 1000.0).abs() < 0.01, "{id} should fill the viewport rather than the 5000px document: {rect:?}" ); } } #[test] fn percentage_padding_top_reserves_aspect_ratio_box() { // The responsive aspect-ratio trick: an empty box with padding-top:56.25% // inside a 1000px-wide block reserves a 16:9 area (~562px tall), the room a // `position:absolute; inset:0` media child fills. Percentage padding // resolves against the containing block WIDTH on every side, so the box // gains real height instead of collapsing to zero. let html = r##"

"##; let tree = parse_html(html); let layout = layout_dom(&tree, (1200.0, 800.0)); let hit = layout .rects .values() .any(|r| (r.width - 1000.0).abs() < 1.0 && (r.height - 562.5).abs() < 2.0); assert!( hit, "expected a ~1000x562 aspect-ratio box from padding-top:56.25%, rects: {:?}", layout.rects.values().map(|r| (r.width, r.height)).collect::>() ); } #[test] fn percentage_padding_uses_final_flex_containing_block_width() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (1000.0, 1000.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let first = rect("first"); let first_sizer = rect("first-sizer"); let second = rect("second"); let second_sizer = rect("second-sizer"); assert!((first.width - 500.0).abs() < 0.01, "first flex item: {first:?}"); assert!( (first_sizer.height - 275.0).abs() < 0.01, "55% padding must use the final 500px containing block: {first_sizer:?}" ); assert!((second.width - 450.0).abs() < 0.01, "second flex item: {second:?}"); assert!( (second_sizer.height - 480.15).abs() < 0.51, "106.7% padding must use the final 450px containing block: {second_sizer:?}" ); for (id, expected) in [("first-sizer", 275.0), ("second-sizer", 480.15)] { let node = tree.get_element_by_id(id).unwrap(); assert!( (layout.styles[&node].padding.top - expected).abs() < 0.05, "paint/content consumers must see final used padding for {id}: {:?}", layout.styles[&node].padding ); } } #[test] fn mixed_percentage_padding_shorthand_preserves_fixed_sides_and_content_origin() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (1000.0, 1000.0)); let mixed_id = tree.get_element_by_id("mixed").unwrap(); let mixed = layout.rects[&mixed_id]; let ink = layout.rects[&tree.get_element_by_id("ink").unwrap()]; let padding = layout.styles[&mixed_id].padding; assert!((mixed.width - 500.0).abs() < 0.01, "border-box width: {mixed:?}"); assert!((mixed.height - 85.0).abs() < 0.01, "mixed padding height: {mixed:?}"); assert!( (padding.top - 50.0).abs() < 0.01 && (padding.right - 20.0).abs() < 0.01 && (padding.bottom - 25.0).abs() < 0.01 && (padding.left - 7.0).abs() < 0.01, "resolved mixed shorthand: {padding:?}" ); assert!( (ink.x - mixed.x - 7.0).abs() < 0.01 && (ink.y - mixed.y - 50.0).abs() < 0.01, "content origin must use the resolved padding: mixed={mixed:?} ink={ink:?}" ); } #[test] fn positioned_pseudo_percentage_padding_uses_final_host_width() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (1000.0, 1000.0)); let host = tree.get_element_by_id("host").unwrap(); let pseudo = layout.styles[&host].before_pseudo.as_ref().unwrap(); assert!( (pseudo.padding.top - 40.0).abs() < 0.01 && (pseudo.padding.right - 20.0).abs() < 0.01 && (pseudo.padding.bottom - 40.0).abs() < 0.01 && (pseudo.padding.left - 20.0).abs() < 0.01, "positioned pseudo padding must use its final containing block: {:?}", pseudo.padding ); } #[test] fn inset_absolute_uses_nearest_positioned_ancestor() { let html = r##"

This sentence has plenty of words to wrap across several lines

"##; let tree = parse_html(html); let layout = layout_dom(&tree, (1000.0, 1000.0)); // Tightest element enclosing the text: the 100px div itself. let mut div_rect: Option = None; for (id, rect) in &layout.rects { if tree.text_content(*id).contains("several lines") { if div_rect.as_ref().map(|d| rect.width * rect.height < d.width * d.height).unwrap_or(true) { div_rect = Some(*rect); } } } let div_rect = div_rect.expect("text container laid out"); assert!(div_rect.width <= 101.0, "container should hold its 100px width, got {}", div_rect.width); assert!( div_rect.height > 60.0, "text should wrap onto several lines in a 100px-wide box (tall container), got height {}", div_rect.height ); } #[test] fn negative_flex_margin_overlays_at_container_start() { let html = r##"

"##; let tree = parse_html(html); let layout = layout_dom(&tree, (900.0, 1000.0)); let document = layout.rects[&tree.get_element_by_id("document").unwrap()]; let main = layout.rects[&tree.get_element_by_id("main").unwrap()]; let body = layout.rects[&tree.get_element_by_id("body").unwrap()]; let sidebar = layout.rects[&tree.get_element_by_id("sidebar").unwrap()]; assert!((document.x - 0.0).abs() < 0.01, "document: {document:?}"); assert!((main.x - 0.0).abs() < 0.01, "main: {main:?}"); assert!((body.x - 225.0).abs() < 0.01, "body: {body:?}"); assert!((sidebar.x - 0.0).abs() < 0.01, "sidebar: {sidebar:?}"); } #[test] fn auto_height_column_flex_counts_negative_main_axis_margins_once() { let html = r##"

"##; let tree = parse_html(html); let layout = layout_dom(&tree, (900.0, 1200.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let column = rect("column"); let first = rect("first"); let second = rect("second"); let third = rect("third"); assert!( (column.height - 871.0).abs() < 0.01, "100 + (100 - 15) + (666 + 20) must size the auto-height column: {column:?}" ); assert!((first.y - column.y).abs() < 0.01, "first: {first:?}"); assert!( (second.y - (first.y + first.height - 15.0)).abs() < 0.01, "negative margin must overlap the preceding item: first={first:?} second={second:?}" ); assert!( (third.y - (second.y + second.height + 20.0)).abs() < 0.01, "the following item must retain normal sequential placement: second={second:?} third={third:?}" ); assert!( rect("contained").height.abs() < 0.01, "size containment must keep its intentional zero intrinsic block size" ); } #[test] fn percentage_flex_overlay_uses_auto_width_parent_content_box() { let html = r##"

"#, ); let layout = layout_dom(&tree, (600.0, 300.0)); let band = layout.rects[&tree.get_element_by_id("band").unwrap()]; let float = layout.rects[&tree.get_element_by_id("float").unwrap()]; let clear = layout.rects[&tree.get_element_by_id("clear").unwrap()]; assert!( (band.width - 300.0).abs() < 0.01 && (band.height - 80.0).abs() < 0.01, "band: {band:?}" ); assert!( (float.x - 20.0).abs() < 0.01 && (float.y - 20.0).abs() < 0.01 && (float.width - 130.0).abs() < 0.01 && (float.height - 40.0).abs() < 0.01, "float: {float:?}" ); assert!( (clear.x - 20.0).abs() < 0.01 && (clear.y - 60.0).abs() < 0.01, "clear: {clear:?}" ); } #[test] fn native_float_clearance_is_side_sensitive() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 700.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let host = rect("host"); let float = rect("float"); assert!( (host.x - 0.0).abs() < 0.01 && (host.y - 0.0).abs() < 0.01 && (host.width - 800.0).abs() < 0.01 && (host.height - 600.0).abs() < 0.01, "host: {host:?}" ); assert!( (float.x - 0.0).abs() < 0.01 && (float.y - 0.0).abs() < 0.01 && (float.width - 800.0).abs() < 0.01 && (float.height - 600.0).abs() < 0.01, "float: {float:?}" ); } #[test] fn auto_width_clearfix_keeps_a_content_sized_percentage_float_at_block_start() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 700.0)); let host = layout.rects[&tree.get_element_by_id("host").unwrap()]; let float = layout.rects[&tree.get_element_by_id("float").unwrap()]; assert!( (host.width - 800.0).abs() < 0.01 && (host.height - 600.0).abs() < 0.01, "host: {host:?}" ); assert!( (float.x - 0.0).abs() < 0.01 && (float.y - 0.0).abs() < 0.01 && (float.width - 800.0).abs() < 0.01 && float.height.abs() < 0.01, "an indefinite percentage height must behave as auto: {float:?}" ); } #[test] fn min_height_floor_keeps_a_full_width_float_at_block_start() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 700.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let host = rect("host"); let float = rect("float"); let following = rect("following"); assert!( (host.width - 800.0).abs() < 0.01 && (host.height - 600.0).abs() < 0.01, "host: {host:?}" ); assert!( (float.x - 0.0).abs() < 0.01 && (float.y - 0.0).abs() < 0.01 && (float.width - 800.0).abs() < 0.01 && (float.height - 600.0).abs() < 0.01, "float: {float:?}" ); assert!((following.y - 600.0).abs() < 0.01, "following: {following:?}"); } #[test] fn percentage_float_and_inline_sibling_share_definite_height_band() { let tree = parse_html( r#"

Why Vue

"#, ); let layout = layout_dom(&tree, (900.0, 1000.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let row = rect("row"); let items = [rect("one"), rect("two"), rect("three"), rect("four")]; assert!( (row.width - 900.0).abs() < 0.01, "text-align must not shrink-wrap an auto-width block child: {row:?}" ); assert!( items.windows(2).all(|pair| (pair[0].y - pair[1].y).abs() < 0.01), "inline-block items should share one line when the block has room: {items:?}" ); assert!( items[0].height <= 40.01, "auto-width inline-block text should use one max-content line: {:?}", items[0] ); } #[test] fn non_replaced_inline_ignores_used_width_height_and_min_max_sizes() { let tree = parse_html( r#"

A token after

"#, ); let laid = layout_dom(&tree, (400.0, 200.0)); let token_id = tree.get_element_by_id("token").unwrap(); let after_id = tree.get_element_by_id("after").unwrap(); let token = laid.rects[&token_id]; let after = laid.rects[&after_id]; assert_eq!( laid.styles[&token_id].width, obscura_render::Dimension::Percent(1.0), "computed style must retain the authored percentage" ); assert!( token.width > 20.0 && token.width < 100.0, "a non-replaced inline's used width must hug its text and padding: {token:?}" ); assert!( token.height < 40.0, "height/min-height/max-height do not apply to a non-replaced inline: {token:?}" ); assert!( after.x >= token.x + token.width - 0.01 && (after.y - token.y).abs() < 0.01, "the following inline must remain on the same line: {token:?} {after:?}" ); } #[test] fn inline_svg_derives_auto_height_from_view_box() { let tree = parse_html( r#" "#, ); let layout = layout_dom(&tree, (900.0, 1000.0)); let logo = layout.rects[&tree.get_element_by_id("logo").unwrap()]; assert!((logo.width - 112.0).abs() < 0.01, "svg width: {logo:?}"); assert!( (logo.height - 101.0).abs() < 0.01, "viewBox should supply the intrinsic auto-height (device-pixel rounded): {logo:?}" ); } /// Chromium 150 resolves a ratio-only inline SVG as an atomic replaced item /// during both intrinsic grid track sizing and the final percentage-width /// pass. The 270px track leaves 254px after the grid item's inline padding; /// the 320:96 viewBox then contributes 76.1875px of height. #[test] fn ratio_only_inline_svg_sizes_inside_an_auto_grid_row() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 600.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let cell = rect("cell"); let logo = rect("logo"); assert!((logo.width - 254.0).abs() < 0.01, "SVG width: {logo:?}"); assert!( (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.25, "SVG contribution plus block padding must size the auto row: {cell:?}" ); } /// Chromium 150 includes collapsed descendant margins in a grid item's /// intrinsic block-size. The nested 64px margin reaches through `section`, /// making the first item 200px tall; the second row therefore begins after /// that item and the 20px row gap, rather than overlapping the descendant. #[test] fn grid_item_intrinsic_height_includes_collapsed_descendant_margins() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 600.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let outer = rect("outer"); let item = rect("item"); let deep = rect("deep"); let after = rect("after"); assert!( (item.height - 112.0).abs() < 0.01 && (deep.y - 12.0).abs() < 0.01 && (deep.height - 100.0).abs() < 0.01, "negative collapsed margin geometry must survive measurement: item={item:?} deep={deep:?}" ); assert!( (after.y - 132.0).abs() < 0.01 && (outer.height - 142.0).abs() < 0.01, "the following grid row must use the shortened contribution: outer={outer:?} after={after:?}" ); } #[test] fn inline_block_flex_items_keep_block_inner_flow() { let tree = parse_html(include_str!("../../../render-repros/inline-block-flex-items.html")); let layout = layout_dom(&tree, (900.0, 1000.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let brand = rect("brand"); let title = rect("title"); let links = rect("links"); let one = rect("one"); let two = rect("two"); let three = rect("three"); let chips = rect("chips"); let alpha = rect("alpha"); let beta = rect("beta"); let gamma = rect("gamma"); assert!( (brand.x - 0.0).abs() < 0.01 && (brand.width - 382.0).abs() < 0.01 && (title.x - 32.0).abs() < 0.01 && (title.width - 350.0).abs() < 0.01, "brand: {brand:?}, title: {title:?}" ); assert!( (links.x - 525.0).abs() < 0.01 && (links.width - 90.0).abs() < 0.01 && (one.y - 0.0).abs() < 0.01 && (two.y - 20.0).abs() < 0.01 && (three.y - 40.0).abs() < 0.01, "links: {links:?}, items: {one:?} {two:?} {three:?}" ); assert!( (chips.x - 0.0).abs() < 0.01 && (chips.y - 140.0).abs() < 0.01 && (chips.width - 90.0).abs() < 0.01 && (chips.height - 20.0).abs() < 0.01 && (alpha.x - 0.0).abs() < 0.01 && (beta.x - 30.0).abs() < 0.01 && (gamma.x - 60.0).abs() < 0.01, "chips: {chips:?}, items: {alpha:?} {beta:?} {gamma:?}" ); } #[test] fn percentage_height_under_indefinite_parent_uses_content_height() { let tree = parse_html(include_str!( "../../../render-repros/percentage-height-indefinite-parent.html" )); let layout = layout_dom(&tree, (900.0, 1000.0)); for id in ["wrapper", "stack", "editor", "pre", "code"] { let rect = layout.rects[&tree.get_element_by_id(id).unwrap()]; assert!( rect.height >= 24.0, "{id} collapsed despite its indefinite percentage height: {rect:?}" ); } } #[test] fn item_self_alignment_places_flex_and_grid_items() { let tree = parse_html(include_str!("../../../render-repros/item-self-alignment.html")); let layout = layout_dom(&tree, (900.0, 1000.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let flex_center = rect("flex-center"); let flex_end = rect("flex-end"); let grid_end = rect("grid-end"); let grid_center = rect("grid-center"); let grid_place = rect("grid-place"); let parent_one = rect("parent-one"); let parent_two = rect("parent-two"); let line_one = rect("line-one"); let line_two = rect("line-two"); let track_one = rect("track-one"); let track_two = rect("track-two"); assert!( (flex_center.x - 0.0).abs() < 0.01 && (flex_center.y - 40.0).abs() < 0.01 && (flex_end.x - 40.0).abs() < 0.01 && (flex_end.y - 70.0).abs() < 0.01, "flex items: {flex_center:?} {flex_end:?}" ); assert!( (grid_end.x - 110.0).abs() < 0.01 && (grid_end.y - 165.0).abs() < 0.01 && (grid_center.x - 200.0).abs() < 0.01 && (grid_center.y - 220.0).abs() < 0.01 && (grid_place.x - 420.0).abs() < 0.01 && (grid_place.y - 160.0).abs() < 0.01, "grid items: {grid_end:?} {grid_center:?} {grid_place:?}" ); assert!( (parent_one.x - 55.0).abs() < 0.01 && (parent_one.y - 340.0).abs() < 0.01 && (parent_two.x - 195.0).abs() < 0.01 && (parent_two.y - 330.0).abs() < 0.01, "parent-aligned grid items: {parent_one:?} {parent_two:?}" ); assert!( (line_one.x - 0.0).abs() < 0.01 && (line_one.y - 380.0).abs() < 0.01 && (line_two.x - 0.0).abs() < 0.01 && (line_two.y - 480.0).abs() < 0.01, "aligned flex lines: {line_one:?} {line_two:?}" ); assert!( (track_one.x - 100.0).abs() < 0.01 && (track_one.y - 570.0).abs() < 0.01 && (track_two.x - 100.0).abs() < 0.01 && (track_two.y - 620.0).abs() < 0.01, "aligned grid tracks: {track_one:?} {track_two:?}" ); } #[test] fn stretched_inline_size_container_has_zero_intrinsic_grid_contribution() { // Chromium 140: size containment affects intrinsic track sizing, but not // the item's later stretch alignment. In the first case the grid therefore // shrink-wraps to zero. In the definite-width control the contained item // contributes zero, then stretches to the 50px left after the fixed track. // Its 240px child remains visible overflow in both cases. let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 600.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let shrink_grid = rect("shrink-grid"); let shrink_item = rect("shrink-item"); let shrink_child = rect("shrink-child"); let fixed_grid = rect("fixed-grid"); let fixed_item = rect("fixed-item"); let fixed_child = rect("fixed-child"); let fixed = rect("fixed"); assert!( shrink_grid.width.abs() < 0.01 && shrink_item.width.abs() < 0.01 && (shrink_child.width - 240.0).abs() < 0.01 && (fixed_grid.width - 150.0).abs() < 0.01 && (fixed_item.width - 50.0).abs() < 0.01 && (fixed_child.width - 240.0).abs() < 0.01 && (fixed.x - 50.0).abs() < 0.01 && (fixed.width - 100.0).abs() < 0.01, "contained intrinsic contribution leaked into the grid track: \ shrink=({shrink_grid:?}, {shrink_item:?}, {shrink_child:?}) \ fixed=({fixed_grid:?}, {fixed_item:?}, {fixed_child:?}, {fixed:?})" ); } #[test] fn stretched_size_container_has_zero_intrinsic_grid_row_contribution() { // Chromium 140: block-axis size containment removes the tall child's // intrinsic row contribution, but leaves the grid item's auto height // available for final stretch alignment. Padding and border remain inside // the fixed row's stretched 100px border box. let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 600.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let shrink_grid = rect("shrink-grid"); let shrink_item = rect("shrink-item"); let shrink_child = rect("shrink-child"); let fixed_grid = rect("fixed-grid"); let fixed_item = rect("fixed-item"); let fixed_child = rect("fixed-child"); assert!( shrink_grid.height.abs() < 0.01 && shrink_item.height.abs() < 0.01 && (shrink_child.height - 240.0).abs() < 0.01 && (fixed_grid.height - 100.0).abs() < 0.01 && (fixed_item.height - 100.0).abs() < 0.01 && (fixed_child.y - fixed_item.y - 15.0).abs() < 0.01 && (fixed_child.height - 240.0).abs() < 0.01, "contained intrinsic contribution leaked into the grid row: \ shrink=({shrink_grid:?}, {shrink_item:?}, {shrink_child:?}) \ fixed=({fixed_grid:?}, {fixed_item:?}, {fixed_child:?})" ); } #[test] fn non_stretched_auto_grid_item_shrink_wraps_inside_grid_area() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (1280.0, 1000.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let wide_panel = rect("wide-panel"); let wide_wrapper = rect("wide-wrapper"); let wide_inner = rect("wide-inner"); let narrow_wrapper = rect("narrow-wrapper"); assert!( (wide_wrapper.x - 160.0).abs() < 0.01 && (wide_wrapper.width - 1072.0).abs() < 0.01 && (wide_inner.x - 160.0).abs() < 0.01 && (wide_inner.width - 1072.0).abs() < 0.01, "wide shrink-wrapped item should be clamped to the grid area: \ panel={wide_panel:?} wrapper={wide_wrapper:?} inner={wide_inner:?}" ); assert!( (narrow_wrapper.x - 100.0).abs() < 0.01 && (narrow_wrapper.width - 200.0).abs() < 0.01, "a narrower item should keep its intrinsic width and remain centered: {narrow_wrapper:?}" ); } #[test] fn percentage_max_width_clamps_grid_item_intrinsic_size() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (1280.0, 200.0)); let grid = layout.rects[&tree.get_element_by_id("grid").unwrap()]; let item = layout.rects[&tree.get_element_by_id("item").unwrap()]; let gallery = layout.rects[&tree.get_element_by_id("gallery").unwrap()]; assert!( (grid.width - 1200.0).abs() < 0.01 && (item.width - 1200.0).abs() < 0.01 && (gallery.width - 1200.0).abs() < 0.01, "max-width:100% must clamp the grid item while its flex contents overflow: \ grid={grid:?} item={item:?} gallery={gallery:?}" ); } #[test] fn named_area_shorthand_survives_end_longhand_override() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (1280.0, 200.0)); let hero = layout.rects[&tree.get_element_by_id("hero").unwrap()]; assert!( (hero.x - 216.0).abs() < 0.01 && (hero.width - 984.0).abs() < 0.01, "the end longhand must retain the shorthand's named content start: {hero:?}" ); } #[test] fn auto_width_flex_button_keeps_native_intrinsic_sizing() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 200.0)); let button = layout.rects[&tree.get_element_by_id("search").unwrap()]; assert!( button.width > 120.0 && button.width < 220.0 && (button.x - (600.0 - button.width) / 2.0).abs() < 0.01, "the auto-width flex button should shrink-wrap and center: {button:?}" ); } #[test] fn flex_auto_margin_absorbs_space_before_justify_content() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (1280.0, 200.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let crumb = rect("crumb"); let theme = rect("theme"); let language = rect("language"); assert!( (crumb.x - 0.0).abs() < 0.01 && (theme.x - 1042.0).abs() < 0.01 && (language.x - 1149.0).abs() < 0.01, "main-axis auto margin must consume free space before justify-content: \ crumb={crumb:?} theme={theme:?} language={language:?}" ); } #[test] fn nested_is_descendant_utility_blockifies_matching_lines() { let tree = parse_html( r#"

onetwo

"#, ); let layout = layout_dom(&tree, (500.0, 200.0)); let one = tree.get_element_by_id("one").unwrap(); let two = tree.get_element_by_id("two").unwrap(); assert_eq!(layout.styles[&one].display, obscura_render::Display::Block); assert_eq!(layout.styles[&two].display, obscura_render::Display::Block); assert!(layout.rects[&two].y > layout.rects[&one].y); assert_eq!(layout.rects[&one].width, layout.rects[&two].width); } #[test] fn opposing_floats_share_header_band_through_inline_wrapper() { let tree = parse_html(include_str!("../../../render-repros/opposing-header-floats.html")); let layout = layout_dom(&tree, (900.0, 1000.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let logo = rect("logo"); let tagline = rect("tagline"); let menu = rect("menu"); assert!( (logo.x - 0.0).abs() < 0.01 && (logo.y - 0.0).abs() < 0.01 && (logo.width - 200.0).abs() < 0.01 && (logo.height - 100.0).abs() < 0.01, "logo: {logo:?}" ); assert!( (tagline.x - 600.0).abs() < 0.01 && (tagline.y - 60.0).abs() < 0.01 && (tagline.width - 300.0).abs() < 0.01 && (tagline.height - 40.0).abs() < 0.01, "tagline: {tagline:?}" ); assert!( (menu.x - 0.0).abs() < 0.01 && (menu.y - 100.0).abs() < 0.01 && (menu.width - 900.0).abs() < 0.01, "menu: {menu:?}" ); } #[test] fn mixed_float_run_shares_one_band() { let tree = parse_html(include_str!("../../../render-repros/mixed-float-run.html")); let layout = layout_dom(&tree, (900.0, 1000.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let left_one = rect("left-one"); let left_two = rect("left-two"); let right_one = rect("right-one"); assert!( (left_one.x - 0.0).abs() < 0.01 && (left_one.y - 0.0).abs() < 0.01 && (left_one.width - 80.0).abs() < 0.01 && (left_one.height - 30.0).abs() < 0.01, "first left float: {left_one:?}" ); assert!( (left_two.x - 80.0).abs() < 0.01 && (left_two.y - 0.0).abs() < 0.01 && (left_two.width - 80.0).abs() < 0.01 && (left_two.height - 30.0).abs() < 0.01, "second left float: {left_two:?}" ); assert!( (right_one.x - 340.0).abs() < 0.01 && (right_one.y - 0.0).abs() < 0.01 && (right_one.width - 60.0).abs() < 0.01 && (right_one.height - 30.0).abs() < 0.01, "right float: {right_one:?}" ); } #[test] fn right_float_navigation_shares_inline_band() { let tree = parse_html(include_str!( "../../../render-repros/right-float-navigation.html" )); let layout = layout_dom(&tree, (900.0, 1000.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let left_one = rect("left-one"); let left_two = rect("left-two"); let right_one = rect("right-one"); let right_two = rect("right-two"); let right_three = rect("right-three"); assert!( (left_one.x - 0.0).abs() < 0.01 && (left_one.y - 0.0).abs() < 0.01 && (left_two.x - 64.0).abs() < 0.01 && (left_two.y - 0.0).abs() < 0.01, "inline flow: {left_one:?} {left_two:?}" ); assert!( (right_three.x - 280.0).abs() < 0.01 && (right_three.y - 0.0).abs() < 0.01 && (right_two.x - 310.0).abs() < 0.01 && (right_two.y - 0.0).abs() < 0.01 && (right_one.x - 360.0).abs() < 0.01 && (right_one.y - 0.0).abs() < 0.01, "right float order: {right_three:?} {right_two:?} {right_one:?}" ); } #[test] fn functional_font_sizes_resolve_against_live_viewport() { let tree = parse_html( r#"

Features

Subtitle

"#, ); let wide = layout_dom(&tree, (900.0, 1000.0)); let feature = tree.get_element_by_id("feature").unwrap(); let subtitle = tree.get_element_by_id("subtitle").unwrap(); assert!( (wide.styles[&feature].font_size.unwrap() - 50.654).abs() < 0.05, "wide feature font: {:?}", wide.styles[&feature].font_size ); assert_eq!(wide.styles[&subtitle].font_size, Some(16.0)); let narrow = layout_dom(&tree, (320.0, 640.0)); assert!( (narrow.styles[&feature].font_size.unwrap() - 28.8).abs() < 0.05, "narrow feature font: {:?}", narrow.styles[&feature].font_size ); assert!( (narrow.styles[&subtitle].font_size.unwrap() - 12.8).abs() < 0.05, "narrow subtitle font: {:?}", narrow.styles[&subtitle].font_size ); } #[test] fn responsive_grid_child_spans_all_tracks_via_end_longhand() { let tree = parse_html( r#"

Full-width content

"#, ); let layout = layout_dom(&tree, (900.0, 1000.0)); let hero = layout.rects[&tree.get_element_by_id("hero").unwrap()]; assert!( (hero.width - 800.0).abs() < 0.01, "span-4 child should fill all four tracks: {hero:?}" ); } #[test] fn grid_column_auto_span_shorthand_places_six_cards_in_two_rows() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (1440.0, 900.0)); let cards: Vec<_> = (1..=6) .map(|index| { let id = tree .get_element_by_id(&format!("card-{index}")) .expect("card exists"); layout.rects[&id] }) .collect(); for card in &cards { assert!( (card.width - 448.0).abs() < 0.01, "four of twelve tracks plus internal gaps should be 448px: {card:?}" ); } assert_eq!(cards[0].y, cards[1].y); assert_eq!(cards[1].y, cards[2].y); assert_eq!(cards[3].y, cards[4].y); assert_eq!(cards[4].y, cards[5].y); assert!( (cards[3].y - cards[0].y - 164.0).abs() < 0.01, "fourth card should start a second row after the 64px row gap: {:?}", cards ); assert!( (cards[1].x - cards[0].x - 464.0).abs() < 0.01 && (cards[2].x - cards[1].x - 464.0).abs() < 0.01, "cards should advance by four tracks plus the outer column gap: {:?}", cards ); } #[test] fn length_line_height_computes_before_inheritance() { let tree = parse_html( r#"

Inherited length

Unitless ratio

"#, ); let layout = layout_dom(&tree, (900.0, 1000.0)); let parent = tree.get_element_by_id("parent").unwrap(); let child = tree.get_element_by_id("child").unwrap(); let ratio = tree.get_element_by_id("ratio").unwrap(); assert_eq!( layout.styles[&parent].line_height, Some(obscura_render::LineHeight::Px(80.0)) ); assert_eq!( layout.styles[&child].line_height, Some(obscura_render::LineHeight::Px(80.0)) ); assert_eq!( layout.styles[&ratio].line_height, Some(obscura_render::LineHeight::Ratio(2.0)) ); } #[test] fn font_weight_computes_numerically_through_inheritance() { let tree = parse_html( r#"

medium normal bolder lighter

UA bold

Inherited medium

Unset medium

Initial normal

"#, ); let layout = layout_dom(&tree, (900.0, 1000.0)); let weight = |id| { layout.styles[&tree.get_element_by_id(id).unwrap()] .font_weight .as_deref() }; assert_eq!(weight("ua"), Some("700")); assert_eq!(weight("inherited"), Some("500")); assert_eq!(weight("unset"), Some("500")); assert_eq!(weight("initial"), Some("400")); } #[test] fn contextual_right_inset_uses_root_font_tokens() { let tree = parse_html( r#" "#, ); let layout = layout_dom(&tree, (900.0, 1000.0)); let search = tree.get_element_by_id("search").unwrap(); assert_eq!( layout.styles[&search].inset[1], Some(obscura_render::Dimension::Px(56.0)) ); let rect = layout.rects[&search]; assert!( (rect.x - 744.0).abs() < 0.01, "right inset should place 100px box at 900 - 56 - 100: {rect:?}" ); } #[test] fn false_legacy_supports_probe_does_not_override_modern_line_height() { // Tailwind v4 uses this old-browser probe around a leading-variable reset. // Chromium rejects the condition. Flattening every @supports body made // the reset win, invalidated the var(), and inflated three 96px lines from // 288px to an inherited 432px. let tree = parse_html( r#"

one
two
three

"#, ); let layout = layout_dom(&tree, (1280.0, 720.0)); let hero = layout.rects[&tree.get_element_by_id("hero").unwrap()]; assert!( (hero.height - 288.0).abs() < 0.01, "three 96px modern lines should be 288px tall: {hero:?}" ); } #[test] fn custom_property_css_wide_keywords_preserve_var_fallback_semantics() { let tree = parse_html( r#"

fallback

inherit

nested fallback

"#, ); let layout = layout_dom(&tree, (800.0, 600.0)); let invalid = tree.get_element_by_id("invalid").unwrap(); let inherited = tree.get_element_by_id("inherited").unwrap(); let nested = tree.get_element_by_id("nested").unwrap(); assert_eq!( layout.styles[&invalid].color, Some([0x44, 0x55, 0x66, 0xff]), "`initial` is guaranteed-invalid and var() must use its fallback" ); assert_eq!( layout.styles[&inherited].color, Some([0x11, 0x22, 0x33, 0xff]), "`unset` inherits a custom property's parent value" ); assert_eq!( layout.styles[&nested].background_color, Some([0xff, 0xff, 0xff, 0xff]), "an invalid nested custom property must activate the outer fallback" ); } #[test] fn stable_root_scrollbar_gutter_reduces_the_initial_containing_block() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (900.0, 600.0)); let fill = layout.rects[&tree.get_element_by_id("fill").unwrap()]; let center = layout.rects[&tree.get_element_by_id("center").unwrap()]; assert!( (fill.width - 885.0).abs() < 0.01, "stable classic gutter should reserve 15px: {fill:?}" ); assert!( (center.x - 242.0).abs() < 0.01, "401px box should center in the 885px ICB: {center:?}" ); } #[test] fn auto_grid_track_freezes_at_growth_limit_during_distribution() { // The first auto track reaches its max-content growth limit before the // second. The remaining free space belongs only to the second track. // Giving the frozen track that remainder again makes the grid overflow // even though the two automatic minimums fit the definite container. let tree = parse_html( r#"

Resources for Developers,
by Developers

"#, ); let layout = layout_dom(&tree, (1280.0, 720.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let grid = rect("grid"); let copy = rect("copy"); let art = rect("art"); assert!( ((copy.x + copy.width + 16.0) - art.x).abs() < 0.01, "the authored column gap must separate the final tracks: {copy:?} {art:?}" ); assert!( ((art.x + art.width) - (grid.x + grid.width)).abs() < 0.01, "free-space redistribution must not grow a track after it freezes: {grid:?} {copy:?} {art:?}" ); } #[test] fn grid_area_line_shorthand_overlays_children_in_the_same_cell() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (640.0, 480.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let grid = rect("grid"); for id in ["left", "right", "slider"] { let child = rect(id); assert!( (child.x - grid.x).abs() < 0.01 && (child.y - grid.y).abs() < 0.01, "{id} should overlay the first grid cell instead of auto-placing: \ grid={grid:?} child={child:?}" ); } assert!( (grid.height - 180.0).abs() < 0.01, "overlaid children must not create implicit rows: {grid:?}" ); } /// Chromium 150 oracle for the full-span nested column-subgrid pattern used by /// Mozilla's springboard/data rows. The 20px child gap is centered on the /// ancestor's zero-width grid lines, so descendant contributions inflate the /// ancestor tracks by [10, 20, 10]. The remaining 240px then stretches the /// three auto tracks equally: 130px, 180px, 190px. #[test] fn nested_full_span_column_subgrid_shares_ancestor_tracks() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 600.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let parent = rect("parent"); let row = rect("row-one"); let inner = rect("inner-one"); let a = rect("a"); let b = rect("b"); let c = rect("c"); assert!( (parent.width - 500.0).abs() < 0.01 && (parent.height - 40.0).abs() < 0.01 && (row.width - 500.0).abs() < 0.01 && (row.height - 20.0).abs() < 0.01 && (inner.width - 500.0).abs() < 0.01 && (inner.height - 20.0).abs() < 0.01, "nested subgrids must share one row of ancestor tracks: \ parent={parent:?} row={row:?} inner={inner:?}" ); assert!( (a.x - 0.0).abs() < 0.01 && (a.width - 40.0).abs() < 0.01 && (b.x - 140.0).abs() < 0.01 && (b.width - 80.0).abs() < 0.01 && (c.x - 320.0).abs() < 0.01 && (c.width - 100.0).abs() < 0.01, "Chrome column positions: a={a:?} b={b:?} c={c:?}" ); let repeated = layout_dom(&tree, (800.0, 600.0)); for id in ["parent", "row-one", "inner-one", "a", "b", "c"] { let node = tree.get_element_by_id(id).unwrap(); assert_eq!( layout.rects[&node], repeated.rects[&node], "the two-pass reduction must be stable across repeated layouts: {id}" ); } } /// Cases outside the bounded reduction must retain the existing fallback, /// rather than freezing an invented set of ancestor tracks. The narrow parent /// cannot fit every max-content growth limit, and the second row only spans a /// subset of its parent columns. #[test] fn unsafe_column_subgrid_cases_decline_the_fast_path() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 600.0)); let rect = |id| layout.rects[&tree.get_element_by_id(id).unwrap()]; let narrow = rect("narrow"); let narrow_b = rect("narrow-b"); let partial = rect("partial"); let partial_b = rect("partial-b"); let placed = rect("placed"); let placed_b = rect("placed-b"); let named = rect("named"); let named_b = rect("named-b"); assert!( (narrow.height - 60.0).abs() < 0.01 && (narrow_b.x - narrow.x).abs() < 0.01, "max-content overflow must retain the stacked fallback: {narrow:?} {narrow_b:?}" ); assert!( (partial.height - 60.0).abs() < 0.01 && (partial_b.x - partial.x).abs() < 0.01, "partial-span subgrid must retain the stacked fallback: {partial:?} {partial_b:?}" ); assert!( (placed.height - 40.0).abs() < 0.01 && placed_b.x > placed.x, "an explicitly placed leaf must retain the existing placement fallback: \ {placed:?} {placed_b:?}" ); assert!( (named.height - 60.0).abs() < 0.01 && (named_b.x - named.x).abs() < 0.01, "an unresolved named placement must not enter the numeric subgrid reduction: \ {named:?} {named_b:?}" ); } #[test] fn empty_block_before_participates_in_normal_flow_geometry() { let tree = parse_html( r#"

TEXT

"#, ); let layout = layout_dom(&tree, (800.0, 600.0)); let host = layout.rects[&tree.get_element_by_id("host").unwrap()]; let next = layout.rects[&tree.get_element_by_id("next").unwrap()]; assert!( (host.height - 70.0).abs() < 0.01, "40px generated block + 10px margin + 20px line must size host: {host:?}" ); assert!( (next.y - 70.0).abs() < 0.01, "following flow content must start after generated geometry: {next:?}" ); } #[test] fn empty_inline_block_pseudo_is_an_atomic_flex_item() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 600.0)); let label = layout.rects[&tree.get_element_by_id("label").unwrap()]; assert!( (label.x - 17.0).abs() < 0.01, "8px pseudo content width + 2px borders + 5px margin must precede label: {label:?}" ); } #[test] fn light_dark_uses_the_final_inherited_color_scheme_across_the_cascade() { let tree = parse_html( r#"

"#, ); let layout = layout_dom(&tree, (800.0, 600.0)); let dark = tree.get_element_by_id("dark").unwrap(); let child = tree.get_element_by_id("child").unwrap(); let mixed = tree.get_element_by_id("mixed").unwrap(); let rect = tree.query_selector("#icon rect").unwrap().unwrap(); let dark_style = &layout.styles[&dark]; assert!(dark_style.color_scheme_dark); assert_eq!(dark_style.background_color, Some([0x18, 0x19, 0x1b, 0xff])); assert_eq!(dark_style.color, Some([0xee, 0xee, 0xee, 0xff])); assert_eq!(dark_style.border_color, Some([0x33, 0x33, 0x33, 0xff])); assert_eq!( dark_style .before_pseudo .as_deref() .and_then(|pseudo| pseudo.background_color), Some([0x00, 0x00, 0xff, 0xff]), "pseudo must use its host's inherited dark scheme" ); let child_style = &layout.styles[&child]; assert!(child_style.color_scheme_dark); let (_, stops) = child_style .background_gradient .as_ref() .expect("dark gradient"); assert_eq!(stops[0].0, [0x10, 0x10, 0x10, 0xff]); assert_eq!(stops[1].0, [0x20, 0x20, 0x20, 0xff]); let rect_style = &layout.styles[&rect]; assert!(rect_style.color_scheme_dark); assert_eq!(rect_style.svg_fill.as_deref(), Some("#51565dff")); assert_eq!(rect_style.svg_stroke.as_deref(), Some("#000000ff")); let mixed_style = &layout.styles[&mixed]; assert!( !mixed_style.color_scheme_dark, "a scheme list admitting light uses the current light preference" ); assert_eq!(mixed_style.background_color, Some([0xab, 0xcd, 0xef, 0xff])); } /// Chromium 150 maps width/height from the selected