Implement CSS Block layout (Display::Block) (#474)

* Add `Block` variant to `Display` enum + stub block layout implementation

* Implement super-naive version of the block algorithm

* Add display:block support to the test generator

* Fixup duplicate Display default

* Fixup: yoga helpers

* Implement intrinsic sizing for block layout

* Add basic test for block layout intrinsic sizing

* Remove unused imports

* Implment block layout inline-axis stretch fitting

* Implement block container padding and border

* Add tests for block container padding and border

* Implement block item inset

* Add test for block item inset

* Add Sub impl to Size<T> where T: Sub

* Block algo: implement percentage padding, border, and inset

* Block: Add tests for percentage padding, margin, and inset

* Add tests for scrollbars taking up space in block layout

* Add `Add` impl for Point<T> where T: Add

* Block: initial implementation of absolute positioning

* Block: clamp intrinsic sizes by min/max sizes

* Add single position:absolute test for block layout

* Add early return for case where height is known but width isn't

* Remove unnecessary unwrap_or

* Support block margins in the x/inline axis

* Add tests for negative inline-axis block margins

* Block: implement support for auto margins for relatively positioned items

* Support vertical block margins in non-collapsing and sibling-collapsing cases

* Fix clippy lints

* Add CollapsibleMarginSet type + thread it through the layout tree call stack

* Add can_collapse through to SizeBaselinesAndMargins struct

* Fix feature flagging

* Rework sibling margin collapse in terms of CollapsibleMarginSet

* Convert collapsible margin parameters to booleans

* Implement collapsing first-child and last-child margins with their parent's margins

* Add tests for first- and last-child margins collapsing with their parent margins

* Fix doc warnings

* Add tests for mix of +/- margins with first-child collapse (+disabled test for last-child)

* Add simple granchild collapsing test

* Make collapse_with_margin and collapse_with_set take self rather than &mut self

* Preserve separate positive/negative components of margin sets when returning them up the stack

* Enable test_fixtures/block_margin_y_fixed_size_first_granchild_collapse_positive_and_negative test

* Only propagate child margins to parent if current node's margins can collapse with them

* Enable block_margin_y_fixed_size_last_child_collapse_positive_and_negative test

* Remove height from non-leaf nodes for parent-child margin collapsing tests

* Block: Implement hidden layout

* Block: Compute first baseline for baseline alignment

* Add tests for hidden layout of block children

* Block absolute positioning fixes

* Add tests for absolute positioning

* Add tests for block auto margins

* Block absolute auto margin fixes

* Tests for block absolute auto margins

* Fix block absolute auto margins

* Add basic support for collapsing margins through block nodes

* Add test for margins collapsing through a block node

* Fix compilation with block_layout feature disabled

* Fix clippy lints

* Add some basic block layout - flexbox integration tests

* Remove useless variable

* Remove dbg!() statements

* Remove unused fields from BlockItem struct

* Remove print statement

* Apply suggestions from code review

Replace mentions of flexbox with block

Co-authored-by: TimJentzsch <TimJentzsch.github.com@timjen.net>

* Update block module documentation

* Clamp block auto width by min/max width

* Don't clamp content size of block nodes by their max height

* Add block aspect_ratio tests

* Remove baseline alignment support from block layout algorithm

It turns out that the baseline of a block node is always it's
"fallback baseline" (it's bottom edge). And in Taffy we can represent
this by simply returning `Point::NONE` as the baseline.

* Add tests for block algorithm baseline computation

* Add block layout to changelog

* Add block layout to the README

* Improve comment on order field

* Add extra block margin collapsing through tests

* Prevent margins collapsing through nodes with overflow-x set to a scroll
container overflow

* Don't allow margins to collapse through line boxes

* Add tests for margin collapsing through a node being blocked

* Overflow-x blocking margin collapse fixup

* Add tests for margin collapsing with children being blocked

* Floor size of block containers by padding_border sum

* Add tests for flooring size of block containers by padding_border sum

* Rename margin tests

* Add some percentage vertical margin tests

* Add tests for margin collapsing being blocked by flexbox and grid nodes

* Add block <-> grid integration tests

* Add complex margin collapse tests

---------

Co-authored-by: TimJentzsch <TimJentzsch.github.com@timjen.net>

Author: nicoburns

Cargo.toml

@@ -21,7 +21,8 @@ slotmap = { version = "1.0.6", optional = true }
 grid = { version = "0.10.0", default-features = false, optional = true }
 
 [features]
-default = ["std", "flexbox", "grid", "taffy_tree"]
+default = ["std", "flexbox", "grid", "block_layout", "taffy_tree"]
+block_layout = []
 flexbox = []
 grid = ["alloc", "dep:grid"]
 alloc = []

README.md

@@ -6,7 +6,7 @@
 
 Taffy is a flexible, high-performance, cross-platform UI layout library written in [Rust](https://www.rust-lang.org).
 
-It currently implements the **Flexbox** and **CSS Grid** layout algorithms. Support for other paradigms is planned. For more information on this and other future development plans see the [roadmap issue](https://github.com/DioxusLabs/taffy/issues/345).
+It currently implements the CSS **Block**, **Flexbox** and **CSS Grid** layout algorithms. Support for other paradigms is planned. For more information on this and other future development plans see the [roadmap issue](https://github.com/DioxusLabs/taffy/issues/345).
 
 This crate is a collaborative, cross-team project, and is designed to be used as a dependency for other UI and GUI libraries.
 Right now, it powers:

RELEASES.md

@@ -28,6 +28,10 @@ Example usage change:
      ).unwrap();
 ```
 
+### Added
+
+- Support for [CSS Block layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow#elements_participating_in_a_block_formatting_context) has been added. This can be used via the new `Display::Block` variant of the `Display` enum. Note that inline, inline-block and float have *not* been implemented. The use case supported is block container nodes which contain block-level children.
+
 ### Removed
 
 - `layout_flexbox()` has been removed from the prelude. Use `FlexboxAlgorithm::perform_layout()` instead.

benches/src/yoga_helpers.rs

@@ -96,9 +96,10 @@ fn content_into_justify(align: Option<tf::JustifyContent>) -> yg::Justify {
 pub fn apply_taffy_style(node: &mut yg::Node, style: &tf::Style) {
     // display
     node.set_display(match style.display {
-        tf::Display::Flex => yg::Display::Flex,
-        tf::Display::Grid => panic!("Yoga does not support CSS Grid"),
         tf::Display::None => yg::Display::None,
+        tf::Display::Flex => yg::Display::Flex,
+        tf::Display::Grid => panic!("Yoga does not support CSS Grid layout"),
+        tf::Display::Block => panic!("Yoga does not support CSS Block layout"),
     });
 
     // position

scripts/gentest/src/main.rs

@@ -331,6 +331,7 @@ fn generate_node(ident: &str, node: &Value) -> TokenStream {
     let display = match style["display"] {
         Value::String(ref value) => match value.as_ref() {
             "none" => quote!(display: taffy::style::Display::None,),
+            "block" => quote!(display: taffy::style::Display::Block,),
             "grid" => quote!(display: taffy::style::Display::Grid,),
             _ => quote!(display: taffy::style::Display::Flex,),
         },