fix(layout): preserve calc lengths in intrinsic margins

This commit is contained in:
ldm0
2026-08-29 19:11:35 +08:00
committed by Donough Liu
parent 2ddb4f721a
commit ba24bc7abe
4 changed files with 66 additions and 2 deletions
Generated
+1 -1
View File
@@ -4823,7 +4823,7 @@ dependencies = [
[[package]]
name = "taffy"
version = "0.13.0"
source = "git+https://github.com/ldm0/taffy?rev=3305c7b51c4c88d698d5d3039cd6c8e828ff2086#3305c7b51c4c88d698d5d3039cd6c8e828ff2086"
source = "git+https://github.com/ldm0/taffy?rev=b7735b0aba77dd0e98015f3cd1dd26a71f90a415#b7735b0aba77dd0e98015f3cd1dd26a71f90a415"
dependencies = [
"arrayvec",
"serde",
+1 -1
View File
@@ -98,7 +98,7 @@ stylo_atoms = { git = "https://github.com/ldm0/stylo", rev = "32c3de3f2aab3340c5
stylo_dom = { git = "https://github.com/ldm0/stylo", rev = "32c3de3f2aab3340c51f03f2a0878d1e4eed7fd6" }
stylo_static_prefs = { git = "https://github.com/ldm0/stylo", rev = "32c3de3f2aab3340c51f03f2a0878d1e4eed7fd6" }
stylo_traits = { git = "https://github.com/ldm0/stylo", rev = "32c3de3f2aab3340c51f03f2a0878d1e4eed7fd6" }
taffy = { git = "https://github.com/ldm0/taffy", rev = "3305c7b51c4c88d698d5d3039cd6c8e828ff2086" }
taffy = { git = "https://github.com/ldm0/taffy", rev = "b7735b0aba77dd0e98015f3cd1dd26a71f90a415" }
[workspace.lints.clippy]
disallowed_methods = "deny"
@@ -0,0 +1,63 @@
use super::*;
#[tokio::test(flavor = "current_thread")]
async fn screenshot_keeps_absolute_calc_terms_in_intrinsic_flex_margins() {
run_page_vm_async_test(async move {
let loader =
crate::network::ResourceRequestClient::new(&FetchConfig::default()).expect("loader");
let mut page_vm = test_page_vm_with_loader_and_document_url(
&loader,
Vec::new(),
Url::parse("https://example.com/intrinsic-calc-margin.html")?,
);
page_vm.vm_mut().eval(
r#"
document.head.innerHTML = `<style>
html,body{margin:0}
.probe{display:flex;height:20px}
#mixed,#percentage,#length{width:min-content}
#mixed>i{margin-left:calc(10% + 100px)}
#percentage>i{margin-left:10%}
#length>i{margin-left:100px}
#definite{width:200px}
#definite>i{width:1px;height:1px;margin-left:calc(10% + 100px)}
</style>`;
document.body.innerHTML = `
<div id=mixed class=probe><i></i></div>
<div id=percentage class=probe><i></i></div>
<div id=length class=probe><i></i></div>
<div id=definite class=probe><i id=definite-child></i></div>`;
'installed'
"#,
)?;
page_vm.vm_mut().sync_live_document_style_sources();
page_vm
.vm_mut()
.screenshot_layout_snapshot(moli_layout::PaintViewport::new(400, 100, 1.0))?
.expect("intrinsic percentage-resolution screenshot layout");
let geometry = page_vm.vm_mut().eval(
r#"JSON.stringify((()=>{const rect=id=>document.getElementById(id).getBoundingClientRect();const definite=rect('definite'),child=rect('definite-child');return {mixed:rect('mixed').width,percentage:rect('percentage').width,length:rect('length').width,definite:definite.width,definiteChildOffset:child.x-definite.x}})())"#,
)?;
let geometry: serde_json::Value = serde_json::from_str(&geometry)?;
for (name, expected) in [
("mixed", 100.0),
("percentage", 0.0),
("length", 100.0),
("definite", 200.0),
("definiteChildOffset", 120.0),
] {
let actual = geometry[name]
.as_f64()
.unwrap_or_else(|| panic!("missing numeric {name}: {geometry}"))
as f32;
assert!(
(actual - expected).abs() <= 0.05,
"{name}: expected {expected}, got {actual}; geometry={geometry}"
);
}
Ok::<_, anyhow::Error>(())
})
.await
.expect("intrinsic calc-margin fixture should run");
}
@@ -130,6 +130,7 @@ mod image_root_coordinates;
mod indexed_db;
mod inline_svg_paint;
mod internal_loading_completion;
mod intrinsic_percentage_resolution;
mod lifecycle;
mod main_document_post_parse_completion;
mod main_document_runtime;