Skip to content

Improve block absolute auto resolution #922

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
AustinMReppert wants to merge 19 commits into from
Closed

Improve block absolute auto resolution #922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
7aa6b56
Fixes for absolute blocks with auto
AustinMReppert Feb 28, 2026
ebca2fd
Run GenTests
AustinMReppert Feb 28, 2026
a3f4c36
Add more absolute block tests
AustinMReppert Feb 28, 2026
7d0aa68
Do not set margin to 0
AustinMReppert Mar 1, 2026
16837be
Merge and fix
AustinMReppert Apr 10, 2026
354d8b6
Update generated tests
AustinMReppert Apr 10, 2026
2c293f0
Do not start margins to 0
AustinMReppert Apr 10, 2026
8156872
Avoid clamp
AustinMReppert Apr 10, 2026
c98228b
Use correct containing block sizes.
AustinMReppert Apr 11, 2026
68f28ce
Remove out of scope test
AustinMReppert Apr 11, 2026
c03735b
Refactor
Apr 11, 2026
ca6be1f
Normalize size.
Apr 12, 2026
34621f3
clippy
Apr 12, 2026
cf31881
Move layout_output down
Apr 12, 2026
fd481e8
Remove generated.
AustinMReppert Apr 12, 2026
9e66a33
Remove redundant tests
AustinMReppert Apr 12, 2026
3c1b15a
Remove commented out code
AustinMReppert Apr 13, 2026
83a76c7
Fix spec comment
AustinMReppert Apr 13, 2026
a534eee
Merge branch 'main' into feature/fix-block-absolute-resolution
AustinMReppert Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
498 changes: 388 additions & 110 deletions src/compute/block.rs
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions src/geometry.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,12 @@ impl Rect<f32> {
pub const fn new(start: f32, end: f32, top: f32, bottom: f32) -> Self {
Self { left: start, right: end, top, bottom }
}

/// Creates a new Rect from a horizontal and vertical line.
#[must_use]
pub const fn from_lines(horizontal: Line<f32>, vertical: Line<f32>) -> Self {
Self { left: horizontal.start, right: horizontal.end, top: vertical.start, bottom: vertical.end }
}
}

/// An abstract "line". Represents any type that has a start and an end
Expand Down
18 changes: 18 additions & 0 deletions test_fixtures/block/block_absolute_auto_margin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../../scripts/gentest/test_helper.js"></script>
<link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
<title>
Absolute positioning: Horizontal centering with vertical margin interference
</title>
</head>
<body>

<div id="test-root" style="display: block; width: 200px; height: 200px; position: relative; background: red;">
<div style="position: absolute; left: 50px; right: 0; width: 100px; top: 0; height: 100px; margin-top: 100px; margin-left: auto; margin-right: auto; background: green;">
</div>
</div>

</body>
</html>
19 changes: 19 additions & 0 deletions test_fixtures/block/block_absolute_auto_margins_and_insets.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../../scripts/gentest/test_helper.js"></script>
<link rel="stylesheet" type="text/css" href="../../scripts/gentest/test_base_style.css">
<title>
Absolute positioning: Border/Padding interference with Auto-Margins and Insets
</title>
</head>
<body>

<div id="test-root" style="display: block; width: 120px; height: 120px; padding: 20px; border: 20px solid black; position: relative; background: red;">

<div style="position: absolute; left: 0; right: 0; width: 60px; height: 60px; margin-left: auto; margin-right: auto; border: 10px solid black; background: green;">
</div>
</div>

</body>
</html>
15 changes: 15 additions & 0 deletions tests/xml/block/block_absolute_auto_margin__border_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<test name="block_absolute_auto_margin__border_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="block" direction="ltr" width="200px" height="200px">
<text direction="ltr" position="absolute" width="100px" height="100px" margin-top="100px" margin-left="auto" margin-right="auto" top="0px" left="50px" right="0px">

</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="75" y="100" width="100" height="100"/>
</node>
</expectations>
</test>
15 changes: 15 additions & 0 deletions tests/xml/block/block_absolute_auto_margin__border_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<test name="block_absolute_auto_margin__border_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="block" direction="rtl" width="200px" height="200px">
<text direction="rtl" position="absolute" width="100px" height="100px" margin-top="100px" margin-left="auto" margin-right="auto" top="0px" left="50px" right="0px">

</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="75" y="100" width="100" height="100"/>
</node>
</expectations>
</test>
15 changes: 15 additions & 0 deletions tests/xml/block/block_absolute_auto_margin__content_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<test name="block_absolute_auto_margin__content_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="block" box-sizing="content-box" direction="ltr" width="200px" height="200px">
<text box-sizing="content-box" direction="ltr" position="absolute" width="100px" height="100px" margin-top="100px" margin-left="auto" margin-right="auto" top="0px" left="50px" right="0px">

</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="75" y="100" width="100" height="100"/>
</node>
</expectations>
</test>
15 changes: 15 additions & 0 deletions tests/xml/block/block_absolute_auto_margin__content_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<test name="block_absolute_auto_margin__content_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="block" box-sizing="content-box" direction="rtl" width="200px" height="200px">
<text box-sizing="content-box" direction="rtl" position="absolute" width="100px" height="100px" margin-top="100px" margin-left="auto" margin-right="auto" top="0px" left="50px" right="0px">

