Fix stripe height inference for definite-height boxes

Do not infer a full-height absolute stripe from opposing insets when height is definite. Cover px, rem, percent and calc corner tiles, and pin existing anchor/button exemptions. Full Rust workspace, rebuilt-engine Bun/Node suite and build pass; static and real Chrome agree on the repro.

AI-assisted by Codex under pbakaus's instructions.
This commit is contained in:
Paul Bakaus
2026-09-21 11:27:14 -07:00
parent 7454f5414d
commit e940f019d8
2 changed files with 25 additions and 2 deletions
+5 -2
View File
@@ -502,8 +502,11 @@ pub fn check_element_stripe_child(el: &StaticElement<'_>, style: &StyleValues) -
// The cascade already expands inset; a winning `auto` longhand
// must not be overwritten by the earlier shorthand.
let inset = ["top", "right", "bottom", "left"].map(|prop| sv(style, prop));
let height_stretches =
height_raw == "100%" || (static_edge_hugs(&inset[0]) && static_edge_hugs(&inset[2]));
// Opposing insets stretch only an auto-height box. With a definite
// height CSS drops the bottom constraint instead of stretching it.
let height_stretches = height_raw == "100%"
|| ((height_raw.is_empty() || height_raw == "auto")
&& static_edge_hugs(&inset[0]) && static_edge_hugs(&inset[2]));
if !height_stretches {
return Vec::new();
}
+20
View File
@@ -64,6 +64,26 @@ fn absolute_top_bottom_flags() {
assert!(hits[0].contains("stripe child (left)"));
}
#[test]
fn absolute_definite_height_does_not_stretch_between_insets() {
for height in ["4px", "1rem", "25%", "calc(2px + 2px)"] {
let html = format!(r#"<html><body><div style="position:relative;width:320px;height:100px">
<span style="position:absolute;left:0;top:0;bottom:0;width:4px;height:{height};background:#3b82f6"></span>
</div></body></html>"#);
assert!(side_tab_snippets(&html).is_empty(), "definite height {height} is not stretched");
}
}
#[test]
fn interactive_host_stripes_keep_the_border_rule_exemptions() {
for tag in ["a", "button"] {
let html = format!(r#"<html><body><{tag} style="position:relative;display:block;width:320px;height:100px">
<span style="position:absolute;left:0;top:0;bottom:0;width:4px;background:#3b82f6"></span>
</{tag}></body></html>"#);
assert!(side_tab_snippets(&html).is_empty(), "{tag} is an exempt control");
}
}
#[test]
fn flex_column_does_not_flag() {
let html = r#"<!DOCTYPE html><html><head><style>