mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
Auto merge of #11417 - stshine:flex-longhand-properties, r=mbrubeck
Support remaining longhand flexbox style properties for servo - [x] `./mach build -d` does not report any errors - [X] `./mach test-tidy --faster` does not report any errors - [X] There are tests for these changes Add the remaining longhand CSS properties of flexbox for servo, including `flex-wrap`, `flex-grow`, `flex-shrink`, `justify-content`, `align-items`, `align-self` and `align-content`. Tests for the remaining longhand properties are also enabled. Test for default value of `align-self` is modified because the new default value for this property is "auto" is current flexbox CR. <!-- Reviewable:start --> --- This change is [<img src="https://reviewable.io/review_button.svg" height="35" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/11417) <!-- Reviewable:end -->
This commit is contained in:
bors-servo
commit
f0b3d1e77d
44 changed files with 82 additions and 122 deletions
|
|
@ -220,8 +220,15 @@ pub fn compute_damage(old: Option<&Arc<ServoComputedValues>>, new: &ServoCompute
|
|||
get_inheritedtable.border_spacing,
|
||||
get_column.column_gap,
|
||||
get_position.flex_direction,
|
||||
get_position.flex_wrap,
|
||||
get_position.justify_content,
|
||||
get_position.align_items,
|
||||
get_position.align_content,
|
||||
get_position.order,
|
||||
get_position.flex_basis,
|
||||
get_position.order
|
||||
get_position.flex_grow,
|
||||
get_position.flex_shrink,
|
||||
get_position.align_self
|
||||
]) || add_if_not_equal!(old, new, damage,
|
||||
[ REPAINT, STORE_OVERFLOW, REFLOW_OUT_OF_FLOW ], [
|
||||
get_position.top, get_position.left,
|
||||
|
|
|
|||
|
|
@ -310,7 +310,21 @@ partial interface CSSStyleDeclaration {
|
|||
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexDirection;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-direction;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexWrap;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-wrap;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString justifyContent;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString justify-content;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString alignItems;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString align-items;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString alignContent;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString align-content;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString order;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexBasis;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-basis;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString order;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexGrow;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-grow;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexShrink;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-shrink;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString alignSelf;
|
||||
[SetterThrows, TreatNullAs=EmptyString] attribute DOMString align-self;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -63,10 +63,34 @@
|
|||
// Flex container properties
|
||||
${helpers.single_keyword("flex-direction", "row row-reverse column column-reverse", experimental=True)}
|
||||
|
||||
// Flex item properties
|
||||
${helpers.predefined_type("flex-grow", "Number", "0.0", "parse_non_negative", products="gecko")}
|
||||
${helpers.single_keyword("flex-wrap", "nowrap wrap wrap-reverse", experimental=True)}
|
||||
|
||||
${helpers.predefined_type("flex-shrink", "Number", "1.0", "parse_non_negative", products="gecko")}
|
||||
// FIXME(stshine): The type of 'justify-content' and 'align-content' is uint16_t in gecko
|
||||
// FIXME(stshine): Its higher bytes are used to store fallback value. Disable them in geckolib for now
|
||||
${helpers.single_keyword("justify-content", "flex-start flex-end center space-between space-around",
|
||||
experimental=True,
|
||||
gecko_constant_prefix="NS_STYLE_JUSTIFY",
|
||||
products="servo")}
|
||||
|
||||
${helpers.single_keyword("align-items", "stretch flex-start flex-end center baseline",
|
||||
experimental=True,
|
||||
need_clone=True,
|
||||
gecko_constant_prefix="NS_STYLE_ALIGN")}
|
||||
|
||||
${helpers.single_keyword("align-content", "stretch flex-start flex-end center space-between space-around",
|
||||
experimental=True,
|
||||
gecko_constant_prefix="NS_STYLE_ALIGN",
|
||||
products="servo")}
|
||||
|
||||
// Flex item properties
|
||||
${helpers.predefined_type("flex-grow", "Number", "0.0", "parse_non_negative", experimental=True)}
|
||||
|
||||
${helpers.predefined_type("flex-shrink", "Number", "1.0", "parse_non_negative", experimental=True)}
|
||||
|
||||
${helpers.single_keyword("align-self", "auto stretch flex-start flex-end center baseline",
|
||||
experimental=True,
|
||||
need_clone=True,
|
||||
gecko_constant_prefix="NS_STYLE_ALIGN")}
|
||||
|
||||
// https://drafts.csswg.org/css-flexbox/#propdef-order
|
||||
<%helpers:longhand name="order">
|
||||
|
|
@ -94,8 +118,6 @@ ${helpers.predefined_type("flex-basis",
|
|||
"LengthOrPercentageOrAutoOrContent",
|
||||
"computed::LengthOrPercentageOrAutoOrContent::Auto")}
|
||||
|
||||
${helpers.single_keyword("flex-wrap", "nowrap wrap wrap-reverse", products="gecko")}
|
||||
|
||||
${helpers.predefined_type("width",
|
||||
"LengthOrPercentageOrAuto",
|
||||
"computed::LengthOrPercentageOrAuto::Auto",
|
||||
|
|
|
|||
|
|
@ -1166,6 +1166,13 @@ pub mod style_structs {
|
|||
fn outline_has_nonzero_width(&self) -> bool {
|
||||
self.outline_width != ::app_units::Au(0)
|
||||
}
|
||||
% elif style_struct.trait_name == "Position":
|
||||
fn clone_align_items(&self) -> longhands::align_items::computed_value::T {
|
||||
self.align_items.clone()
|
||||
}
|
||||
fn clone_align_self(&self) -> longhands::align_self::computed_value::T {
|
||||
self.align_self.clone()
|
||||
}
|
||||
% elif style_struct.trait_name == "Text":
|
||||
<% text_decoration_field = 'text_decoration' if product == 'servo' else 'text_decoration_line' %>
|
||||
fn has_underline(&self) -> bool {
|
||||
|
|
@ -1892,6 +1899,23 @@ pub fn cascade<C: ComputedValues>(
|
|||
}
|
||||
}
|
||||
|
||||
{
|
||||
use self::style_struct_traits::Position;
|
||||
use computed_values::align_self::T as align_self;
|
||||
use computed_values::align_items::T as align_items;
|
||||
if style.get_position().clone_align_self() == computed_values::align_self::T::auto && !positioned {
|
||||
let self_align =
|
||||
match context.inherited_style.get_position().clone_align_items() {
|
||||
align_items::stretch => align_self::stretch,
|
||||
align_items::baseline => align_self::baseline,
|
||||
align_items::flex_start => align_self::flex_start,
|
||||
align_items::flex_end => align_self::flex_end,
|
||||
align_items::center => align_self::center,
|
||||
};
|
||||
style.mutate_position().set_align_self(self_align);
|
||||
}
|
||||
}
|
||||
|
||||
// The initial value of border-*-width may be changed at computed value time.
|
||||
% for side in ["top", "right", "bottom", "left"]:
|
||||
// Like calling to_computed_value, which wouldn't type check.
|
||||
|
|
|
|||
|
|
@ -20,4 +20,4 @@ body {
|
|||
"stretch";
|
||||
body.textContent = body.className = passed ? "PASS" : "FAIL";
|
||||
</script>
|
||||
</body></html>
|
||||
</body></html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
prefs: ["layout.flex.enabled:true",
|
||||
"layout.flex-direction.enabled:true",
|
||||
"layout.flex-wrap.enabled:true",
|
||||
"layout.flex-grow.enabled:true",
|
||||
"layout.flex-shrink.enabled:true",
|
||||
"layout.justify-content.enabled:true",
|
||||
"layout.align-items.enabled:true",
|
||||
"layout.align-self.enabled:true",
|
||||
"layout.align-content.enabled:true",
|
||||
"layout.columns.enabled:true",
|
||||
"layout.column-width.enabled:true",
|
||||
"layout.column-count.enabled:true",
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-content-center.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-content-flex-end.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-content-flex-start.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-content-space-around.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-content-space-between.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-items-baseline.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-items-center.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-items-flex-end.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-items-flex-start.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-items-invalid.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-items-stretch.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-self-baseline.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-self-center.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-self-flex-end.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-self-flex-start.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-self-invalid.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_align-self-stretch.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-flow-nowrap.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-flow-row-nowrap.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-flow-row.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-grow-0.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-grow-invalid.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-grow-number.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-shorthand-0-auto.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-shorthand-initial.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-shorthand-invalid.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-shrink-0.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-shrink-invalid.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-shrink-number.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-wrap-invalid.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-wrap-nowrap.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-wrap-wrap-reverse.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_flex-wrap-wrap.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_justify-content-center.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_justify-content-flex-end.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_justify-content-flex-start.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_justify-content-space-around.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[flexbox_computedstyle_justify-content-space-between.htm]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
Loading…
Add table
Add a link
Reference in a new issue