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

1 files changed, 11 insertions, 0 deletions

diff --git a/components/layout_2020/flexbox.rs b/components/layout_2020/flexbox.rs
index 154c9ab3071..7a7b7414f5d 100644
--- a/components/layout_2020/flexbox.rs
+++ b/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,
         }