Keep flex items in order-modified document order in the box tree

components/layout_2020/flexbox.rs

@@ -185,6 +185,17 @@ where
 
     fn finish(mut self) -> FlexContainer {
         self.wrap_any_text_in_anonymous_block_container();
+
+        // https://drafts.csswg.org/css-flexbox/#order-modified-document-order
+        self.children.sort_by_key(|child| match &*child.borrow() {
+            FlexLevelBox::FlexItem(item) => item.style.clone_order(),
+
+            // “Absolutely-positioned children of a flex container are treated
+            //  as having order: 0 for the purpose of determining their painting order
+            //  relative to flex items.”
+            FlexLevelBox::OutOfFlowAbsolutelyPositionedBox(_) => 0,
+        });
+
         FlexContainer {
             children: self.children,
         }

components/style/properties/longhands/position.mako.rs

@@ -266,7 +266,8 @@ ${helpers.predefined_type(
     "order",
     "Integer",
     "0",
-    engines="gecko servo-2013",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
     extra_prefixes="webkit",
     animation_value_type="ComputedValue",
     spec="https://drafts.csswg.org/css-flexbox/#order-property",