</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="75" y="100" width="100" height="100"/>
</node>
</expectations>
</test>
15 changes: 15 additions & 0 deletions tests/xml/block/block_absolute_auto_margins_and_insets__border_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<test name="block_absolute_auto_margins_and_insets__border_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="block" direction="ltr" width="120px" height="120px" padding-top="20px" padding-left="20px" padding-bottom="20px" padding-right="20px" border-top="20px" border-left="20px" border-bottom="20px" border-right="20px">
<text direction="ltr" position="absolute" width="60px" height="60px" margin-left="auto" margin-right="auto" border-top="10px" border-left="10px" border-bottom="10px" border-right="10px" left="0px" right="0px">

</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="120" height="120">
<node x="30" y="40" width="60" height="60"/>
</node>
</expectations>
</test>
15 changes: 15 additions & 0 deletions tests/xml/block/block_absolute_auto_margins_and_insets__border_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<test name="block_absolute_auto_margins_and_insets__border_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="block" direction="rtl" width="120px" height="120px" padding-top="20px" padding-left="20px" padding-bottom="20px" padding-right="20px" border-top="20px" border-left="20px" border-bottom="20px" border-right="20px">
<text direction="rtl" position="absolute" width="60px" height="60px" margin-left="auto" margin-right="auto" border-top="10px" border-left="10px" border-bottom="10px" border-right="10px" left="0px" right="0px">

</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="120" height="120">
<node x="30" y="40" width="60" height="60"/>
</node>
</expectations>
</test>
15 changes: 15 additions & 0 deletions tests/xml/block/block_absolute_auto_margins_and_insets__content_box_ltr.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<test name="block_absolute_auto_margins_and_insets__content_box_ltr" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="block" box-sizing="content-box" direction="ltr" width="120px" height="120px" padding-top="20px" padding-left="20px" padding-bottom="20px" padding-right="20px" border-top="20px" border-left="20px" border-bottom="20px" border-right="20px">
<text box-sizing="content-box" direction="ltr" position="absolute" width="60px" height="60px" margin-left="auto" margin-right="auto" border-top="10px" border-left="10px" border-bottom="10px" border-right="10px" left="0px" right="0px">

</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="60" y="40" width="80" height="80"/>
</node>
</expectations>
</test>
15 changes: 15 additions & 0 deletions tests/xml/block/block_absolute_auto_margins_and_insets__content_box_rtl.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<test name="block_absolute_auto_margins_and_insets__content_box_rtl" use-rounding="true">
<viewport width="max-content" height="max-content"/>
<input>
<div display="block" box-sizing="content-box" direction="rtl" width="120px" height="120px" padding-top="20px" padding-left="20px" padding-bottom="20px" padding-right="20px" border-top="20px" border-left="20px" border-bottom="20px" border-right="20px">
<text box-sizing="content-box" direction="rtl" position="absolute" width="60px" height="60px" margin-left="auto" margin-right="auto" border-top="10px" border-left="10px" border-bottom="10px" border-right="10px" left="0px" right="0px">

</text>
</div>
</input>
<expectations>
<node x="0" y="0" width="200" height="200">
<node x="60" y="40" width="80" height="80"/>
</node>
</expectations>
</test>
40 changes: 40 additions & 0 deletions tests/xml/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,46 @@ mod block {
crate::run_xml_test("block", "block_absolute_aspect_ratio_width_overrides_inset__content_box_rtl");
}

#[test]
fn block_absolute_auto_margin__border_box_ltr() {
crate::run_xml_test("block", "block_absolute_auto_margin__border_box_ltr");
}

#[test]
fn block_absolute_auto_margin__content_box_ltr() {
crate::run_xml_test("block", "block_absolute_auto_margin__content_box_ltr");
}

#[test]
fn block_absolute_auto_margin__border_box_rtl() {
crate::run_xml_test("block", "block_absolute_auto_margin__border_box_rtl");
}

#[test]
fn block_absolute_auto_margin__content_box_rtl() {
crate::run_xml_test("block", "block_absolute_auto_margin__content_box_rtl");
}

#[test]
fn block_absolute_auto_margins_and_insets__border_box_ltr() {
crate::run_xml_test("block", "block_absolute_auto_margins_and_insets__border_box_ltr");
}

#[test]
fn block_absolute_auto_margins_and_insets__content_box_ltr() {
crate::run_xml_test("block", "block_absolute_auto_margins_and_insets__content_box_ltr");
}

#[test]
fn block_absolute_auto_margins_and_insets__border_box_rtl() {
crate::run_xml_test("block", "block_absolute_auto_margins_and_insets__border_box_rtl");
}

#[test]
fn block_absolute_auto_margins_and_insets__content_box_rtl() {
crate::run_xml_test("block", "block_absolute_auto_margins_and_insets__content_box_rtl");
}

#[test]
fn block_absolute_child_with_margin_x__border_box_ltr() {
crate::run_xml_test("block", "block_absolute_child_with_margin_x__border_box_ltr");
Expand Down