Skip to content
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

Make padding/border size floor node size #372

Merged
merged 22 commits into from
Mar 9, 2023
Merged

Make padding/border size floor node size #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
4825854
Add failing tests for borders flooring node size
nicoburns Feb 23, 2023
f6e4202
Add failing tests for padding flooring node size
nicoburns Mar 5, 2023
58ca322
Fix divide by zero in main size determination
nicoburns Mar 5, 2023
fbf950e
Add seperate leaf and flexbox tests for padding/border flooring node …
nicoburns Mar 5, 2023
bae7a8e
Fix padding/border flooring leaf node size
nicoburns Mar 5, 2023
86ba2ff
Fix flexbox children being floored by padding/border
nicoburns Mar 5, 2023
7a621e6
Combine padding and border tests + make edge dimensions uneven
nicoburns Mar 5, 2023
d521c1e
Add padding/border floor absolute child size
nicoburns Mar 5, 2023
2294aff
Add padding/border floor node size tests for grid
nicoburns Mar 5, 2023
6d7f9f1
Add grid container test for padding/border flooring node size
nicoburns Mar 5, 2023
cfa4fec
Fix padding/border flooring size of absolutely positioned children
nicoburns Mar 5, 2023
77b56d9
Rename grid padding/border tests so that they are all located together
nicoburns Mar 5, 2023
415959e
Make padding/border floor node size for grid children
nicoburns Mar 8, 2023
b44b345
Make padding/border floor node size for grid containers
nicoburns Mar 8, 2023
c372005
Apply aspect ratio to leaf nodes whose size is determined by padding/…
nicoburns Mar 8, 2023
b512668
Add test for padding/border not affecting flex basis
nicoburns Mar 9, 2023
171cdea
Convert flex basis determination to use break from block
nicoburns Mar 9, 2023
cb6c401
Add test for flex-basis 0 with flex grow
nicoburns Mar 9, 2023
39bf6ce
Floor flex-basis limits by preferred size style value when determinin…
nicoburns Mar 9, 2023
d1b0451
Floor outer flex-basis by padding_border sum (floors inner flex-basis…
nicoburns Mar 9, 2023
ef3774d
Remove commented out code
nicoburns Mar 9, 2023
aa251a1
Add missing 0
nicoburns Mar 9, 2023
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
257 changes: 150 additions & 107 deletions src/compute/flexbox.rs
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 11 additions & 2 deletions src/compute/grid/alignment.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ use crate::geometry::{Line, Point, Rect, Size};
use crate::layout::{Layout, SizingMode};
use crate::math::MaybeMath;
use crate::node::Node;
use crate::resolve::MaybeResolve;
use crate::resolve::{MaybeResolve, ResolveOrZero};
use crate::style::{AlignContent, AlignItems, AlignSelf, AvailableSpace, Position};
use crate::sys::{f32_max, f32_min};
use crate::tree::LayoutTree;
Expand Down Expand Up @@ -90,8 +90,16 @@ pub(super) fn align_and_position_item(
let position = style.position;
let inset_horizontal = style.inset.horizontal_components().map(|size| size.resolve_to_option(grid_area_size.width));
let inset_vertical = style.inset.vertical_components().map(|size| size.resolve_to_option(grid_area_size.height));
let padding = style.padding.map(|p| p.resolve_or_zero(Some(grid_area_size.width)));
let border = style.border.map(|p| p.resolve_or_zero(Some(grid_area_size.width)));
let padding_border_size = (padding + border).sum_axes();
let inherent_size = style.size.maybe_resolve(grid_area_size).maybe_apply_aspect_ratio(aspect_ratio);
let min_size = style.min_size.maybe_resolve(grid_area_size).maybe_apply_aspect_ratio(aspect_ratio);
let min_size = style
.min_size
.maybe_resolve(grid_area_size)
.or(padding_border_size.map(Some))
.maybe_max(padding_border_size)
.maybe_apply_aspect_ratio(aspect_ratio);
let max_size = style.max_size.maybe_resolve(grid_area_size).maybe_apply_aspect_ratio(aspect_ratio);

// Resolve default alignment styles if they are set on neither the parent or the node itself
Expand Down Expand Up @@ -149,6 +157,7 @@ pub(super) fn align_and_position_item(

None
});

// Reapply aspect ratio after stretch and absolute position width adjustments
let Size { width, height } = Size { width, height: inherent_size.height }.maybe_apply_aspect_ratio(aspect_ratio);

Expand Down
7 changes: 5 additions & 2 deletions src/compute/grid/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ pub fn compute(
// https://www.w3.org/TR/css-grid-1/#available-grid-space
let padding = style.padding.resolve_or_zero(parent_size.width);
let border = style.border.resolve_or_zero(parent_size.width);
let padding_border_size = (padding + border).sum_axes();
let aspect_ratio = style.aspect_ratio;
let min_size = style.min_size.maybe_resolve(parent_size).maybe_apply_aspect_ratio(aspect_ratio);
let max_size = style.max_size.maybe_resolve(parent_size).maybe_apply_aspect_ratio(aspect_ratio);
Expand Down Expand Up @@ -236,10 +237,12 @@ pub fn compute(
let container_border_box = Size {
width: resolved_style_size
.get(AbstractAxis::Inline)
.unwrap_or_else(|| initial_column_sum + padding.horizontal_axis_sum() + border.horizontal_axis_sum()),
.unwrap_or_else(|| initial_column_sum + padding.horizontal_axis_sum() + border.horizontal_axis_sum())
.max(padding_border_size.width),
height: resolved_style_size
.get(AbstractAxis::Block)
.unwrap_or_else(|| initial_row_sum + padding.vertical_axis_sum() + border.vertical_axis_sum()),
.unwrap_or_else(|| initial_row_sum + padding.vertical_axis_sum() + border.vertical_axis_sum())
.max(padding_border_size.height),
};
let container_content_box = Size {
width: container_border_box.width - padding.horizontal_axis_sum() - border.horizontal_axis_sum(),
Expand Down
32 changes: 22 additions & 10 deletions src/compute/leaf.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,12 @@ pub(crate) fn compute(
}
};

// Note: both horizontal and vertical percentage padding/borders are resolved against the container's inline size (i.e. width).
// This is not a bug, but is how CSS is specified (see: https://developer.mozilla.org/en-US/docs/Web/CSS/padding#values)
nicoburns marked this conversation as resolved.
Show resolved Hide resolved
let padding = style.padding.resolve_or_zero(parent_size.width);
let border = style.border.resolve_or_zero(parent_size.width);
let padding_border = padding + border;

#[cfg(feature = "debug")]
NODE_LOGGER.log("LEAF");
#[cfg(feature = "debug")]
Expand All @@ -83,7 +89,9 @@ pub(crate) fn compute(

// Return early if both width and height are known
if let Size { width: Some(width), height: Some(height) } = node_size {
let size = Size { width, height }.maybe_clamp(node_min_size, node_max_size);
let size = Size { width, height }
.maybe_clamp(node_min_size, node_max_size)
.maybe_max(padding_border.sum_axes().map(Some));
return SizeAndBaselines { size, first_baselines: Point::NONE };
};

Expand Down Expand Up @@ -111,25 +119,29 @@ pub(crate) fn compute(
};

let size = node_size.unwrap_or(measured_size).maybe_clamp(node_min_size, node_max_size);
let size = size.maybe_max(padding_border.sum_axes().map(Some));
return SizeAndBaselines { size, first_baselines: Point::NONE };
}

// Note: both horizontal and vertical percentage padding/borders are resolved against the container's inline size (i.e. width).
// This is not a bug, but is how CSS is specified (see: https://developer.mozilla.org/en-US/docs/Web/CSS/padding#values)
let padding = style.padding.resolve_or_zero(parent_size.width);
let border = style.border.resolve_or_zero(parent_size.width);

let size = Size {
width: node_size
.width
// .unwrap_or(0.0) + padding.horizontal_axis_sum() + border.horizontal_axis_sum(), // content-box
.unwrap_or(0.0 + padding.horizontal_axis_sum() + border.horizontal_axis_sum()) // border-box
.maybe_clamp(node_min_size.width, node_max_size.width),
.unwrap_or(0.0) // border-box
.maybe_clamp(node_min_size.width, node_max_size.width)
.maybe_max(padding_border.horizontal_axis_sum().into()),
height: node_size
.height
// .unwrap_or(0.0) + padding.vertical_axis_sum() + border.vertical_axis_sum(), // content-box
.unwrap_or(0.0 + padding.vertical_axis_sum() + border.vertical_axis_sum()) // border-box
.maybe_clamp(node_min_size.height, node_max_size.height),
.unwrap_or(0.0) // border-box
.maybe_clamp(node_min_size.height, node_max_size.height)
.maybe_max(padding_border.vertical_axis_sum().into()),
};

let size = Size {
width: f32_max(size.width, aspect_ratio.map(|ratio| size.height * ratio).unwrap_or(0.0)),
height: f32_max(size.height, aspect_ratio.map(|ratio| size.width / ratio).unwrap_or(0.0)),
};

SizeAndBaselines { size, first_baselines: Point::NONE }
}
17 changes: 17 additions & 0 deletions test_fixtures/absolute_padding_border_overrides_max_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root">
<div style="position:absolute;max-width: 12px; max-height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
</div>

</body>
</html>
17 changes: 17 additions & 0 deletions test_fixtures/absolute_padding_border_overrides_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root">
<div style="position:absolute;width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
</div>

</body>
</html>
17 changes: 17 additions & 0 deletions test_fixtures/grid_padding_border_overrides_container_max_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root" style="display: grid;max-width: 12px; max-height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red">
<div></div>
</div>

</body>
</html>
17 changes: 17 additions & 0 deletions test_fixtures/grid_padding_border_overrides_container_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root" style="display: grid;width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red solid red">
<div></div>
</div>

</body>
</html>
17 changes: 17 additions & 0 deletions test_fixtures/grid_padding_border_overrides_max_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root" style="display:grid">
<div style="max-width: 12px; max-height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
</div>

</body>
</html>
17 changes: 17 additions & 0 deletions test_fixtures/grid_padding_border_overrides_min_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root" style="display: grid">
<div style="min-width: 0px; min-height: 0px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
</div>

</body>
</html>
17 changes: 17 additions & 0 deletions test_fixtures/grid_padding_border_overrides_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root" style="display: grid">
<div style="width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
</div>

</body>
</html>
15 changes: 15 additions & 0 deletions test_fixtures/leaf_padding_border_overrides_max_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root" style="max-width: 12px; max-height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>

</body>
</html>
15 changes: 15 additions & 0 deletions test_fixtures/leaf_padding_border_overrides_min_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root" style="min-width: 0px; min-height: 0px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>

</body>
</html>
15 changes: 15 additions & 0 deletions test_fixtures/leaf_padding_border_overrides_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root" style="width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>

</body>
</html>
17 changes: 17 additions & 0 deletions test_fixtures/padding_border_overrides_max_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root">
<div style="max-width: 12px; max-height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
</div>

</body>
</html>
17 changes: 17 additions & 0 deletions test_fixtures/padding_border_overrides_min_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root">
<div style="min-width: 0px; min-height: 0px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
</div>

</body>
</html>
17 changes: 17 additions & 0 deletions test_fixtures/padding_border_overrides_size.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>
Test description
</title>
<head/>
<body>

<div id="test-root">
<div style="width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
</div>

</body>
</html>
18 changes: 18 additions & 0 deletions test_fixtures/padding_border_overrides_size_flex_basis_0.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>
Test description
</title>
<head/>
<body>

<div id="test-root">
<div style="flex-basis: 0;width: 12px; height: 12px;padding:2px 4px 6px 8px;border-width: 1px 3px 5px 7px;border-style:solid;border-color:red"></div>
<div style="flex-basis: 0;width: 12px; height: 12px"></div>
</div>

</body>
</html>
Loading