From 4a65dd0425f1ee799e5583da8223f040b024afd2 Mon Sep 17 00:00:00 2001 From: Pu Xingyu Date: Thu, 11 May 2023 00:38:38 +0800 Subject: [PATCH 1/2] layout_2020: Implement align-content in flexbox Align all flex lines per `align-content`. --- components/layout_2020/flexbox/layout.rs | 43 +++++++++++++++---- .../properties/longhands/position.mako.rs | 3 +- 2 files changed, 36 insertions(+), 10 deletions(-) diff --git a/components/layout_2020/flexbox/layout.rs b/components/layout_2020/flexbox/layout.rs index 983dcc79eff..8826622276c 100644 --- a/components/layout_2020/flexbox/layout.rs +++ b/components/layout_2020/flexbox/layout.rs @@ -17,6 +17,7 @@ use crate::style_ext::ComputedValuesExt; use crate::ContainingBlock; use atomic_refcell::AtomicRefMut; use std::cell::Cell; +use style::properties::longhands::align_content::computed_value::T as AlignContent; use style::properties::longhands::align_items::computed_value::T as AlignItems; use style::properties::longhands::align_self::computed_value::T as AlignSelf; use style::properties::longhands::box_sizing::computed_value::T as BoxSizing; @@ -46,6 +47,7 @@ struct FlexContext<'a> { flex_axis: FlexAxis, main_start_cross_start_sides_are: MainStartCrossStart, container_definite_inner_size: FlexRelativeVec2>, + align_content: AlignContent, align_items: AlignItems, justify_content: JustifyContent, } @@ -261,6 +263,7 @@ fn layout<'context, 'boxes>( FlexWrap::Nowrap | FlexWrap::Wrap => false, FlexWrap::WrapReverse => true, }; + let align_content = containing_block.style.clone_align_content(); let align_items = containing_block.style.clone_align_items(); let justify_content = containing_block.style.clone_justify_content(); @@ -272,6 +275,7 @@ fn layout<'context, 'boxes>( container_max_cross_size, container_is_single_line, flex_axis, + align_content, align_items, justify_content, main_start_cross_start_sides_are: MainStartCrossStart::from( @@ -315,30 +319,51 @@ fn layout<'context, 'boxes>( |flex_context, mut line| line.layout(flex_context, container_main_size), ); + let content_cross_size = flex_lines + .iter() + .map(|line| line.cross_size) + .sum::(); + // https://drafts.csswg.org/css-flexbox/#algo-cross-container let container_cross_size = flex_context .container_definite_inner_size .cross - .unwrap_or_else(|| { - flex_lines - .iter() - .map(|line| line.cross_size) - .sum::() - }) + .unwrap_or(content_cross_size) .clamp_between_extremums( flex_context.container_min_cross_size, flex_context.container_max_cross_size, ); // https://drafts.csswg.org/css-flexbox/#algo-line-align + // Align all flex lines per `align-content`. + let line_count = flex_lines.len(); let mut cross_start_position_cursor = Length::zero(); + + let line_interval = match flex_context.container_definite_inner_size.cross { + Some(cross_size) if line_count >= 2 => { + let free_space = cross_size - content_cross_size; + + cross_start_position_cursor = match flex_context.align_content { + AlignContent::Center => free_space / 2.0, + AlignContent::SpaceAround => free_space / (line_count * 2) as CSSFloat, + AlignContent::FlexEnd => free_space, + _ => Length::zero(), + }; + + match flex_context.align_content { + AlignContent::SpaceBetween => free_space / (line_count - 1) as CSSFloat, + AlignContent::SpaceAround => free_space / line_count as CSSFloat, + _ => Length::zero(), + } + }, + _ => Length::zero(), + }; + let line_cross_start_positions = flex_lines .iter() .map(|line| { - // FIXME: “Align all flex lines per `align-content`.” - // For now we hard-code the behavior of `align-content: flex-start`. let cross_start = cross_start_position_cursor; - let cross_end = cross_start + line.cross_size; + let cross_end = cross_start + line.cross_size + line_interval; cross_start_position_cursor = cross_end; cross_start }) diff --git a/components/style/properties/longhands/position.mako.rs b/components/style/properties/longhands/position.mako.rs index 700c964d289..df118faed1a 100644 --- a/components/style/properties/longhands/position.mako.rs +++ b/components/style/properties/longhands/position.mako.rs @@ -134,7 +134,8 @@ ${helpers.single_keyword( ${helpers.single_keyword( "align-content", "stretch flex-start flex-end center space-between space-around", - engines="servo-2013", + engines="servo-2013 servo-2020", + servo_2020_pref="layout.flexbox.enabled", extra_prefixes="webkit", spec="https://drafts.csswg.org/css-align/#propdef-align-content", animation_value_type="discrete", From ea599c88df52ac8f9c2323abbf1f2fb3d73aa4ce Mon Sep 17 00:00:00 2001 From: Pu Xingyu Date: Fri, 12 May 2023 22:29:17 +0800 Subject: [PATCH 2/2] Update wpt expectations --- .../css/css-flexbox/align-content-001.htm.ini | 2 -- .../css/css-flexbox/align-content-003.htm.ini | 2 -- .../css/css-flexbox/align-content-004.htm.ini | 2 -- .../css/css-flexbox/align-content-005.htm.ini | 2 -- .../css-flexbox/align-content-wrap-003.html.ini | 17 +---------------- .../css-flexbox/align-content_center.html.ini | 2 -- .../css-flexbox/align-content_flex-end.html.ini | 2 -- .../align-content_space-around.html.ini | 2 -- .../align-content_space-between.html.ini | 2 -- .../flexbox-overflow-horiz-005.html.ini | 2 ++ .../flexbox_align-content-center.html.ini | 2 -- .../flexbox_align-content-flexend.html.ini | 2 -- .../flexbox_align-content-spacearound.html.ini | 2 -- .../flexbox_align-content-spacebetween.html.ini | 2 -- ..._computedstyle_align-content-center.html.ini | 3 --- ...omputedstyle_align-content-flex-end.html.ini | 3 --- ...putedstyle_align-content-flex-start.html.ini | 3 --- ...tedstyle_align-content-space-around.html.ini | 3 --- ...edstyle_align-content-space-between.html.ini | 3 --- .../css/css-flexbox/inheritance.html.ini | 3 --- 20 files changed, 3 insertions(+), 58 deletions(-) delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-001.htm.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-003.htm.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-004.htm.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-005.htm.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_center.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_flex-end.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_space-around.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_space-between.html.ini create mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox-overflow-horiz-005.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-center.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-flexend.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-spacearound.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-spacebetween.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html.ini delete mode 100644 tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html.ini diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-001.htm.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-001.htm.ini deleted file mode 100644 index 3eaae3ecb0a..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-001.htm.ini +++ /dev/null @@ -1,2 +0,0 @@ -[align-content-001.htm] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-003.htm.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-003.htm.ini deleted file mode 100644 index c99360ef7b2..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-003.htm.ini +++ /dev/null @@ -1,2 +0,0 @@ -[align-content-003.htm] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-004.htm.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-004.htm.ini deleted file mode 100644 index a76cf0d4042..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-004.htm.ini +++ /dev/null @@ -1,2 +0,0 @@ -[align-content-004.htm] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-005.htm.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-005.htm.ini deleted file mode 100644 index d7ac90ebe57..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-005.htm.ini +++ /dev/null @@ -1,2 +0,0 @@ -[align-content-005.htm] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-wrap-003.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-wrap-003.html.ini index 93449dd271a..d28d10da3d9 100644 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-wrap-003.html.ini +++ b/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content-wrap-003.html.ini @@ -1,38 +1,23 @@ [align-content-wrap-003.html] - [.flexbox 4] - expected: FAIL - - [.flexbox 5] - expected: FAIL - [.flexbox 6] expected: FAIL - [.flexbox 7] - expected: FAIL - [.flexbox 1] expected: FAIL - [.flexbox 3] - expected: FAIL - [.flexbox 33] expected: FAIL [.flexbox 8] expected: FAIL - [.flexbox 9] - expected: FAIL - [.flexbox 12] expected: FAIL [.flexbox 13] expected: FAIL - [.flexbox 10] + [.flexbox 11] expected: FAIL [.flexbox 34] diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_center.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_center.html.ini deleted file mode 100644 index 0a9ab0c7ec0..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_center.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[align-content_center.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_flex-end.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_flex-end.html.ini deleted file mode 100644 index 09bf35f5c85..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_flex-end.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[align-content_flex-end.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_space-around.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_space-around.html.ini deleted file mode 100644 index 005c0749c2d..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_space-around.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[align-content_space-around.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_space-between.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_space-between.html.ini deleted file mode 100644 index a71f5561e54..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/align-content_space-between.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[align-content_space-between.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox-overflow-horiz-005.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox-overflow-horiz-005.html.ini new file mode 100644 index 00000000000..69675b8e98a --- /dev/null +++ b/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox-overflow-horiz-005.html.ini @@ -0,0 +1,2 @@ +[flexbox-overflow-horiz-005.html] + expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-center.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-center.html.ini deleted file mode 100644 index 55004a54488..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-center.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[flexbox_align-content-center.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-flexend.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-flexend.html.ini deleted file mode 100644 index aab5d031c1d..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-flexend.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[flexbox_align-content-flexend.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-spacearound.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-spacearound.html.ini deleted file mode 100644 index 47f41684221..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-spacearound.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[flexbox_align-content-spacearound.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-spacebetween.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-spacebetween.html.ini deleted file mode 100644 index f4f3ea298f6..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/flexbox_align-content-spacebetween.html.ini +++ /dev/null @@ -1,2 +0,0 @@ -[flexbox_align-content-spacebetween.html] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html.ini deleted file mode 100644 index 43b27ae0436..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-center.html.ini +++ /dev/null @@ -1,3 +0,0 @@ -[flexbox_computedstyle_align-content-center.html] - [flexbox | computed style | align-content: center] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html.ini deleted file mode 100644 index 799f07abe63..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-end.html.ini +++ /dev/null @@ -1,3 +0,0 @@ -[flexbox_computedstyle_align-content-flex-end.html] - [flexbox | computed style | align-content: flex-end] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html.ini deleted file mode 100644 index f4e85204580..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html.ini +++ /dev/null @@ -1,3 +0,0 @@ -[flexbox_computedstyle_align-content-flex-start.html] - [flexbox | computed style | align-content: flex-start] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html.ini deleted file mode 100644 index 2ad2853cd86..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-around.html.ini +++ /dev/null @@ -1,3 +0,0 @@ -[flexbox_computedstyle_align-content-space-around.html] - [flexbox | computed style | align-content: space-around] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html.ini deleted file mode 100644 index 5ea0ab93325..00000000000 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-space-between.html.ini +++ /dev/null @@ -1,3 +0,0 @@ -[flexbox_computedstyle_align-content-space-between.html] - [flexbox | computed style | align-content: space-between] - expected: FAIL diff --git a/tests/wpt/metadata-layout-2020/css/css-flexbox/inheritance.html.ini b/tests/wpt/metadata-layout-2020/css/css-flexbox/inheritance.html.ini index 092f68c0316..40bc39ab2bd 100644 --- a/tests/wpt/metadata-layout-2020/css/css-flexbox/inheritance.html.ini +++ b/tests/wpt/metadata-layout-2020/css/css-flexbox/inheritance.html.ini @@ -13,6 +13,3 @@ [Property align-self has initial value auto] expected: FAIL - - [Property align-content does not inherit] - expected: FAIL