Content
"#);
@@ -2500,6 +2692,7 @@ mod tests {
/// Issue #468: window.scrollTo/scrollBy/scroll were no-op stubs, so the
/// dominant infinite-scroll idiom never advanced the page offset.
+ #[cfg(not(feature = "render"))]
#[test]
fn window_scroll_methods_move_the_page_offset() {
let mut rt = setup_runtime(r#""#);
@@ -2528,6 +2721,7 @@ mod tests {
/// Issue #468: the page offset is one value, readable and writable through
/// either `window.scrollY` or `document.scrollingElement.scrollTop`.
+ #[cfg(not(feature = "render"))]
#[test]
fn window_scroll_offset_is_shared_with_the_scrolling_element() {
let mut rt = setup_runtime(r#""#);
@@ -2549,6 +2743,7 @@ mod tests {
/// Issue #468: a scroll event must reach listeners on both the window and
/// the document — that is the signal lazy loaders wait for.
+ #[cfg(not(feature = "render"))]
#[tokio::test(flavor = "current_thread")]
async fn window_scroll_fires_a_scroll_event() {
let mut rt = setup_runtime(r#""#);
@@ -2571,6 +2766,587 @@ mod tests {
assert_eq!(result.value.unwrap(), serde_json::json!([1, 1, 400]));
}
+ #[cfg(feature = "render")]
+ #[test]
+ fn rendered_window_scroll_clamps_and_geometry_is_viewport_relative() {
+ let dom = parse_html(
+ r#"
+
+
+
+ fixed
+
+ "#,
+ );
+ let mut rt = ObscuraJsRuntime::new();
+ rt.set_dom(dom);
+ rt.set_viewport(320.0, 200.0);
+ rt.run_page_init();
+
+ let result = rt
+ .evaluate(
+ r#"
+ const target = document.getElementById("target");
+ const fixed = document.getElementById("fixed");
+ const fixedChild = document.getElementById("fixed-child");
+ const before = {
+ target: target.getBoundingClientRect(),
+ fixed: fixed.getBoundingClientRect(),
+ fixedChild: fixedChild.getBoundingClientRect(),
+ };
+ window.scrollTo(99999, 99999);
+ const maxX = document.documentElement.scrollWidth - innerWidth;
+ const maxY = document.documentElement.scrollHeight - innerHeight;
+ const after = {
+ target: target.getBoundingClientRect(),
+ fixed: fixed.getBoundingClientRect(),
+ fixedChild: fixedChild.getBoundingClientRect(),
+ };
+ return [
+ innerWidth, innerHeight,
+ document.documentElement.clientWidth,
+ document.documentElement.clientHeight,
+ document.documentElement.scrollWidth,
+ document.documentElement.scrollHeight,
+ window.scrollX, window.scrollY,
+ document.scrollingElement.scrollLeft,
+ document.scrollingElement.scrollTop,
+ maxX, maxY,
+ Math.abs(after.target.left - (before.target.left - maxX)) < 0.01,
+ Math.abs(after.target.top - (before.target.top - maxY)) < 0.01,
+ Math.abs(after.fixed.left - before.fixed.left) < 0.01,
+ Math.abs(after.fixed.top - before.fixed.top) < 0.01,
+ Math.abs(after.fixedChild.left - before.fixedChild.left) < 0.01,
+ Math.abs(after.fixedChild.top - before.fixedChild.top) < 0.01,
+ ];
+ "#,
+ )
+ .unwrap();
+ let values = result.as_array().expect("array");
+ assert_eq!(&values[0..4], &serde_json::json!([320, 200, 320, 200]).as_array().unwrap()[..]);
+ let scroll_width = values[4].as_f64().expect("scrollWidth");
+ let scroll_height = values[5].as_f64().expect("scrollHeight");
+ assert!(scroll_width >= 600.0, "scrollWidth was {scroll_width}");
+ assert!(scroll_height >= 1000.0, "scrollHeight was {scroll_height}");
+ assert_eq!(values[6], values[10]);
+ assert_eq!(values[7], values[11]);
+ assert_eq!(values[8], values[10]);
+ assert_eq!(values[9], values[11]);
+ assert!(values[12..].iter().all(|value| value == &serde_json::json!(true)));
+ }
+
+ /// Chromium 150 reference (800x513 CSS-pixel viewport):
+ /// top=[60,20,20,-267], bottom=[448,448,231,31,-496] at the sampled
+ /// root scroll offsets. This keeps sticky distinct from fixed positioning,
+ /// verifies subtree movement, bottom-only sticking, and the containing
+ /// block's lower boundary without depending on a live site.
+ #[cfg(feature = "render")]
+ #[test]
+ fn root_scroll_sticky_geometry_matches_chromium_constraints() {
+ let dom = parse_html(
+ r#"
+
+
+
+
+
+ "#,
+ );
+ let mut rt = ObscuraJsRuntime::new();
+ rt.set_dom(dom);
+ rt.set_viewport(800.0, 513.0);
+ rt.run_page_init();
+
+ let result = rt
+ .evaluate(
+ r#"
+ const top = document.getElementById("top");
+ const child = document.getElementById("top-child");
+ const bottom = document.getElementById("bottom");
+ const fixed = document.getElementById("fixed");
+ const sample = y => {
+ window.scrollTo(0, y);
+ return [
+ window.scrollY,
+ top.getBoundingClientRect().top,
+ child.getBoundingClientRect().top,
+ bottom.getBoundingClientRect().top,
+ fixed.getBoundingClientRect().top,
+ ];
+ };
+ return [sample(0), sample(100), sample(400), sample(600), sample(9999)];
+ "#,
+ )
+ .unwrap();
+ let rows = result.as_array().expect("rows");
+ let number = |row: usize, column: usize| {
+ rows[row].as_array().unwrap()[column].as_f64().unwrap()
+ };
+ let close = |actual: f64, expected: f64| {
+ assert!(
+ (actual - expected).abs() < 0.05,
+ "expected {expected}, got {actual}"
+ );
+ };
+
+ close(number(0, 1), 60.0);
+ close(number(0, 3), 448.0);
+ close(number(1, 1), 20.0);
+ close(number(1, 2), 20.0);
+ close(number(1, 3), 448.0);
+ close(number(2, 1), 20.0);
+ close(number(2, 3), 231.0);
+ close(number(3, 1), 20.0);
+ close(number(3, 3), 31.0);
+ close(number(4, 0), 1127.0);
+ close(number(4, 1), -267.0);
+ close(number(4, 2), -267.0);
+ close(number(4, 3), -496.0);
+ for row in 0..rows.len() {
+ close(number(row, 4), 20.0);
+ }
+ }
+
+ /// Chromium 150 horizontal reference for the same constraint algorithm:
+ /// the sticky subtree pins at x=20, remains distinct from fixed, then
+ /// leaves with its 500px containing block at the right boundary.
+ #[cfg(feature = "render")]
+ #[test]
+ fn root_scroll_sticky_supports_the_inline_axis() {
+ let dom = parse_html(
+ r#"
+
+
+
+
+
+
+
+
+
+ "#,
+ );
+ let mut rt = ObscuraJsRuntime::new();
+ rt.set_dom(dom);
+ rt.set_viewport(800.0, 513.0);
+ rt.run_page_init();
+
+ let result = rt
+ .evaluate(
+ r#"
+ const sticky = document.getElementById("sticky");
+ const child = document.getElementById("child");
+ const fixed = document.getElementById("fixed");
+ const sample = x => {
+ window.scrollTo(x, 0);
+ return [
+ window.scrollX,
+ sticky.getBoundingClientRect().left,
+ child.getBoundingClientRect().left,
+ fixed.getBoundingClientRect().left,
+ ];
+ };
+ return [sample(0), sample(100), sample(400), sample(800)];
+ "#,
+ )
+ .unwrap();
+ let rows = result.as_array().unwrap();
+ let expected = [
+ [0.0, 60.0, 60.0, 20.0],
+ [100.0, 20.0, 20.0, 20.0],
+ [400.0, 20.0, 20.0, 20.0],
+ [800.0, -340.0, -340.0, 20.0],
+ ];
+ for (row, expected) in rows.iter().zip(expected) {
+ for (actual, expected) in row.as_array().unwrap().iter().zip(expected) {
+ let actual = actual.as_f64().unwrap();
+ assert!(
+ (actual - expected).abs() < 0.05,
+ "expected {expected}, got {actual}"
+ );
+ }
+ }
+ }
+
+ #[cfg(feature = "render")]
+ #[test]
+ fn rendered_layout_cache_is_invalidated_by_style_mutations() {
+ let dom = parse_html(
+ r#"
+
+ "#,
+ );
+ let mut rt = ObscuraJsRuntime::new();
+ rt.set_dom(dom);
+ rt.set_viewport(200.0, 100.0);
+ rt.run_page_init();
+
+ let result = rt
+ .evaluate(
+ r#"
+ const box = document.getElementById("box");
+ const before = [
+ document.documentElement.scrollHeight,
+ box.getBoundingClientRect().height,
+ ];
+ box.setAttribute("style", "height:900px;width:80px");
+ const after = [
+ document.documentElement.scrollHeight,
+ box.getBoundingClientRect().height,
+ box.getBoundingClientRect().width,
+ ];
+ return [before, after];
+ "#,
+ )
+ .unwrap();
+ let values = result.as_array().expect("result");
+ let before = values[0].as_array().expect("before");
+ let after = values[1].as_array().expect("after");
+ assert!(after[0].as_f64().unwrap() > before[0].as_f64().unwrap());
+ assert_eq!(before[1].as_f64(), Some(300.0));
+ assert_eq!(after[1].as_f64(), Some(900.0));
+ assert_eq!(after[2].as_f64(), Some(80.0));
+ }
+
+ #[cfg(feature = "render")]
+ #[tokio::test(flavor = "current_thread")]
+ async fn rendered_window_scroll_events_require_actual_movement() {
+ let dom = parse_html(
+ r#"
+
+ "#,
+ );
+ let mut rt = ObscuraJsRuntime::new();
+ rt.set_dom(dom);
+ rt.set_viewport(320.0, 200.0);
+ rt.run_page_init();
+
+ let moved = rt
+ .evaluate_for_cdp(
+ r#"
+ new Promise(resolve => {
+ let win = 0, doc = 0;
+ window.addEventListener("scroll", () => win++);
+ document.addEventListener("scroll", () => doc++);
+ window.scrollTo(0, 100);
+ setTimeout(() => resolve([win, doc, window.scrollY]), 5);
+ })
+ "#,
+ true,
+ true,
+ )
+ .await
+ .unwrap();
+ assert_eq!(moved.value.unwrap(), serde_json::json!([1, 1, 100]));
+
+ rt.evaluate("window.scrollTo(0, 99999)").unwrap();
+ rt.run_event_loop_bounded(20).await.unwrap();
+ let no_op = rt
+ .evaluate_for_cdp(
+ r#"
+ new Promise(resolve => {
+ let win = 0, doc = 0;
+ window.addEventListener("scroll", () => win++);
+ document.addEventListener("scroll", () => doc++);
+ const before = window.scrollY;
+ window.scrollTo(0, 99999);
+ setTimeout(() => resolve([win, doc, before, window.scrollY]), 5);
+ })
+ "#,
+ true,
+ true,
+ )
+ .await
+ .unwrap();
+ let values = no_op.value.unwrap();
+ let values = values.as_array().expect("array");
+ assert_eq!(&values[0..2], &serde_json::json!([0, 0]).as_array().unwrap()[..]);
+ assert_eq!(values[2], values[3]);
+ }
+
+ #[cfg(feature = "render")]
+ #[tokio::test(flavor = "current_thread")]
+ async fn intersection_observer_tracks_viewport_threshold_crossings() {
+ let dom = parse_html(
+ r#"
+
+
+
+ "#,
+ );
+ let mut rt = ObscuraJsRuntime::new();
+ rt.set_dom(dom);
+ rt.set_viewport(200.0, 100.0);
+ rt.run_page_init();
+
+ let result = rt
+ .evaluate_for_cdp(
+ r#"
+ new Promise(resolve => {
+ const records = [];
+ const target = document.getElementById("target");
+ const observer = new IntersectionObserver(entries => {
+ for (const entry of entries) {
+ records.push([
+ entry.isIntersecting,
+ Math.round(entry.intersectionRatio * 100) / 100,
+ Math.round(entry.boundingClientRect.top),
+ Math.round(entry.intersectionRect.height),
+ ]);
+ }
+ }, { threshold: [0, 0.5, 1] });
+ observer.observe(target);
+ setTimeout(() => window.scrollTo(0, 100), 5);
+ setTimeout(() => window.scrollTo(0, 260), 15);
+ setTimeout(() => resolve(records), 30);
+ })
+ "#,
+ true,
+ true,
+ )
+ .await
+ .unwrap();
+ assert_eq!(
+ result.value.unwrap(),
+ serde_json::json!([
+ [false, 0, 150, 0],
+ [true, 0.5, 50, 50],
+ [false, 0, -110, 0],
+ ])
+ );
+ }
+
+ #[cfg(feature = "render")]
+ #[tokio::test(flavor = "current_thread")]
+ async fn intersection_observer_honors_root_margin_zero_area_and_no_fake_refires() {
+ let dom = parse_html(
+ r#"
+
+
+
+
+
+ "#,
+ );
+ let mut rt = ObscuraJsRuntime::new();
+ rt.set_dom(dom);
+ rt.set_viewport(200.0, 100.0);
+ rt.run_page_init();
+
+ let result = rt
+ .evaluate_for_cdp(
+ r#"
+ new Promise(resolve => {
+ const marginRecords = [], zeroRecords = [];
+ const marginObserver = new IntersectionObserver(
+ entries => marginRecords.push(...entries.map(entry => [
+ entry.isIntersecting,
+ entry.intersectionRatio,
+ entry.rootBounds.bottom,
+ ])),
+ { rootMargin: "0px 0px 20px", threshold: [0, 1] }
+ );
+ const zeroObserver = new IntersectionObserver(
+ entries => zeroRecords.push(...entries.map(entry => [
+ entry.isIntersecting,
+ entry.intersectionRatio,
+ ]))
+ );
+ marginObserver.observe(document.getElementById("margin-target"));
+ zeroObserver.observe(document.getElementById("zero"));
+ let unsupported = "";
+ try {
+ new IntersectionObserver(() => {}, {
+ root: document.getElementById("root")
+ });
+ } catch (error) {
+ unsupported = error.name;
+ }
+ setTimeout(() => resolve([
+ marginRecords, zeroRecords, unsupported,
+ marginObserver.rootMargin, marginObserver.thresholds,
+ ]), 200);
+ })
+ "#,
+ true,
+ true,
+ )
+ .await
+ .unwrap();
+ assert_eq!(
+ result.value.unwrap(),
+ serde_json::json!([
+ [[true, 1, 120]],
+ [[true, 1]],
+ "NotSupportedError",
+ "0px 0px 20px 0px",
+ [0, 1],
+ ])
+ );
+ }
+
+ #[cfg(feature = "render")]
+ #[tokio::test(flavor = "current_thread")]
+ async fn intersection_observer_recomputes_after_style_mutation_and_resize() {
+ let dom = parse_html(
+ r#"
+
+
+
+ "#,
+ );
+ let mut rt = ObscuraJsRuntime::new();
+ rt.set_dom(dom);
+ rt.set_viewport(200.0, 100.0);
+ rt.run_page_init();
+ rt.execute_script(
+ "intersection-mutation",
+ r#"
+ globalThis.__ioRecords = [];
+ globalThis.__io = new IntersectionObserver(entries => {
+ __ioRecords.push(...entries.map(entry => [
+ entry.isIntersecting,
+ Math.round(entry.boundingClientRect.top),
+ ]));
+ });
+ __io.observe(document.getElementById("target"));
+ "#,
+ )
+ .unwrap();
+ rt.run_event_loop_bounded(10).await.unwrap();
+
+ rt.evaluate(
+ r#"document.getElementById("spacer").setAttribute("style", "height:120px")"#,
+ )
+ .unwrap();
+ rt.run_event_loop_bounded(10).await.unwrap();
+ assert_eq!(
+ rt.evaluate("__ioRecords").unwrap(),
+ serde_json::json!([[false, 150]])
+ );
+
+ rt.set_viewport(200.0, 160.0);
+ rt.run_event_loop_bounded(20).await.unwrap();
+ assert_eq!(
+ rt.evaluate("__ioRecords").unwrap(),
+ serde_json::json!([[false, 150], [true, 120]])
+ );
+ }
+
+ #[cfg(feature = "render")]
+ #[test]
+ fn scroll_into_view_aligns_the_root_viewport_and_clamps() {
+ let dom = parse_html(
+ r#"
+
+
+
+
+
+ "#,
+ );
+ let mut rt = ObscuraJsRuntime::new();
+ rt.set_dom(dom);
+ rt.set_viewport(200.0, 100.0);
+ rt.run_page_init();
+
+ let result = rt
+ .evaluate(
+ r#"
+ const target = document.getElementById("target");
+ const bottom = document.getElementById("bottom");
+ const fixed = document.getElementById("fixed");
+ target.scrollIntoView();
+ const start = scrollY;
+ scrollTo(0, 0);
+ target.scrollIntoView({ block: "center" });
+ const center = scrollY;
+ scrollTo(0, 0);
+ target.scrollIntoView({ block: "end" });
+ const end = scrollY;
+ scrollTo(0, 0);
+ target.scrollIntoView({ block: "nearest" });
+ const nearestOutside = scrollY;
+ scrollTo(0, 250);
+ target.scrollIntoView({ block: "nearest" });
+ const nearestVisible = scrollY;
+ fixed.scrollIntoView();
+ const afterFixed = scrollY;
+ bottom.scrollIntoView({ block: "start" });
+ const clamped = scrollY;
+ const max = document.documentElement.scrollHeight - innerHeight;
+ return [
+ start, center, end, nearestOutside, nearestVisible,
+ afterFixed, clamped, max,
+ ];
+ "#,
+ )
+ .unwrap();
+ assert_eq!(
+ result,
+ serde_json::json!([300, 270, 240, 240, 250, 250, 600, 600])
+ );
+ }
+
+ #[cfg(feature = "render")]
+ #[tokio::test(flavor = "current_thread")]
+ async fn scroll_into_view_emits_events_only_when_the_root_moves() {
+ let dom = parse_html(
+ r#"
+
+
+
+ "#,
+ );
+ let mut rt = ObscuraJsRuntime::new();
+ rt.set_dom(dom);
+ rt.set_viewport(200.0, 100.0);
+ rt.run_page_init();
+
+ rt.evaluate("window.scrollTo(0, 250)").unwrap();
+ rt.run_event_loop_bounded(20).await.unwrap();
+ let no_op = rt
+ .evaluate_for_cdp(
+ r#"
+ new Promise(resolve => {
+ let win = 0, doc = 0;
+ window.addEventListener("scroll", () => win++);
+ document.addEventListener("scroll", () => doc++);
+ document.getElementById("target").scrollIntoView({ block: "nearest" });
+ setTimeout(() => resolve([win, doc, scrollY]), 5);
+ })
+ "#,
+ true,
+ true,
+ )
+ .await
+ .unwrap();
+ assert_eq!(no_op.value.unwrap(), serde_json::json!([0, 0, 250]));
+
+ rt.evaluate("window.scrollTo(0, 0)").unwrap();
+ rt.run_event_loop_bounded(20).await.unwrap();
+ let moved = rt
+ .evaluate_for_cdp(
+ r#"
+ new Promise(resolve => {
+ let win = 0, doc = 0;
+ window.addEventListener("scroll", () => win++);
+ document.addEventListener("scroll", () => doc++);
+ document.getElementById("target").scrollIntoView({ block: "center" });
+ setTimeout(() => resolve([win, doc, scrollY]), 5);
+ })
+ "#,
+ true,
+ true,
+ )
+ .await
+ .unwrap();
+ assert_eq!(moved.value.unwrap(), serde_json::json!([1, 1, 270]));
+ }
+
/// Issue #469: FILTER_SKIP leaves a skipped node's children eligible, so
/// firstChild()/lastChild() must descend into them. FILTER_REJECT must not.
#[test]
diff --git a/crates/obscura-render/Cargo.toml b/crates/obscura-render/Cargo.toml
index 2e063ae..557060e 100644
--- a/crates/obscura-render/Cargo.toml
+++ b/crates/obscura-render/Cargo.toml
@@ -11,7 +11,7 @@ default = []
# Rasterize the laid-out tree to a pixmap (tiny-skia) with text (cosmic-text
# shaping + line breaking, ab_glyph fallback) and images.
# Off by default; the layout core (getBoundingClientRect etc.) works without it.
-paint = ["dep:tiny-skia", "dep:ab_glyph", "dep:cosmic-text", "dep:image", "dep:ureq", "dep:base64", "dep:resvg", "dep:usvg", "dep:url", "dep:wuff"]
+paint = ["dep:tiny-skia", "dep:ab_glyph", "dep:cosmic-text", "dep:swash", "dep:image", "dep:ureq", "dep:base64", "dep:resvg", "dep:usvg", "dep:url", "dep:wuff"]
[dependencies]
taffy = { workspace = true }
@@ -22,6 +22,10 @@ ab_glyph = { workspace = true, optional = true }
# breaking, the same algorithms browsers use. Built with only our embedded
# fonts (no system-font scan) so layout stays deterministic across hosts.
cosmic-text = { version = "=0.12.1", default-features = false, features = ["std", "swash"], optional = true }
+# Keep this exactly aligned with cosmic-text 0.12's raster backend. Cosmic
+# does not expose variation coordinates, so variable font instances are
+# rasterized through Swash directly while Cosmic remains the shaper.
+swash = { version = "=0.1.19", optional = true }
image = { version = "0.25", default-features = false, features = ["jpeg", "png", "webp"], optional = true }
ureq = { version = "2.9", default-features = false, features = ["tls"], optional = true }
base64 = { workspace = true, optional = true }
diff --git a/crates/obscura-render/src/css.rs b/crates/obscura-render/src/css.rs
index 662617f..9b92d46 100644
--- a/crates/obscura-render/src/css.rs
+++ b/crates/obscura-render/src/css.rs
@@ -129,6 +129,7 @@ impl Stylesheet {
matcher: &mut Matcher,
nid: NodeId,
props: &HashMap
+
+
+ …` looks like one inline child
+ // during classification, is promoted to a flex row, and only then exposes
+ // the block spans—too late, so every line lands side by side. Real engines
+ // split the inline around those blocks and make the blocks siblings in the
+ // containing block formatting context.
+ if style.display == crate::Display::Block || style.internal_flex_container {
+ let mut flattened = Vec::new();
+ flatten_boxless_inline_children(tree, &dom_children, styles, &mut flattened);
+ dom_children = flattened;
+ }
let internal_mixed_block_flow = style.internal_flex_container
&& dom_children.iter().any(|cid| {
styles.get(cid).map_or(false, |child| {
@@ -3755,6 +4502,31 @@ fn build(
}
}
}
+ // Main-axis auto margins absorb positive free space before
+ // `justify-content` is applied. Taffy 0.12 currently applies both: it
+ // end-justifies the items and then adds the auto-margin space again,
+ // placing later controls far outside the container (MDN's theme/language
+ // controls landed beyond x=2100). Neutralize justify-content whenever an
+ // in-flow flex item owns a main-axis auto margin; taffy then performs the
+ // auto-margin distribution correctly.
+ if style.display == crate::Display::Flex {
+ let column = matches!(
+ style.flex_direction,
+ Some(taffy::FlexDirection::Column | taffy::FlexDirection::ColumnReverse)
+ );
+ let has_main_auto_margin = dom_children.iter().any(|cid| {
+ styles.get(cid).map_or(false, |child| {
+ if column {
+ child.margin_auto[0] || child.margin_auto[2]
+ } else {
+ child.margin_auto[1] || child.margin_auto[3]
+ }
+ })
+ });
+ if has_main_auto_margin {
+ taffy_style.justify_content = Some(taffy::JustifyContent::FLEX_START);
+ }
+ }
// `float` has no effect on a flex or grid item. Legacy stylesheets often
// leave floats on children after a newer rule turns their parent into a
// flex container; routing those children through the block float-zone
@@ -3834,13 +4606,26 @@ fn build(
} else {
dom_children.into_iter().flat_map(|cid| build_any(tree, cid, taffy_tree, id_map, words, engine, ifc_items, styles)).collect()
};
- if let Some(content) = &style.before_content {
- let mut leaves = build_pseudo_content(id, content, style, taffy_tree, words);
- leaves.append(&mut child_ids);
- child_ids = leaves;
+ if let Some((mut before, _)) = build_in_flow_pseudo(
+ id,
+ GeneratedBoxKind::Before,
+ style.before_pseudo.as_deref(),
+ taffy_tree,
+ words,
+ ifc_items,
+ ) {
+ before.append(&mut child_ids);
+ child_ids = before;
}
- if let Some(content) = &style.after_content {
- child_ids.append(&mut build_pseudo_content(id, content, style, taffy_tree, words));
+ if let Some((mut after, _)) = build_in_flow_pseudo(
+ id,
+ GeneratedBoxKind::After,
+ style.after_pseudo.as_deref(),
+ taffy_tree,
+ words,
+ ifc_items,
+ ) {
+ child_ids.append(&mut after);
}
if style.internal_flex_container
@@ -3896,8 +4681,8 @@ fn inline_wrapper_float(
|| wrapper_style.margin != crate::Edges::default()
|| wrapper_style.padding != crate::Edges::default()
|| wrapper_style.border != crate::Edges::default()
- || wrapper_style.before_content.is_some()
- || wrapper_style.after_content.is_some()
+ || wrapper_style.before_pseudo.is_some()
+ || wrapper_style.after_pseudo.is_some()
{
return None;
}
@@ -4005,16 +4790,35 @@ fn build_mixed_block(
}
}
- // ::before joins the first inline run and ::after the last (a list
- // marker must share its item text's lines); when the adjacent segment
- // is a block, the pseudo content gets its own anonymous run instead.
- let before_leaves = style.before_content.as_ref().map(|c| build_pseudo_content(id, c, style, taffy_tree, words)).unwrap_or_default();
- let after_leaves = style.after_content.as_ref().map(|c| build_pseudo_content(id, c, style, taffy_tree, words)).unwrap_or_default();
- let mut before_pending = !before_leaves.is_empty();
- let mut after_pending = !after_leaves.is_empty();
+ // Inline pseudos join the first/last inline run. A block-level pseudo is
+ // a real direct child of this block and therefore sits outside the
+ // anonymous run wrappers, exactly like an authored block child.
+ let before = build_in_flow_pseudo(
+ id,
+ GeneratedBoxKind::Before,
+ style.before_pseudo.as_deref(),
+ taffy_tree,
+ words,
+ ifc_items,
+ );
+ let after = build_in_flow_pseudo(
+ id,
+ GeneratedBoxKind::After,
+ style.after_pseudo.as_deref(),
+ taffy_tree,
+ words,
+ ifc_items,
+ );
+ let (before_leaves, before_block) = before.unwrap_or_else(|| (Vec::new(), false));
+ let (after_leaves, after_block) = after.unwrap_or_else(|| (Vec::new(), false));
+ let mut before_pending = !before_block && !before_leaves.is_empty();
+ let mut after_pending = !after_block && !after_leaves.is_empty();
let n_segs = segs.len();
let mut child_ids: Vec = Vec::new();
+ if before_block {
+ child_ids.extend(before_leaves.iter().copied());
+ }
for (i, seg) in segs.into_iter().enumerate() {
match seg {
Seg::Block(cid) => {
@@ -4119,6 +4923,9 @@ fn build_mixed_block(
.ok()?;
child_ids.push(wrapper);
}
+ if after_block {
+ child_ids.extend(after_leaves.iter().copied());
+ }
for cid in out_of_flow {
child_ids.extend(build_any(tree, cid, taffy_tree, id_map, words, engine, ifc_items, styles));
}
@@ -4151,6 +4958,102 @@ fn flatten_contents_children(
}
}
+/// Does an inline contribute only in-flow block children?
+///
+/// Such an inline has empty before/after inline fragments once CSS performs
+/// the block-in-inline split, so its block children can participate directly
+/// in the containing block's segment construction. This is deliberately
+/// narrower than a complete ib-split: mixed inline/block children still need
+/// fragment boxes to preserve decorations. A relative inline with no offsets
+/// is safe here provided it does not establish the containing block for an
+/// absolutely positioned descendant.
+fn inline_wraps_only_in_flow_blocks(
+ tree: &DomTree,
+ id: NodeId,
+ styles: &HashMap,
+) -> bool {
+ let Some(style) = styles.get(&id) else {
+ return false;
+ };
+ if style.display != crate::Display::Inline
+ || style.is_inline_block
+ || style.before_pseudo.is_some()
+ || style.after_pseudo.is_some()
+ || style.float.is_some()
+ || matches!(style.position, Some(taffy::Position::Absolute))
+ || (style.position.is_some()
+ && (style.inset.iter().any(Option::is_some)
+ || style.inset_expressions.iter().any(Option::is_some)))
+ {
+ return false;
+ }
+
+ let mut saw_block = false;
+ for cid in tree.children(id) {
+ let Some(node) = tree.get_node(cid) else {
+ continue;
+ };
+ if let obscura_dom::tree::NodeData::Text { contents } = &node.data {
+ if !contents.trim().is_empty() {
+ return false;
+ }
+ continue;
+ }
+ if !node.is_element() {
+ continue;
+ }
+ let Some(child) = styles.get(&cid) else {
+ return false;
+ };
+ if child.display == crate::Display::None {
+ continue;
+ }
+ if matches!(child.position, Some(taffy::Position::Absolute)) || child.float.is_some() {
+ return false;
+ }
+ if child.display_contents {
+ if !inline_wraps_only_in_flow_blocks(tree, cid, styles) {
+ return false;
+ }
+ saw_block = true;
+ } else if child.display == crate::Display::Block {
+ saw_block = true;
+ } else {
+ return false;
+ }
+ }
+ saw_block
+}
+
+/// Recursively splice `display:contents`, decoration-free inline wrappers, and
+/// inline wrappers whose only generated flow content is block-level into a
+/// block container's effective child list. Descendants already carry inherited
+/// computed text styles, so removing these wrappers preserves shaping while
+/// exposing block-in-inline descendants early enough for anonymous block
+/// construction.
+fn flatten_boxless_inline_children(
+ tree: &DomTree,
+ children: &[NodeId],
+ styles: &HashMap,
+ out: &mut Vec,
+) {
+ for &cid in children {
+ let display_contents = styles
+ .get(&cid)
+ .map(|style| style.display_contents && style.display != crate::Display::None)
+ .unwrap_or(false);
+ if display_contents
+ || is_flattenable_inline(tree, cid, styles)
+ || inline_wraps_only_in_flow_blocks(tree, cid, styles)
+ {
+ let kids = tree.children(cid);
+ flatten_boxless_inline_children(tree, &kids, styles, out);
+ } else {
+ out.push(cid);
+ }
+ }
+}
+
/// Style for a single-leaf inline run: a block-level box that fills the
/// containing block's width, with height from the shaped text (measure fn).
fn run_leaf_style() -> taffy::Style {
@@ -4545,8 +5448,8 @@ fn build_children_with_float_zone(
&& style.margin == crate::Edges::default()
&& style.padding == crate::Edges::default()
&& style.border == crate::Edges::default()
- && style.before_content.is_none()
- && style.after_content.is_none()
+ && style.before_pseudo.is_none()
+ && style.after_pseudo.is_none()
})
.unwrap_or(true);
no_size && tree.text_content(cid).trim().is_empty()
diff --git a/crates/obscura-render/src/inline.rs b/crates/obscura-render/src/inline.rs
index 3dda517..a55ceca 100644
--- a/crates/obscura-render/src/inline.rs
+++ b/crates/obscura-render/src/inline.rs
@@ -14,7 +14,12 @@
use std::{collections::HashMap, sync::Arc};
-use cosmic_text::{Align, Attrs, Buffer, Color, Family, FontSystem, Metrics, Shaping, Style, SwashCache, Weight, Wrap};
+use cosmic_text::{
+ Align, Attrs, Buffer, CacheKey, CacheKeyFlags, Color, Family, FontSystem, Metrics, Shaping,
+ Style, SwashCache, SwashImage, Weight, Wrap,
+};
+use swash::scale::{image::Content as SwashContent, Render, ScaleContext, Source, StrikeWith};
+use swash::zeno::{Angle, Format, Transform, Vector};
use obscura_dom::tree::{DomTree, NodeId};
@@ -90,7 +95,15 @@ struct LoadedFace {
max_weight: u16,
shape_weight: u16,
italic: bool,
- variable: bool,
+}
+
+#[derive(Clone)]
+struct ResolvedFont {
+ family: Arc,
+ shape_weight: u16,
+ /// Authored `wght` coordinate for a ranged @font-face. Cosmic Text 0.12
+ /// cannot carry this into shaping, so it is kept separately for raster.
+ variation_weight: Option,
}
#[derive(Clone)]
@@ -106,7 +119,7 @@ fn resolve_loaded_font(
requested_weight: u16,
requested_italic: bool,
loaded: &HashMap,
-) -> (Arc, u16) {
+) -> ResolvedFont {
if let Some(stack) = fam {
for token in stack.split(',') {
let name = token
@@ -124,15 +137,25 @@ fn resolve_loaded_font(
} else {
exact_style
};
- if let Some(face) = candidates.iter().copied().find(|face| {
- (face.min_weight..=face.max_weight).contains(&requested_weight)
- }) {
- let weight = if face.variable {
- requested_weight
- } else {
- face.shape_weight
+ if let Some(face) = candidates
+ .iter()
+ .copied()
+ .find(|face| (face.min_weight..=face.max_weight).contains(&requested_weight))
+ {
+ // cosmic-text 0.12 only accepts the named family when the
+ // shaping weight exactly matches fontdb's weight for that
+ // file. A variable face commonly advertises `100 900` in
+ // CSS while fontdb records its default instance as 400.
+ // Passing the authored weight makes cosmic-text reject the
+ // right family and fall through to an unrelated exact-
+ // weight face. Select the file at its database weight;
+ // variable-axis shaping is not exposed by this version.
+ return ResolvedFont {
+ family: Arc::clone(&face.name),
+ shape_weight: face.shape_weight,
+ variation_weight: (face.min_weight != face.max_weight)
+ .then_some(requested_weight),
};
- return (Arc::clone(&face.name), weight);
}
let available: Vec<_> =
candidates.iter().map(|face| face.min_weight).collect();
@@ -141,14 +164,22 @@ fn resolve_loaded_font(
.into_iter()
.find(|face| face.min_weight == matched)
{
- return (Arc::clone(&face.name), face.shape_weight);
+ return ResolvedFont {
+ family: Arc::clone(&face.name),
+ shape_weight: face.shape_weight,
+ variation_weight: None,
+ };
}
}
}
}
let fallback = resolve_font_family(fam);
let weights: &[u16] = &[400, 700];
- (Arc::from(fallback), match_font_weight(requested_weight, weights))
+ ResolvedFont {
+ family: Arc::from(fallback),
+ shape_weight: match_font_weight(requested_weight, weights),
+ variation_weight: None,
+ }
}
/// CSS Fonts' asymmetric missing-weight search. In particular, 600 selects
@@ -191,28 +222,6 @@ fn match_font_weight(requested: u16, available: &[u16]) -> u16 {
}
}
-fn face_is_variable(data: &[u8], face_index: u32) -> bool {
- let base = if data.get(..4) == Some(b"ttcf") {
- let offset = 12usize.saturating_add(face_index as usize * 4);
- data.get(offset..offset + 4)
- .and_then(|bytes| bytes.try_into().ok())
- .map(u32::from_be_bytes)
- .unwrap_or(0) as usize
- } else {
- 0
- };
- let Some(count) = data
- .get(base + 4..base + 6)
- .and_then(|bytes| bytes.try_into().ok())
- .map(u16::from_be_bytes)
- else {
- return false;
- };
- (0..count as usize).any(|index| {
- let start = base + 12 + index * 16;
- data.get(start..start + 4) == Some(b"fvar")
- })
-}
/// Resolve `line-height: normal` from the selected face's horizontal header.
///
/// Chromium's FreeType-backed Linux path grid-fits the ascent, descent, and
@@ -258,6 +267,20 @@ pub(crate) fn used_line_height(style: &LayoutStyle) -> f32 {
/// into an [`InlineItem`]'s clip-text fills.
const META_UNDERLINE: usize = 1;
const META_FILL_SHIFT: usize = 1;
+const META_VARIATION_BITS: usize = 10;
+const META_VARIATION_SHIFT: usize = usize::BITS as usize - META_VARIATION_BITS;
+const META_VARIATION_MASK: usize =
+ ((1usize << META_VARIATION_BITS) - 1) << META_VARIATION_SHIFT;
+const META_FILL_MASK: usize = ((1usize << META_VARIATION_SHIFT) - 1) & !META_UNDERLINE;
+
+fn metadata_fill(metadata: usize) -> Option {
+ ((metadata & META_FILL_MASK) >> META_FILL_SHIFT).checked_sub(1)
+}
+
+fn metadata_variation_weight(metadata: usize) -> Option {
+ let weight = ((metadata & META_VARIATION_MASK) >> META_VARIATION_SHIFT) as u16;
+ (weight != 0).then_some(weight)
+}
type ClipTextFill = (f32, Vec<([u8; 4], Option)>);
@@ -286,10 +309,106 @@ pub struct TextEngine {
font_system: FontSystem,
loaded_families: HashMap,
swash: SwashCache,
+ variable_swash: VariableSwashCache,
items: Vec,
replaced: Vec,
}
+#[derive(Clone, Copy, Debug, Eq, Hash, PartialEq)]
+struct VariableCacheKey {
+ glyph: CacheKey,
+ weight: u16,
+}
+
+/// Swash's ordinary cache key intentionally has no variation coordinates.
+/// Keep variable instances in a separate cache so a 400 glyph can never be
+/// reused for 700 and repeated paint remains O(1) after the first raster.
+struct VariableSwashCache {
+ context: ScaleContext,
+ images: HashMap>,
+}
+
+impl VariableSwashCache {
+ fn new() -> Self {
+ Self {
+ context: ScaleContext::new(),
+ images: HashMap::new(),
+ }
+ }
+
+ fn with_pixels(
+ &mut self,
+ font_system: &mut FontSystem,
+ cache_key: CacheKey,
+ weight: u16,
+ base: Color,
+ mut f: F,
+ ) {
+ let key = VariableCacheKey {
+ glyph: cache_key,
+ weight,
+ };
+ let image = self.images.entry(key).or_insert_with(|| {
+ let font = font_system.get_font(cache_key.font_id)?;
+ let mut scaler = self
+ .context
+ .builder(font.as_swash())
+ .size(f32::from_bits(cache_key.font_size_bits))
+ .hint(true)
+ .variations([("wght", weight as f32)])
+ .build();
+ let offset = Vector::new(cache_key.x_bin.as_float(), cache_key.y_bin.as_float());
+ Render::new(&[
+ Source::ColorOutline(0),
+ Source::ColorBitmap(StrikeWith::BestFit),
+ Source::Outline,
+ ])
+ .format(Format::Alpha)
+ .offset(offset)
+ .transform(
+ cache_key
+ .flags
+ .contains(CacheKeyFlags::FAKE_ITALIC)
+ .then(|| {
+ Transform::skew(
+ Angle::from_degrees(14.0),
+ Angle::from_degrees(0.0),
+ )
+ }),
+ )
+ .render(&mut scaler, cache_key.glyph_id)
+ });
+ let Some(image) = image else { return };
+ let left = image.placement.left;
+ let top = -image.placement.top;
+ match image.content {
+ SwashContent::Mask => {
+ for (index, alpha) in image.data.iter().copied().enumerate() {
+ let x = index as i32 % image.placement.width as i32;
+ let y = index as i32 / image.placement.width as i32;
+ f(
+ left + x,
+ top + y,
+ Color(((alpha as u32) << 24) | base.0 & 0x00FF_FFFF),
+ );
+ }
+ }
+ SwashContent::Color => {
+ for (index, rgba) in image.data.chunks_exact(4).enumerate() {
+ let x = index as i32 % image.placement.width as i32;
+ let y = index as i32 / image.placement.width as i32;
+ f(
+ left + x,
+ top + y,
+ Color::rgba(rgba[0], rgba[1], rgba[2], rgba[3]),
+ );
+ }
+ }
+ SwashContent::SubpixelMask => {}
+ }
+ }
+}
+
const REPLACED_CONTEXT_BIT: usize = 1usize << (usize::BITS - 1);
#[derive(Clone, Copy)]
@@ -407,9 +526,6 @@ impl TextEngine {
let shape_weight = face.weight.0;
let italic = declared_italic
.unwrap_or(!matches!(face.style, cosmic_text::fontdb::Style::Normal));
- let variable = db
- .with_face_data(id, face_is_variable)
- .unwrap_or(false);
let weight = declared_weight.unwrap_or((shape_weight, shape_weight));
let declared_names: Vec = declared_family
.map(|name| vec![name])
@@ -424,7 +540,6 @@ impl TextEngine {
max_weight: weight.1,
shape_weight,
italic,
- variable,
});
}
}
@@ -434,6 +549,7 @@ impl TextEngine {
font_system,
loaded_families,
swash: SwashCache::new(),
+ variable_swash: VariableSwashCache::new(),
items: Vec::new(),
replaced: Vec::new(),
}
@@ -458,18 +574,13 @@ impl TextEngine {
}
let base = styles.get(&id)?;
let mut collector = Collector { last_was_space: true, clip_fills: Vec::new() };
- let (family, weight) = resolve_loaded_font(
+ let font = resolve_loaded_font(
base.font_family.as_deref(),
crate::style::used_font_weight(base),
base.font_style_italic.unwrap_or(false),
&self.loaded_families,
);
- let ctx = base_span_ctx(
- base,
- family,
- weight,
- &mut collector,
- );
+ let ctx = base_span_ctx(base, font, &mut collector);
let mut spans: Vec<(String, SpanAttrs)> = Vec::new();
collect_spans(
tree,
@@ -508,18 +619,13 @@ impl TextEngine {
}
let base = styles.get(&parent)?;
let mut collector = Collector { last_was_space: true, clip_fills: Vec::new() };
- let (family, weight) = resolve_loaded_font(
+ let font = resolve_loaded_font(
base.font_family.as_deref(),
crate::style::used_font_weight(base),
base.font_style_italic.unwrap_or(false),
&self.loaded_families,
);
- let ctx = base_span_ctx(
- base,
- family,
- weight,
- &mut collector,
- );
+ let ctx = base_span_ctx(base, font, &mut collector);
let mut spans: Vec<(String, SpanAttrs)> = Vec::new();
for &cid in run {
collect_node_spans(
@@ -551,17 +657,18 @@ impl TextEngine {
last_was_space: true,
clip_fills: Vec::new(),
};
- let (family, weight) = resolve_loaded_font(
+ let font = resolve_loaded_font(
style.font_family.as_deref(),
crate::style::used_font_weight(style),
style.font_style_italic.unwrap_or(false),
&self.loaded_families,
);
- let context = base_span_ctx(style, family, weight, &mut collector);
+ let context = base_span_ctx(style, font, &mut collector);
let attrs = SpanAttrs {
font_size: context.font_size,
line_height: context.line_height,
weight: context.weight,
+ variation_weight: context.variation_weight,
italic: context.italic,
underline: context.underline,
color: context.color,
@@ -735,6 +842,7 @@ struct SpanAttrs {
font_size: f32,
line_height: f32,
weight: u16,
+ variation_weight: Option,
italic: bool,
underline: bool,
color: [u8; 4],
@@ -759,9 +867,14 @@ impl SpanAttrs {
// reaches paint; the real gradient is selected through metadata.
let color = if self.clip_fill.is_some() { [255, 255, 255, 255] } else { self.color };
a = a.color(Color::rgba(color[0], color[1], color[2], color[3]));
- // Underline and the optional fill index share the per-glyph metadata.
+ // Underline, the optional fill index, and a variable `wght` coordinate
+ // share the per-glyph metadata.
let fill = self.clip_fill.map_or(0, |index| (index + 1) << META_FILL_SHIFT);
- a = a.metadata(fill | usize::from(self.underline));
+ debug_assert_eq!(fill & !META_FILL_MASK, 0);
+ let variation = self
+ .variation_weight
+ .map_or(0, |weight| usize::from(weight.clamp(1, 1000)) << META_VARIATION_SHIFT);
+ a = a.metadata(fill | variation | usize::from(self.underline));
a
}
}
@@ -773,6 +886,7 @@ struct SpanCtx {
line_height: f32,
color: [u8; 4],
weight: u16,
+ variation_weight: Option,
italic: bool,
underline: bool,
transform: TextTransform,
@@ -800,8 +914,7 @@ struct Collector {
/// transparent (and invisible), unchanged.
fn base_span_ctx(
base: &LayoutStyle,
- family: Arc,
- weight: u16,
+ font: ResolvedFont,
collector: &mut Collector,
) -> SpanCtx {
let clip_fill = clip_text_fill(base).map(|fill| {
@@ -813,11 +926,12 @@ fn base_span_ctx(
font_size: base.font_size.unwrap_or(16.0),
line_height: used_line_height(base),
color: base.color.unwrap_or([0, 0, 0, 255]),
- weight,
+ weight: font.shape_weight,
+ variation_weight: font.variation_weight,
italic: base.font_style_italic.unwrap_or(false),
underline: base.underline.unwrap_or(false),
transform: base.text_transform.unwrap_or(TextTransform::None),
- family,
+ family: font.family,
clip_fill,
}
}
@@ -864,6 +978,7 @@ fn collect_node_spans(
font_size: ctx.font_size,
line_height: ctx.line_height,
weight: ctx.weight,
+ variation_weight: ctx.variation_weight,
italic: ctx.italic,
underline: ctx.underline,
color: ctx.color,
@@ -883,6 +998,7 @@ fn collect_node_spans(
font_size: ctx.font_size,
line_height: ctx.line_height,
weight: ctx.weight,
+ variation_weight: ctx.variation_weight,
italic: ctx.italic,
underline: ctx.underline,
color: ctx.color,
@@ -907,7 +1023,7 @@ fn collect_node_spans(
let requested_weight = style
.map(crate::style::used_font_weight)
.unwrap_or(ctx.weight);
- let (family, weight) = style
+ let font = style
.and_then(|style| style.font_family.as_deref())
.map(|family| {
resolve_loaded_font(
@@ -919,7 +1035,17 @@ fn collect_node_spans(
loaded_families,
)
})
- .unwrap_or_else(|| (Arc::clone(&ctx.family), requested_weight));
+ .unwrap_or_else(|| ResolvedFont {
+ family: Arc::clone(&ctx.family),
+ shape_weight: if ctx.variation_weight.is_some() {
+ ctx.weight
+ } else {
+ requested_weight
+ },
+ variation_weight: ctx
+ .variation_weight
+ .map(|_| requested_weight.clamp(1, 1000)),
+ });
let child = SpanCtx {
font_size: style
.and_then(|style| style.font_size)
@@ -928,13 +1054,14 @@ fn collect_node_spans(
.map(used_line_height)
.unwrap_or(ctx.line_height),
color,
- weight,
+ weight: font.shape_weight,
+ variation_weight: font.variation_weight,
italic: ctx.italic || style.and_then(|s| s.font_style_italic).unwrap_or(false),
// Underline propagates in: an ancestor's underline covers
// descendant text; an element only sets its own via CSS.
underline: ctx.underline || style.and_then(|s| s.underline).unwrap_or(false),
transform: style.and_then(|s| s.text_transform).unwrap_or(ctx.transform),
- family,
+ family: font.family,
clip_fill,
};
collect_spans(
@@ -998,8 +1125,17 @@ fn buffer_size(buffer: &Buffer) -> (f32, f32) {
/// plain inline formatting (no atomic inline boxes, no block children, no
/// inline element carrying its own box)? Such a container collapses cleanly
/// to one shaped buffer; anything else keeps the general build path.
-fn is_pure_text_ifc(tree: &DomTree, id: NodeId, styles: &std::collections::HashMap) -> bool {
- let Some(style) = styles.get(&id) else { return false };
+fn is_pure_text_ifc(
+ tree: &DomTree,
+ id: NodeId,
+ styles: &std::collections::HashMap,
+) -> bool {
+ let Some(style) = styles.get(&id) else {
+ return false;
+ };
+ if style.before_pseudo.is_some() || style.after_pseudo.is_some() {
+ return false;
+ }
// Only containers that lay their children out in normal flow (block, or
// the flex-column stand-ins our UA sheet uses for td/th/center). A real
// flex/grid row with inline children is rare and better left to taffy.
@@ -1080,8 +1216,8 @@ fn inline_child_ok(tree: &DomTree, cid: NodeId, styles: &std::collections::HashM
&& style.position.is_none()
&& style.float.is_none()
&& !style.overflow_hidden
- && style.before_content.is_none()
- && style.after_content.is_none();
+ && style.before_pseudo.is_none()
+ && style.after_pseudo.is_none();
if !foldable_inline {
return false;
}
@@ -1177,6 +1313,7 @@ impl TextEngine {
let TextEngine {
font_system,
swash,
+ variable_swash,
items,
..
} = self;
@@ -1203,7 +1340,7 @@ impl TextEngine {
let mut seg: Option<(f32, f32, f32, [u8; 4])> = None; // x0, x1, font_size, color
for g in run.glyphs {
let underlined = g.metadata & META_UNDERLINE != 0;
- if let Some(fill_index) = (g.metadata >> META_FILL_SHIFT).checked_sub(1) {
+ if let Some(fill_index) = metadata_fill(g.metadata) {
if let Some(bounds) = fill_bounds.get_mut(fill_index) {
let glyph_bounds = (
g.x,
@@ -1259,12 +1396,8 @@ impl TextEngine {
for glyph in run.glyphs {
let physical = glyph.physical((0.0, 0.0), 1.0);
let glyph_color = glyph.color_opt.unwrap_or(default);
- let fill_index = (glyph.metadata >> META_FILL_SHIFT).checked_sub(1);
- swash.with_pixels(
- font_system,
- physical.cache_key,
- glyph_color,
- |x, y, color| {
+ let fill_index = metadata_fill(glyph.metadata);
+ let mut draw_pixel = |x, y, color: Color| {
let a = color.a() as u32;
if a == 0 {
return;
@@ -1311,8 +1444,23 @@ impl TextEngine {
let out_b = sb + (dst.blue() as u32 * inv / 255);
pixels[idx] = tiny_skia::PremultipliedColorU8::from_rgba(out_r as u8, out_g as u8, out_b as u8, out_a as u8)
.unwrap_or(dst);
- },
- );
+ };
+ if let Some(weight) = metadata_variation_weight(glyph.metadata) {
+ variable_swash.with_pixels(
+ font_system,
+ physical.cache_key,
+ weight,
+ glyph_color,
+ &mut draw_pixel,
+ );
+ } else {
+ swash.with_pixels(
+ font_system,
+ physical.cache_key,
+ glyph_color,
+ &mut draw_pixel,
+ );
+ }
}
}
@@ -1349,6 +1497,7 @@ impl TextEngine {
#[cfg(test)]
mod tests {
use super::*;
+ use base64::Engine as _;
const RED: [u8; 4] = [255, 0, 0, 255];
const BLUE: [u8; 4] = [0, 0, 255, 255];
@@ -1383,7 +1532,6 @@ mod tests {
max_weight: 400,
shape_weight: 400,
italic: false,
- variable: false,
},
LoadedFace {
name: Arc::from("Poppins Medium"),
@@ -1391,7 +1539,6 @@ mod tests {
max_weight: 500,
shape_weight: 500,
italic: false,
- variable: false,
},
LoadedFace {
name: Arc::from("Poppins"),
@@ -1399,17 +1546,203 @@ mod tests {
max_weight: 700,
shape_weight: 700,
italic: false,
- variable: false,
},
],
};
let loaded = HashMap::from([("poppins".to_string(), family)]);
let medium = resolve_loaded_font(Some("Poppins, sans-serif"), 500, false, &loaded);
- assert_eq!(medium.0.as_ref(), "Poppins Medium");
- assert_eq!(medium.1, 500);
+ assert_eq!(medium.family.as_ref(), "Poppins Medium");
+ assert_eq!(medium.shape_weight, 500);
+ assert_eq!(medium.variation_weight, None);
let semibold = resolve_loaded_font(Some("Poppins"), 600, false, &loaded);
- assert_eq!(semibold.0.as_ref(), "Poppins");
- assert_eq!(semibold.1, 700);
+ assert_eq!(semibold.family.as_ref(), "Poppins");
+ assert_eq!(semibold.shape_weight, 700);
+ assert_eq!(semibold.variation_weight, None);
+ }
+
+ #[test]
+ fn ranged_face_shapes_at_its_font_database_weight() {
+ let tree = obscura_dom::parse_html("Variable family
");
+ let copy = tree.get_element_by_id("copy").unwrap();
+ let mut style = LayoutStyle::default();
+ style.display = Display::Block;
+ style.font_family = Some("test variable".to_string());
+ style.font_weight = Some("700".to_string());
+ style.font_size = Some(32.0);
+ let styles = HashMap::from([(copy, style)]);
+
+ let mut engine = TextEngine::new();
+ engine.loaded_families.insert(
+ "test variable".to_string(),
+ LoadedFamily {
+ faces: vec![LoadedFace {
+ name: Arc::from(FAMILY),
+ min_weight: 100,
+ max_weight: 900,
+ shape_weight: 400,
+ italic: false,
+ }],
+ },
+ );
+
+ let item = engine.try_build(&tree, copy, &styles).unwrap();
+ engine.measure(item, None);
+ let font_id = engine.items[item]
+ .buffer
+ .layout_runs()
+ .next()
+ .and_then(|run| run.glyphs.first())
+ .map(|glyph| glyph.font_id)
+ .unwrap();
+ let face = engine.font_system.db().face(font_id).unwrap();
+ assert!(
+ face.families.iter().any(|(name, _)| name == FAMILY),
+ "authored family must not fall through to an unrelated exact-weight face"
+ );
+ assert_eq!(face.weight.0, 400);
+ }
+
+ #[test]
+ fn ranged_face_preserves_requested_weight_for_variable_raster() {
+ let loaded = HashMap::from([(
+ "inter".to_string(),
+ LoadedFamily {
+ faces: vec![LoadedFace {
+ name: Arc::from("Inter"),
+ min_weight: 100,
+ max_weight: 900,
+ shape_weight: 400,
+ italic: false,
+ }],
+ },
+ )]);
+ let resolved = resolve_loaded_font(Some("Inter, sans-serif"), 725, false, &loaded);
+ assert_eq!(resolved.family.as_ref(), "Inter");
+ assert_eq!(resolved.shape_weight, 400);
+ assert_eq!(resolved.variation_weight, Some(725));
+ }
+
+ #[test]
+ fn glyph_metadata_keeps_fill_and_variable_weight_independent() {
+ let attrs = SpanAttrs {
+ font_size: 16.0,
+ line_height: 18.0,
+ weight: 400,
+ variation_weight: Some(725),
+ italic: false,
+ underline: true,
+ color: [1, 2, 3, 255],
+ family: Arc::from(FAMILY),
+ clip_fill: Some(37),
+ };
+ let metadata = attrs.to_attrs().metadata;
+ assert_ne!(metadata & META_UNDERLINE, 0);
+ assert_eq!(metadata_fill(metadata), Some(37));
+ assert_eq!(metadata_variation_weight(metadata), Some(725));
+ }
+
+ fn variable_font_fixture() -> Vec {
+ let encoded: String = include_str!("../tests/fonts/obscura-vf-test.woff2.b64")
+ .chars()
+ .filter(|ch| !ch.is_whitespace())
+ .collect();
+ let compressed = base64::engine::general_purpose::STANDARD
+ .decode(encoded)
+ .expect("decode variable-font fixture");
+ wuff::decompress_woff2(&compressed).expect("decompress variable-font fixture")
+ }
+
+ fn render_variable_weight(weight: u16) -> ((f32, f32), u64, Vec) {
+ let mut engine = TextEngine::new_with_web_fonts(&[WebFont {
+ data: variable_font_fixture(),
+ family: Some("Obscura VF Test".to_string()),
+ weight: Some((100, 900)),
+ italic: Some(false),
+ }]);
+ let tree = obscura_dom::parse_html("MMMMMMMM
");
+ let copy = tree.get_element_by_id("copy").unwrap();
+ let mut style = LayoutStyle::default();
+ style.display = Display::Block;
+ style.font_family = Some("Obscura VF Test".to_string());
+ style.font_weight = Some(weight.to_string());
+ style.font_size = Some(64.0);
+ style.line_height = Some(crate::LineHeight::Px(80.0));
+ let styles = HashMap::from([(copy, style)]);
+ let item = engine.try_build(&tree, copy, &styles).unwrap();
+ let geometry = engine.measure(item, Some(600.0));
+ engine.finalize(item, (0.0, 0.0), 600.0, None);
+ let mut pixmap = tiny_skia::Pixmap::new(600, 100).unwrap();
+ engine.paint_item(item, &mut pixmap, (0.0, 0.0));
+ let ink = pixmap
+ .pixels()
+ .iter()
+ .map(|pixel| u64::from(pixel.alpha()))
+ .sum();
+ let mut cached_weights: Vec<_> = engine
+ .variable_swash
+ .images
+ .keys()
+ .map(|key| key.weight)
+ .collect();
+ cached_weights.sort_unstable();
+ cached_weights.dedup();
+ (geometry, ink, cached_weights)
+ }
+
+ #[test]
+ fn variable_wght_changes_true_outline_without_changing_layout_geometry() {
+ let (regular_geometry, regular_ink, regular_cache) = render_variable_weight(400);
+ let (black_geometry, black_ink, black_cache) = render_variable_weight(900);
+ assert_eq!(regular_geometry, black_geometry);
+ assert!(
+ black_ink > regular_ink * 13 / 10,
+ "wght=900 should carry substantially more raster ink: {regular_ink} vs {black_ink}"
+ );
+ assert_eq!(regular_cache, vec![400]);
+ assert_eq!(black_cache, vec![900]);
+ }
+
+ #[test]
+ fn variable_glyph_cache_keys_include_weight_axis() {
+ let mut engine = TextEngine::new_with_web_fonts(&[WebFont {
+ data: variable_font_fixture(),
+ family: Some("Obscura VF Test".to_string()),
+ weight: Some((100, 900)),
+ italic: Some(false),
+ }]);
+ let tree = obscura_dom::parse_html(
+ "MM
",
+ );
+ let copy = tree.get_element_by_id("copy").unwrap();
+ let regular = tree.get_element_by_id("regular").unwrap();
+ let black = tree.get_element_by_id("black").unwrap();
+ let mut base = LayoutStyle::default();
+ base.display = Display::Block;
+ base.font_family = Some("Obscura VF Test".to_string());
+ base.font_size = Some(64.0);
+ base.line_height = Some(crate::LineHeight::Px(80.0));
+ let mut regular_style = base.clone();
+ regular_style.display = Display::Inline;
+ regular_style.font_weight = Some("400".to_string());
+ let mut black_style = regular_style.clone();
+ black_style.font_weight = Some("900".to_string());
+ let styles = HashMap::from([
+ (copy, base),
+ (regular, regular_style),
+ (black, black_style),
+ ]);
+ let item = engine.try_build(&tree, copy, &styles).unwrap();
+ engine.measure(item, Some(200.0));
+ engine.finalize(item, (0.0, 0.0), 200.0, None);
+ let mut pixmap = tiny_skia::Pixmap::new(200, 100).unwrap();
+ engine.paint_item(item, &mut pixmap, (0.0, 0.0));
+ let weights: std::collections::HashSet<_> = engine
+ .variable_swash
+ .images
+ .keys()
+ .map(|key| key.weight)
+ .collect();
+ assert_eq!(weights, std::collections::HashSet::from([400, 900]));
}
#[test]
diff --git a/crates/obscura-render/src/lib.rs b/crates/obscura-render/src/lib.rs
index d6782a1..cdb06fe 100644
--- a/crates/obscura-render/src/lib.rs
+++ b/crates/obscura-render/src/lib.rs
@@ -20,12 +20,14 @@ pub mod style;
pub use style::compute_style;
pub mod dom;
-pub use dom::{layout_dom, layout_dom_with_images, layout_dom_with_resources, DomLayout};
+pub use dom::{
+ layout_dom, layout_dom_with_images, layout_dom_with_resources, DomLayout, StickyLayout,
+};
#[cfg(feature = "paint")]
mod paint;
#[cfg(feature = "paint")]
-pub use paint::{paint_dom, screenshot_png};
+pub use paint::{paint_dom, paint_dom_scrolled, screenshot_png, screenshot_png_scrolled};
// Real inline text layout (cosmic-text) lives behind the paint feature; the
// layout-only build keeps the lighter word-split geometry. The stub lets
@@ -301,7 +303,19 @@ pub struct LayoutStyle {
pub mask_repeat: Option<(bool, bool)>,
/// Foreground (text) color for the paint step.
pub color: Option<[u8; 4]>,
+ /// Computed SVG presentation properties supplied by author CSS. Inline
+ /// SVG is serialized into a standalone document for resvg; without
+ /// carrying these values across that boundary, stylesheet-driven icons
+ /// and text lose their fill/stroke and can become completely invisible.
+ pub svg_fill: Option,
+ pub svg_stroke: Option,
+ pub svg_stroke_width: Option,
pub border_color: Option<[u8; 4]>,
+ /// Used color scheme for CSS Color 5 `light-dark()`. The renderer's
+ /// current user preference is light; an inherited `color-scheme: dark`
+ /// subtree switches this to true, while `normal`, `light`, or a list that
+ /// permits light keeps the light scheme.
+ pub color_scheme_dark: bool,
pub font_size: Option,
/// `font-size` given in a font/viewport-relative unit, resolved to
/// `font_size` (px) during the inheritance pass against the parent and
@@ -391,6 +405,10 @@ pub struct LayoutStyle {
/// Distinguishes `fixed` from `absolute`; both map to taffy's absolute
/// layout mode, but fixed boxes use the initial containing block.
pub position_fixed: bool,
+ /// Distinguishes `sticky` from ordinary relative positioning. Sticky boxes
+ /// remain in normal flow; their insets constrain a scroll-time translation
+ /// and therefore must not be applied as taffy relative offsets.
+ pub position_sticky: bool,
pub inset: [Option; 4], // top, right, bottom, left
/// Deferred functional inset expressions in top/right/bottom/left order.
pub inset_expressions: [Option; 4],
@@ -401,6 +419,15 @@ pub struct LayoutStyle {
/// clipped box used for skip-links and screen-reader-only labels) actually
/// invisible instead of painting its text wherever it lands.
pub overflow_hidden: bool,
+ /// Whether computed overflow establishes a scroll container. `clip`
+ /// clips paint but deliberately does not establish one, which matters for
+ /// selecting the scrollport that controls a sticky descendant.
+ pub overflow_scroll_container: bool,
+ /// Number of classic scrollbar gutters reserved by
+ /// `scrollbar-gutter:stable` (one) or `stable both-edges` (two). Root
+ /// gutters reduce the initial containing block even when the scrollbar
+ /// itself is visually hidden in a headless screenshot.
+ pub scrollbar_gutters: u8,
/// `float: left|right`. True CSS float needs per-line reflow around the
/// float's shape, which taffy's block/flex/grid modes do not do; see
@@ -445,6 +472,11 @@ pub struct LayoutStyle {
/// compositing.
pub effectively_invisible: bool,
+ /// A CSS image supplied by `content: url(...)` on a replaced element.
+ /// This is distinct from generated pseudo text: on an `![]()
` it becomes
+ /// the element's image source and contributes intrinsic dimensions just
+ /// like an HTML `src`.
+ pub content_image: Option,
/// Literal text injected by a `::before`/`::after` rule with a plain
/// string-literal `content` (see `css::Stylesheet::pseudo_content`).
/// Rendered as an extra word-run at the start/end of this element's
@@ -863,12 +895,14 @@ pub(crate) fn to_taffy_style(style: &LayoutStyle) -> Style {
// Positioning. Absolute/fixed take the box out of flow.
if let Some(pos) = style.position {
s.position = pos;
- s.inset = taffy::Rect {
- top: inset_lpa(style.inset[0]),
- right: inset_lpa(style.inset[1]),
- bottom: inset_lpa(style.inset[2]),
- left: inset_lpa(style.inset[3]),
- };
+ if !style.position_sticky {
+ s.inset = taffy::Rect {
+ top: inset_lpa(style.inset[0]),
+ right: inset_lpa(style.inset[1]),
+ bottom: inset_lpa(style.inset[2]),
+ left: inset_lpa(style.inset[3]),
+ };
+ }
}
s.margin = rect_auto(style.margin, style.margin_auto);
diff --git a/crates/obscura-render/src/paint.rs b/crates/obscura-render/src/paint.rs
index ff4030a..29861e5 100644
--- a/crates/obscura-render/src/paint.rs
+++ b/crates/obscura-render/src/paint.rs
@@ -12,6 +12,9 @@ use ab_glyph::{Font, FontRef, PxScale, ScaleFont};
static FONT_BYTES: &[u8] = include_bytes!("../assets/liberation-sans.ttf");
static SERIF_FONT_BYTES: &[u8] = include_bytes!("../assets/liberation-serif.ttf");
static MONO_FONT_BYTES: &[u8] = include_bytes!("../assets/liberation-mono.ttf");
+static FONT_BOLD_BYTES: &[u8] = include_bytes!("../assets/liberation-sans-bold.ttf");
+static FONT_OBLIQUE_BYTES: &[u8] = include_bytes!("../assets/liberation-sans-oblique.ttf");
+static FONT_BOLD_OBLIQUE_BYTES: &[u8] = include_bytes!("../assets/liberation-sans-boldoblique.ttf");
use crate::dom::layout_dom_with_web_fonts;
@@ -21,6 +24,18 @@ use crate::dom::layout_dom_with_web_fonts;
/// majority of real-world markup; without it only absolute and `data:` URLs
/// can be fetched.
pub fn paint_dom(tree: &DomTree, viewport: (f32, f32), base_url: Option<&str>) -> Option {
+ paint_dom_scrolled(tree, viewport, base_url, (0.0, 0.0))
+}
+
+/// Render the visible viewport after root scrolling. Normal document content
+/// is translated by the clamped scroll offset while viewport-fixed subtrees
+/// remain anchored to the initial containing block.
+pub fn paint_dom_scrolled(
+ tree: &DomTree,
+ viewport: (f32, f32),
+ base_url: Option<&str>,
+ scroll: (f32, f32),
+) -> Option {
let (w, h) = (viewport.0 as u32, viewport.1 as u32);
let mut pixmap = Pixmap::new(w, h)?;
pixmap.fill(Color::WHITE);
@@ -34,9 +49,31 @@ pub fn paint_dom(tree: &DomTree, viewport: (f32, f32), base_url: Option<&str>) -
// CSS-sized image with no width/height attribute would otherwise be 0x0
// and never paint). This seeds the same cache the paint pass reads, so
// each URL is still fetched at most once.
- let intrinsic = collect_image_intrinsics(tree, base_url, &mut image_cache);
+ let mut intrinsic = collect_image_intrinsics(tree, base_url, &mut image_cache);
let fonts = collect_web_fonts(tree, base_url);
+ // Most framework pages use web fonts and many decorative SVG icons, but
+ // only SVG text needs the page font faces. Avoid cloning/loading the page
+ // font database for ordinary icons and HTML-only text.
+ let svg_fonts = if has_inline_svg_text(tree) {
+ svg_font_database_with_web_fonts(&fonts)
+ } else {
+ svg_font_database()
+ };
let mut laid = layout_dom_with_web_fonts(tree, viewport, &intrinsic, &fonts);
+ // `content:url(...)` is computed by the author cascade, whereas ordinary
+ // HTML image sources are available before layout. Pay for a second layout
+ // only on the uncommon pages that actually use a CSS image as replaced
+ // content: its metadata then enters the same intrinsic-size map as `src`.
+ if collect_content_image_intrinsics(
+ tree,
+ &laid.styles,
+ base_url,
+ &mut image_cache,
+ &mut intrinsic,
+ ) {
+ laid = layout_dom_with_web_fonts(tree, viewport, &intrinsic, &fonts);
+ }
+ apply_document_scroll(tree, &mut laid, viewport, scroll);
let root_font_size = tree
.query_selector("html")
.ok()
@@ -106,7 +143,57 @@ pub fn paint_dom(tree: &DomTree, viewport: (f32, f32), base_url: Option<&str>) -
.chain(pos_layers.into_iter().flat_map(|(_, sub)| sub))
.collect();
- for nid in paint_order {
+ // Generated boxes are anonymous layout children. ::before paints directly
+ // after its host's own box; ::after paints after the host's last DOM
+ // descendant in this paint order. Build the latter schedule only on pages
+ // that actually materialized a generated box. A reverse DOM-preorder pass
+ // propagates each node's paint index to its parent once, deriving subtree
+ // endpoints in O(nodes + generated boxes), including reordered z layers.
+ let mut generated_before: std::collections::HashMap<
+ obscura_dom::tree::NodeId,
+ Vec,
+ > = std::collections::HashMap::new();
+ let mut generated_after_at: Vec> =
+ vec![Vec::new(); paint_order.len()];
+ if !laid.generated_boxes.is_empty() {
+ let paint_indices: std::collections::HashMap =
+ paint_order
+ .iter()
+ .enumerate()
+ .map(|(index, &nid)| (nid, index))
+ .collect();
+ let mut last_index: std::collections::HashMap =
+ paint_indices.clone();
+ let dom_preorder = tree.descendants(tree.document());
+ for nid in dom_preorder.into_iter().rev() {
+ let Some(index) = last_index.get(&nid).copied() else {
+ continue;
+ };
+ if let Some(parent) = tree.get_node(nid).and_then(|node| node.parent) {
+ last_index
+ .entry(parent)
+ .and_modify(|last| *last = (*last).max(index))
+ .or_insert(index);
+ }
+ }
+ for generated in laid.generated_boxes.iter().copied() {
+ match generated.kind {
+ crate::dom::GeneratedBoxKind::Before => {
+ generated_before
+ .entry(generated.host)
+ .or_default()
+ .push(generated);
+ }
+ crate::dom::GeneratedBoxKind::After => {
+ if let Some(index) = last_index.get(&generated.host) {
+ generated_after_at[*index].push(generated);
+ }
+ }
+ }
+ }
+ }
+
+ for (paint_index, nid) in paint_order.into_iter().enumerate() {
if svg_subtree_skip.contains(&nid) {
continue;
}
@@ -117,6 +204,17 @@ pub fn paint_dom(tree: &DomTree, viewport: (f32, f32), base_url: Option<&str>) -
if node.is_text() {
paint_text_node(tree, nid, &laid, &mut pixmap);
+ for generated in &generated_after_at[paint_index] {
+ paint_in_flow_generated_box(
+ &mut pixmap,
+ generated,
+ &laid,
+ viewport,
+ root_font_size,
+ base_url,
+ &mut image_cache,
+ );
+ }
continue;
}
@@ -283,6 +381,8 @@ pub fn paint_dom(tree: &DomTree, viewport: (f32, f32), base_url: Option<&str>) -
viewport,
root_font_size,
clip,
+ base_url,
+ &mut image_cache,
);
}
@@ -336,7 +436,12 @@ pub fn paint_dom(tree: &DomTree, viewport: (f32, f32), base_url: Option<&str>) -
}
if name.local.as_ref() == "img" {
- if let Some((src, _density)) = resolve_img_url(tree, nid) {
+ let source = style
+ .content_image
+ .as_ref()
+ .map(|url| (url.clone(), 1.0))
+ .or_else(|| resolve_img_url(tree, nid));
+ if let Some((src, _density)) = source {
// `visible_rect` is the border box already intersected with the
// ancestor overflow clip: the raster must not paint past it (a
// half-scrolled carousel slide's image otherwise bleeds over
@@ -387,7 +492,7 @@ pub fn paint_dom(tree: &DomTree, viewport: (f32, f32), base_url: Option<&str>) -
// is drawn at its full border-box size (undistorted) and clipped to the
// overflow-visible region.
if name.local.as_ref() == "svg" {
- let mut markup = serialize_svg(tree, nid);
+ let mut markup = serialize_svg_styled(tree, nid, &laid.styles);
// Resolve referenced symbols before carrying the host color into
// the standalone document. A document-level/external symbol may
// itself contain `currentColor`, and therefore has to be present
@@ -406,8 +511,14 @@ pub fn paint_dom(tree: &DomTree, viewport: (f32, f32), base_url: Option<&str>) -
// the sprite, splice the referenced `` into a local ``,
// and rewrite the href to a same-document `#id`. Same-document
// `