gioser

tawasuyu/taffy

A high performance rust-powered UI layout library

Rust 1100HTML 1031Markdown 12TOML 84455 Sutichaykuna

Revert "Resolve vertical percentage padding/border against node height" (#282)

All percentage padding/border values resolve against the node's inline size
(width in horizontal writing modes) as per the CSS spec.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/padding#values
(cherry picked from commit e2068ce29f883092845ed3b68689785bd7ca026b)

d30d23f0a61c39e3412f1354c7981364a38b5e99 · ruwaq Nico Burns · (3 wata ñawpaq) · tayta bb76045d8 · kay commitpi sach'ata qhaway

Semántico sayk'uy · 2

src/compute/leaf.rs

tests/border_and_padding.rs

3 qillqakuna · +6 −5

diff --git a/RELEASES.md b/RELEASES.md
index c5a87a78f..3b4ced56b 100644
--- a/RELEASES.md
+++ b/RELEASES.md
@@ -14,7 +14,6 @@
 ### Fixes
 
 - Border or padding on the horizontal axis could, in some cases, increase the height of nodes.
-- Vertical `border` and `padding` percentage values incorrectly multiplied by `available_space.width` instead of `height`.
 
 ## 0.2.1
 
diff --git a/src/compute/leaf.rs b/src/compute/leaf.rs
index 0ef485fed..07a507c25 100644
--- a/src/compute/leaf.rs
+++ b/src/compute/leaf.rs
@@ -66,8 +66,10 @@ pub(crate) fn compute(
         return node_size.unwrap_or(measured_size).maybe_clamp(node_min_size, node_max_size);
     }
 
-    let padding = style.padding.resolve_or_zero(available_space.as_options());
-    let border = style.border.resolve_or_zero(available_space.as_options());
+    // 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(available_space.width.into_option());
+    let border = style.border.resolve_or_zero(available_space.width.into_option());
 
     Size {
         width: node_size
@@ -77,7 +79,7 @@ pub(crate) fn compute(
             .maybe_clamp(node_min_size.width, node_max_size.width),
         height: node_size
             .height
-            // .unwrap_or(0.0) + padding.horizontal_axis_sum() + border.horizontal_axis_sum(), // content-box
+            // .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),
     }
diff --git a/tests/border_and_padding.rs b/tests/border_and_padding.rs
index ee4b8f855..3c25bf9f5 100644
--- a/tests/border_and_padding.rs
+++ b/tests/border_and_padding.rs
@@ -98,5 +98,5 @@ fn vertical_border_and_padding_percentage_values_use_available_space_correctly()
 
     let layout = taffy.layout(node).unwrap();
     assert_eq!(layout.size.width, 200.0);
-    assert_eq!(layout.size.height, 100.0);
+    assert_eq!(layout.size.height, 200.0);
 }