//! 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 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 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 inset_absolute_uses_nearest_positioned_ancestor() { let html = r##"

"##; let tree = parse_html(html); let layout = layout_dom(&tree, (900.0, 700.0)); let cb = layout.rects[&tree.get_element_by_id("cb").expect("containing block")]; let abs = layout.rects[&tree.get_element_by_id("abs").expect("absolute child")]; let abs_end = layout.rects[&tree.get_element_by_id("abs-end").expect("end-inset child")]; let abs_percent = layout.rects[&tree.get_element_by_id("abs-percent").expect("percent-inset child")]; let fixed = layout.rects[&tree.get_element_by_id("fixed").expect("fixed child")]; // Absolute insets are measured from the positioned ancestor's padding // edge, not from the intervening static wrapper. assert!((abs.x - cb.x - 25.0).abs() < 1.0, "wrong absolute x: cb={cb:?} abs={abs:?}"); assert!((abs.y - cb.y - 35.0).abs() < 1.0, "wrong absolute y: cb={cb:?} abs={abs:?}"); assert_eq!( layout.styles[&tree.get_element_by_id("abs").unwrap()].display, obscura_render::Display::Block, "positioned inline should be blockified" ); assert!((abs_end.x - 350.0).abs() < 1.0, "wrong right-inset x: {abs_end:?}"); assert!((abs_end.y - 200.0).abs() < 1.0, "wrong bottom-inset y: {abs_end:?}"); assert!((abs_percent.x - 260.0).abs() < 1.0, "wrong percent-inset x: {abs_percent:?}"); assert!((abs_percent.y - 160.0).abs() < 1.0, "wrong percent-inset y: {abs_percent:?}"); assert!((fixed.x - 520.0).abs() < 1.0, "fixed box did not use viewport x: {fixed:?}"); assert!((fixed.y - 40.0).abs() < 1.0, "fixed box did not use viewport y: {fixed:?}"); } #[test] fn transforms_establish_absolute_and_fixed_containing_blocks() { 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 percentage_flex_overlay_uses_auto_width_parent_content_box() { let html = r##"