mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Auto merge of #29730 - stshine:flexbox-align-content, r=Loirooriol
layout_2020: Implement align-content in flexbox Align all flex lines per `align-content`. <!-- Please describe your changes on the following line: --> --- <!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: --> - [x] `./mach build -d` does not report any errors - [x] `./mach test-tidy` does not report any errors <!-- Either: --> - [X] There are tests for these changes OR <!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.--> <!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
This commit is contained in:
bors-servo
GitHub
commit
84982ff1ff
22 changed files with 39 additions and 68 deletions
|
|
@ -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<Option<Length>>,
|
||||
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::<Length>();
|
||||
|
||||
// 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::<Length>()
|
||||
})
|
||||
.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
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[align-content-001.htm]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[align-content-003.htm]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[align-content-004.htm]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[align-content-005.htm]
|
||||
expected: FAIL
|
||||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[align-content_center.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[align-content_flex-end.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[align-content_space-around.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[align-content_space-between.html]
|
||||
expected: FAIL
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[flexbox-overflow-horiz-005.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[flexbox_align-content-center.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[flexbox_align-content-flexend.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[flexbox_align-content-spacearound.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[flexbox_align-content-spacebetween.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-content-center.html]
|
||||
[flexbox | computed style | align-content: center]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-content-flex-end.html]
|
||||
[flexbox | computed style | align-content: flex-end]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-content-flex-start.html]
|
||||
[flexbox | computed style | align-content: flex-start]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-content-space-around.html]
|
||||
[flexbox | computed style | align-content: space-around]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-content-space-between.html]
|
||||
[flexbox | computed style | align-content: space-between]
|
||||
expected: FAIL
|
||||
|
|
@ -13,6 +13,3 @@
|
|||
|
||||
[Property align-self has initial value auto]
|
||||
expected: FAIL
|
||||
|
||||
[Property align-content does not inherit]
|
||||
expected: FAIL
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue