From 9d6e1f67fbe06fc56131d85da99ca4dc1380d007 Mon Sep 17 00:00:00 2001 From: Oriol Brufau Date: Thu, 3 Apr 2025 08:47:56 -0700 Subject: [PATCH] layout: Improve style conversion for Taffy (#36311) This imports the following changes from Blitz: - Map position:sticky to relative rather than absolute position https://github.com/DioxusLabs/blitz/commit/16a7c1654455bee62e83854f83304a2931b29a0d - Map left and right alignment from Stylo https://github.com/DioxusLabs/blitz/commit/c71cc681d8c877dbd30853b3c4a2a7449c6450e4 - Improve mapping of align-items/self https://github.com/DioxusLabs/blitz/commit/7bf2a25e756c1310a9e4603b4757e20548b961e2 Fixes: #35998 Testing: - `/css/css-grid/alignment/grid-align-justify-margin-border-padding.html` - `/css/css-grid/alignment/grid-align.html` - `/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html` - `/css/css-grid/alignment/grid-gutters-and-alignment.html` - `/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html` - `/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html` - `/css/css-grid/alignment/grid-self-alignment.html` Signed-off-by: Oriol Brufau --- .../layout_2020/taffy/stylo_taffy/convert.rs | 10 +++- ...ign-justify-margin-border-padding.html.ini | 6 --- .../css-grid/alignment/grid-align.html.ini | 9 ---- ...nment-sticky-positioned-items-001.html.ini | 6 --- .../grid-gutters-and-alignment.html.ini | 3 -- ...m-alignment-with-orthogonal-flows.html.ini | 3 -- ...nment-sticky-positioned-items-001.html.ini | 6 --- .../alignment/grid-self-alignment.html.ini | 54 +++++++------------ 8 files changed, 26 insertions(+), 71 deletions(-) delete mode 100644 tests/wpt/meta/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html.ini delete mode 100644 tests/wpt/meta/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html.ini diff --git a/components/layout_2020/taffy/stylo_taffy/convert.rs b/components/layout_2020/taffy/stylo_taffy/convert.rs index 29e76b516ad..03fbec292a4 100644 --- a/components/layout_2020/taffy/stylo_taffy/convert.rs +++ b/components/layout_2020/taffy/stylo_taffy/convert.rs @@ -138,7 +138,7 @@ pub fn position(input: stylo::Position) -> taffy::Position { // TODO: support position:fixed and sticky stylo::Position::Absolute => taffy::Position::Absolute, stylo::Position::Fixed => taffy::Position::Absolute, - stylo::Position::Sticky => taffy::Position::Absolute, + stylo::Position::Sticky => taffy::Position::Relative, } } @@ -170,6 +170,8 @@ pub fn content_alignment(input: stylo::ContentDistribution) -> Option None, stylo::AlignFlags::START => Some(taffy::AlignContent::Start), stylo::AlignFlags::END => Some(taffy::AlignContent::End), + stylo::AlignFlags::LEFT => Some(taffy::AlignContent::Start), + stylo::AlignFlags::RIGHT => Some(taffy::AlignContent::End), stylo::AlignFlags::FLEX_START => Some(taffy::AlignContent::FlexStart), stylo::AlignFlags::STRETCH => Some(taffy::AlignContent::Stretch), stylo::AlignFlags::FLEX_END => Some(taffy::AlignContent::FlexEnd), @@ -185,13 +187,17 @@ pub fn content_alignment(input: stylo::ContentDistribution) -> Option Option { match input.value() { - stylo::AlignFlags::NORMAL => None, stylo::AlignFlags::AUTO => None, + stylo::AlignFlags::NORMAL => Some(taffy::AlignItems::Stretch), stylo::AlignFlags::STRETCH => Some(taffy::AlignItems::Stretch), stylo::AlignFlags::FLEX_START => Some(taffy::AlignItems::FlexStart), stylo::AlignFlags::FLEX_END => Some(taffy::AlignItems::FlexEnd), + stylo::AlignFlags::SELF_START => Some(taffy::AlignItems::Start), + stylo::AlignFlags::SELF_END => Some(taffy::AlignItems::End), stylo::AlignFlags::START => Some(taffy::AlignItems::Start), stylo::AlignFlags::END => Some(taffy::AlignItems::End), + stylo::AlignFlags::LEFT => Some(taffy::AlignItems::Start), + stylo::AlignFlags::RIGHT => Some(taffy::AlignItems::End), stylo::AlignFlags::CENTER => Some(taffy::AlignItems::Center), stylo::AlignFlags::BASELINE => Some(taffy::AlignItems::Baseline), // Should never be hit. But no real reason to panic here. diff --git a/tests/wpt/meta/css/css-grid/alignment/grid-align-justify-margin-border-padding.html.ini b/tests/wpt/meta/css/css-grid/alignment/grid-align-justify-margin-border-padding.html.ini index 1314f9be848..1f268abd52f 100644 --- a/tests/wpt/meta/css/css-grid/alignment/grid-align-justify-margin-border-padding.html.ini +++ b/tests/wpt/meta/css/css-grid/alignment/grid-align-justify-margin-border-padding.html.ini @@ -1,16 +1,10 @@ [grid-align-justify-margin-border-padding.html] - [.grid 5] - expected: FAIL - [.grid 6] expected: FAIL [.grid 7] expected: FAIL - [.grid 9] - expected: FAIL - [.grid 10] expected: FAIL diff --git a/tests/wpt/meta/css/css-grid/alignment/grid-align.html.ini b/tests/wpt/meta/css/css-grid/alignment/grid-align.html.ini index 362cdf621ee..4ca7e52511d 100644 --- a/tests/wpt/meta/css/css-grid/alignment/grid-align.html.ini +++ b/tests/wpt/meta/css/css-grid/alignment/grid-align.html.ini @@ -1,19 +1,10 @@ [grid-align.html] - [.grid 2] - expected: FAIL - - [.grid 3] - expected: FAIL - [.grid 5] expected: FAIL [.grid 6] expected: FAIL - [.grid 8] - expected: FAIL - [.grid 9] expected: FAIL diff --git a/tests/wpt/meta/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html.ini b/tests/wpt/meta/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html.ini deleted file mode 100644 index 354579885d4..00000000000 --- a/tests/wpt/meta/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html.ini +++ /dev/null @@ -1,6 +0,0 @@ -[grid-column-axis-alignment-sticky-positioned-items-001.html] - [.grid 1] - expected: FAIL - - [.grid 2] - expected: FAIL diff --git a/tests/wpt/meta/css/css-grid/alignment/grid-gutters-and-alignment.html.ini b/tests/wpt/meta/css/css-grid/alignment/grid-gutters-and-alignment.html.ini index 96c772addd3..0bc7df22bcc 100644 --- a/tests/wpt/meta/css/css-grid/alignment/grid-gutters-and-alignment.html.ini +++ b/tests/wpt/meta/css/css-grid/alignment/grid-gutters-and-alignment.html.ini @@ -1,7 +1,4 @@ [grid-gutters-and-alignment.html] - [.grid 1] - expected: FAIL - [.grid 2] expected: FAIL diff --git a/tests/wpt/meta/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html.ini b/tests/wpt/meta/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html.ini index e764ab71db8..76893560457 100644 --- a/tests/wpt/meta/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html.ini +++ b/tests/wpt/meta/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html.ini @@ -11,9 +11,6 @@ [.grid 4] expected: FAIL - [.grid 5] - expected: FAIL - [.grid 6] expected: FAIL diff --git a/tests/wpt/meta/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html.ini b/tests/wpt/meta/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html.ini deleted file mode 100644 index cd685823cd5..00000000000 --- a/tests/wpt/meta/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html.ini +++ /dev/null @@ -1,6 +0,0 @@ -[grid-row-axis-alignment-sticky-positioned-items-001.html] - [.grid 1] - expected: FAIL - - [.grid 2] - expected: FAIL diff --git a/tests/wpt/meta/css/css-grid/alignment/grid-self-alignment.html.ini b/tests/wpt/meta/css/css-grid/alignment/grid-self-alignment.html.ini index 1df4c4398de..258442c0bf3 100644 --- a/tests/wpt/meta/css/css-grid/alignment/grid-self-alignment.html.ini +++ b/tests/wpt/meta/css/css-grid/alignment/grid-self-alignment.html.ini @@ -1,16 +1,10 @@ [grid-self-alignment.html] - [.child 2] - expected: FAIL - [.child 3] expected: FAIL [.child 4] expected: FAIL - [.child 6] - expected: FAIL - [.child 7] expected: FAIL @@ -26,15 +20,9 @@ [.child 11] expected: FAIL - [.child 14] - expected: FAIL - [.child 16] expected: FAIL - [.child 18] - expected: FAIL - [.child 19] expected: FAIL @@ -44,18 +32,12 @@ [.child 23] expected: FAIL - [.child 26] - expected: FAIL - [.child 27] expected: FAIL [.child 28] expected: FAIL - [.child 30] - expected: FAIL - [.child 31] expected: FAIL @@ -71,15 +53,9 @@ [.child 35] expected: FAIL - [.child 38] - expected: FAIL - [.child 40] expected: FAIL - [.child 42] - expected: FAIL - [.child 43] expected: FAIL @@ -89,18 +65,12 @@ [.child 47] expected: FAIL - [.child 50] - expected: FAIL - [.child 51] expected: FAIL [.child 52] expected: FAIL - [.child 54] - expected: FAIL - [.child 55] expected: FAIL @@ -116,15 +86,9 @@ [.child 59] expected: FAIL - [.child 62] - expected: FAIL - [.child 64] expected: FAIL - [.child 66] - expected: FAIL - [.child 67] expected: FAIL @@ -160,3 +124,21 @@ [.child 69] expected: FAIL + + [.child 12] + expected: FAIL + + [.child 24] + expected: FAIL + + [.child 36] + expected: FAIL + + [.child 48] + expected: FAIL + + [.child 60] + expected: FAIL + + [.child 72] + expected: FAIL