implement flexbox wrap-reverse
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 8 Mar 2012 22:55:53 +0000 (22:55 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 8 Mar 2012 22:55:53 +0000 (22:55 +0000)
https://bugs.webkit.org/show_bug.cgi?id=80552

Reviewed by Ojan Vafai.

Source/WebCore:

No new tests, but additional coverage in:
    css3/flexbox/multiline-align.html
    css3/flexbox/multiline-pack.html
    css3/flexbox/multiline.html

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::WrapReverseContext::WrapReverseContext): Helper struct to hold information needed for reversing
the order of lines.
(RenderFlexibleBox::WrapReverseContext):
(WebCore::RenderFlexibleBox::WrapReverseContext::addCrossAxisOffset):
(WebCore::RenderFlexibleBox::WrapReverseContext::addNumberOfChildrenOnLine):
(WebCore::RenderFlexibleBox::WrapReverseContext::lineCrossAxisDelta): Computes the number of pixels to move a line.
(WebCore):
(WebCore::RenderFlexibleBox::layoutFlexItems): Call flipForWrapReverse if needed. This happens
before flipForRightToLeftColumn because otherwise the crossAxisOffsets will be wrong.
(WebCore::flexAlignForChild):
(WebCore::RenderFlexibleBox::alignChildren): Flip alignment in wrap-reverse because the cross directions are flipped.
(WebCore::RenderFlexibleBox::flipForWrapReverse): Flip each line.
* rendering/RenderFlexibleBox.h:
(RenderFlexibleBox):

LayoutTests:

* css3/flexbox/multiline-align-expected.txt:
* css3/flexbox/multiline-align.html:
* css3/flexbox/multiline-expected.txt:
* css3/flexbox/multiline-pack-expected.txt:
* css3/flexbox/multiline-pack.html:
* css3/flexbox/multiline.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@110209 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/multiline-align-expected.txt
LayoutTests/css3/flexbox/multiline-align.html
LayoutTests/css3/flexbox/multiline-expected.txt
LayoutTests/css3/flexbox/multiline-pack-expected.txt
LayoutTests/css3/flexbox/multiline-pack.html
LayoutTests/css3/flexbox/multiline.html
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderFlexibleBox.h

index f6c4346..000442a 100644 (file)
@@ -1,3 +1,17 @@
+2012-03-08  Tony Chang  <tony@chromium.org>
+
+        implement flexbox wrap-reverse
+        https://bugs.webkit.org/show_bug.cgi?id=80552
+
+        Reviewed by Ojan Vafai.
+
+        * css3/flexbox/multiline-align-expected.txt:
+        * css3/flexbox/multiline-align.html:
+        * css3/flexbox/multiline-expected.txt:
+        * css3/flexbox/multiline-pack-expected.txt:
+        * css3/flexbox/multiline-pack.html:
+        * css3/flexbox/multiline.html:
+
 2012-03-07  Ojan Vafai  <ojan@chromium.org>
 
         More Chromium Lion rebaselines as well as some fixes for
index 7480b4f..0456908 100644 (file)
 horizontal-tb ltr row wrap
 PASS
+horizontal-tb ltr row wrap-reverse
+PASS
 horizontal-tb rtl row wrap
 PASS
+horizontal-tb rtl row wrap-reverse
+PASS
 horizontal-tb ltr column wrap
 PASS
+horizontal-tb ltr column wrap-reverse
+PASS
 horizontal-tb rtl column wrap
 PASS
+horizontal-tb rtl column wrap-reverse
+PASS
 horizontal-tb ltr row-reverse wrap
 PASS
+horizontal-tb ltr row-reverse wrap-reverse
+PASS
 horizontal-tb rtl row-reverse wrap
 PASS
+horizontal-tb rtl row-reverse wrap-reverse
+PASS
 horizontal-tb ltr column-reverse wrap
 PASS
+horizontal-tb ltr column-reverse wrap-reverse
+PASS
 horizontal-tb rtl column-reverse wrap
 PASS
+horizontal-tb rtl column-reverse wrap-reverse
+PASS
 horizontal-bt ltr row wrap
 PASS
+horizontal-bt ltr row wrap-reverse
+PASS
 horizontal-bt rtl row wrap
 PASS
+horizontal-bt rtl row wrap-reverse
+PASS
 horizontal-bt ltr column wrap
 PASS
+horizontal-bt ltr column wrap-reverse
+PASS
 horizontal-bt rtl column wrap
 PASS
+horizontal-bt rtl column wrap-reverse
+PASS
 horizontal-bt ltr row-reverse wrap
 PASS
+horizontal-bt ltr row-reverse wrap-reverse
+PASS
 horizontal-bt rtl row-reverse wrap
 PASS
+horizontal-bt rtl row-reverse wrap-reverse
+PASS
 horizontal-bt ltr column-reverse wrap
 PASS
+horizontal-bt ltr column-reverse wrap-reverse
+PASS
 horizontal-bt rtl column-reverse wrap
 PASS
+horizontal-bt rtl column-reverse wrap-reverse
+PASS
 vertical-rl ltr row wrap
 PASS
+vertical-rl ltr row wrap-reverse
+PASS
 vertical-rl rtl row wrap
 PASS
+vertical-rl rtl row wrap-reverse
+PASS
 vertical-rl ltr column wrap
 PASS
+vertical-rl ltr column wrap-reverse
+PASS
 vertical-rl rtl column wrap
 PASS
+vertical-rl rtl column wrap-reverse
+PASS
 vertical-rl ltr row-reverse wrap
 PASS
+vertical-rl ltr row-reverse wrap-reverse
+PASS
 vertical-rl rtl row-reverse wrap
 PASS
+vertical-rl rtl row-reverse wrap-reverse
+PASS
 vertical-rl ltr column-reverse wrap
 PASS
+vertical-rl ltr column-reverse wrap-reverse
+PASS
 vertical-rl rtl column-reverse wrap
 PASS
+vertical-rl rtl column-reverse wrap-reverse
+PASS
 vertical-lr ltr row wrap
 PASS
+vertical-lr ltr row wrap-reverse
+PASS
 vertical-lr rtl row wrap
 PASS
+vertical-lr rtl row wrap-reverse
+PASS
 vertical-lr ltr column wrap
 PASS
+vertical-lr ltr column wrap-reverse
+PASS
 vertical-lr rtl column wrap
 PASS
+vertical-lr rtl column wrap-reverse
+PASS
 vertical-lr ltr row-reverse wrap
 PASS
+vertical-lr ltr row-reverse wrap-reverse
+PASS
 vertical-lr rtl row-reverse wrap
 PASS
+vertical-lr rtl row-reverse wrap-reverse
+PASS
 vertical-lr ltr column-reverse wrap
 PASS
+vertical-lr ltr column-reverse wrap-reverse
+PASS
 vertical-lr rtl column-reverse wrap
 PASS
+vertical-lr rtl column-reverse wrap-reverse
+PASS
index 6b867b6..541c38c 100644 (file)
@@ -119,6 +119,23 @@ var expectations = {
                     'child13': [10, 30, 50, 30],
                     'child14': [10, 30, 60, 30],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 0, 50],
+                    'child2': [10, 10, 10, 40],
+                    'child3': [10, 10, 20, 30],
+                    'child4': [10, 10, 30, 50],
+                    'child5': [10, 10, 40, 50],
+                    'child6': [10, 30, 50, 30],
+                    'child7': [10, 30, 60, 30],
+                    'child8': [10, 10, 0, 20],
+                    'child9': [10, 10, 10, 10],
+                    'child10': [10, 10, 20, 0],
+                    'child11': [10, 10, 30, 20],
+                    'child12': [10, 10, 40, 20],
+                    'child13': [10, 30, 50, 0],
+                    'child14': [10, 30, 60, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -138,6 +155,23 @@ var expectations = {
                     'child13': [10, 30, 10, 30],
                     'child14': [10, 30, 0, 30],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 60, 50],
+                    'child2': [10, 10, 50, 40],
+                    'child3': [10, 10, 40, 30],
+                    'child4': [10, 10, 30, 50],
+                    'child5': [10, 10, 20, 50],
+                    'child6': [10, 30, 10, 30],
+                    'child7': [10, 30, 0, 30],
+                    'child8': [10, 10, 60, 20],
+                    'child9': [10, 10, 50, 10],
+                    'child10': [10, 10, 40, 0],
+                    'child11': [10, 10, 30, 20],
+                    'child12': [10, 10, 20, 20],
+                    'child13': [10, 30, 10, 0],
+                    'child14': [10, 30, 0, 0],
+                },
             },
         },
         'column': {
@@ -159,6 +193,23 @@ var expectations = {
                     'child13': [30, 10, 30, 50],
                     'child14': [30, 10, 30, 60],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 70],
+                    'child1': [10, 10, 590, 0],
+                    'child2': [10, 10, 580, 10],
+                    'child3': [10, 10, 570, 20],
+                    'child4': [10, 10, 590, 30],
+                    'child5': [10, 10, 590, 40],
+                    'child6': [30, 10, 570, 50],
+                    'child7': [30, 10, 570, 60],
+                    'child8': [10, 10, 560, 0],
+                    'child9': [10, 10, 550, 10],
+                    'child10': [10, 10, 540, 20],
+                    'child11': [10, 10, 560, 30],
+                    'child12': [10, 10, 560, 40],
+                    'child13': [30, 10, 540, 50],
+                    'child14': [30, 10, 540, 60],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -178,6 +229,23 @@ var expectations = {
                     'child13': [30, 10, 540, 50],
                     'child14': [30, 10, 540, 60],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 70],
+                    'child1': [10, 10, 0, 0],
+                    'child2': [10, 10, 10, 10],
+                    'child3': [10, 10, 20, 20],
+                    'child4': [10, 10, 0, 30],
+                    'child5': [10, 10, 0, 40],
+                    'child6': [30, 10, 0, 50],
+                    'child7': [30, 10, 0, 60],
+                    'child8': [10, 10, 30, 0],
+                    'child9': [10, 10, 40, 10],
+                    'child10': [10, 10, 50, 20],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 30, 40],
+                    'child13': [30, 10, 30, 50],
+                    'child14': [30, 10, 30, 60],
+                },
             },
         },
         'row-reverse': {
@@ -199,6 +267,23 @@ var expectations = {
                     'child13': [10, 30, 10, 30],
                     'child14': [10, 30, 0, 30],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 60, 50],
+                    'child2': [10, 10, 50, 40],
+                    'child3': [10, 10, 40, 30],
+                    'child4': [10, 10, 30, 50],
+                    'child5': [10, 10, 20, 50],
+                    'child6': [10, 30, 10, 30],
+                    'child7': [10, 30, 0, 30],
+                    'child8': [10, 10, 60, 20],
+                    'child9': [10, 10, 50, 10],
+                    'child10': [10, 10, 40, 0],
+                    'child11': [10, 10, 30, 20],
+                    'child12': [10, 10, 20, 20],
+                    'child13': [10, 30, 10, 0],
+                    'child14': [10, 30, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -218,6 +303,23 @@ var expectations = {
                     'child13': [10, 30, 50, 30],
                     'child14': [10, 30, 60, 30],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 0, 50],
+                    'child2': [10, 10, 10, 40],
+                    'child3': [10, 10, 20, 30],
+                    'child4': [10, 10, 30, 50],
+                    'child5': [10, 10, 40, 50],
+                    'child6': [10, 30, 50, 30],
+                    'child7': [10, 30, 60, 30],
+                    'child8': [10, 10, 0, 20],
+                    'child9': [10, 10, 10, 10],
+                    'child10': [10, 10, 20, 0],
+                    'child11': [10, 10, 30, 20],
+                    'child12': [10, 10, 40, 20],
+                    'child13': [10, 30, 50, 0],
+                    'child14': [10, 30, 60, 0],
+                },
             },
         },
         'column-reverse': {
@@ -239,6 +341,23 @@ var expectations = {
                     'child13': [30, 10, 30, 10],
                     'child14': [30, 10, 30, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 70],
+                    'child1': [10, 10, 590, 60],
+                    'child2': [10, 10, 580, 50],
+                    'child3': [10, 10, 570, 40],
+                    'child4': [10, 10, 590, 30],
+                    'child5': [10, 10, 590, 20],
+                    'child6': [30, 10, 570, 10],
+                    'child7': [30, 10, 570, 0],
+                    'child8': [10, 10, 560, 60],
+                    'child9': [10, 10, 550, 50],
+                    'child10': [10, 10, 540, 40],
+                    'child11': [10, 10, 560, 30],
+                    'child12': [10, 10, 560, 20],
+                    'child13': [30, 10, 540, 10],
+                    'child14': [30, 10, 540, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -258,6 +377,23 @@ var expectations = {
                     'child13': [30, 10, 540, 10],
                     'child14': [30, 10, 540, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 70],
+                    'child1': [10, 10, 0, 60],
+                    'child2': [10, 10, 10, 50],
+                    'child3': [10, 10, 20, 40],
+                    'child4': [10, 10, 0, 30],
+                    'child5': [10, 10, 0, 20],
+                    'child6': [30, 10, 0, 10],
+                    'child7': [30, 10, 0, 0],
+                    'child8': [10, 10, 30, 60],
+                    'child9': [10, 10, 40, 50],
+                    'child10': [10, 10, 50, 40],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 30, 20],
+                    'child13': [30, 10, 30, 10],
+                    'child14': [30, 10, 30, 0],
+                },
             },
         },
     },
@@ -281,6 +417,23 @@ var expectations = {
                     'child13': [10, 30, 50, 0],
                     'child14': [10, 30, 60, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 0, 0],
+                    'child2': [10, 10, 10, 10],
+                    'child3': [10, 10, 20, 20],
+                    'child4': [10, 10, 30, 0],
+                    'child5': [10, 10, 40, 0],
+                    'child6': [10, 30, 50, 0],
+                    'child7': [10, 30, 60, 0],
+                    'child8': [10, 10, 0, 30],
+                    'child9': [10, 10, 10, 40],
+                    'child10': [10, 10, 20, 50],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 40, 30],
+                    'child13': [10, 30, 50, 30],
+                    'child14': [10, 30, 60, 30],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -300,6 +453,23 @@ var expectations = {
                     'child13': [10, 30, 10, 0],
                     'child14': [10, 30, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 60, 0],
+                    'child2': [10, 10, 50, 10],
+                    'child3': [10, 10, 40, 20],
+                    'child4': [10, 10, 30, 0],
+                    'child5': [10, 10, 20, 0],
+                    'child6': [10, 30, 10, 0],
+                    'child7': [10, 30, 0, 0],
+                    'child8': [10, 10, 60, 30],
+                    'child9': [10, 10, 50, 40],
+                    'child10': [10, 10, 40, 50],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 20, 30],
+                    'child13': [10, 30, 10, 30],
+                    'child14': [10, 30, 0, 30],
+                },
             },
         },
         'column': {
@@ -321,6 +491,23 @@ var expectations = {
                     'child13': [30, 10, 30, 10],
                     'child14': [30, 10, 30, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 70],
+                    'child1': [10, 10, 590, 60],
+                    'child2': [10, 10, 580, 50],
+                    'child3': [10, 10, 570, 40],
+                    'child4': [10, 10, 590, 30],
+                    'child5': [10, 10, 590, 20],
+                    'child6': [30, 10, 570, 10],
+                    'child7': [30, 10, 570, 0],
+                    'child8': [10, 10, 560, 60],
+                    'child9': [10, 10, 550, 50],
+                    'child10': [10, 10, 540, 40],
+                    'child11': [10, 10, 560, 30],
+                    'child12': [10, 10, 560, 20],
+                    'child13': [30, 10, 540, 10],
+                    'child14': [30, 10, 540, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -340,6 +527,23 @@ var expectations = {
                     'child13': [30, 10, 540, 10],
                     'child14': [30, 10, 540, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 70],
+                    'child1': [10, 10, 0, 60],
+                    'child2': [10, 10, 10, 50],
+                    'child3': [10, 10, 20, 40],
+                    'child4': [10, 10, 0, 30],
+                    'child5': [10, 10, 0, 20],
+                    'child6': [30, 10, 0, 10],
+                    'child7': [30, 10, 0, 0],
+                    'child8': [10, 10, 30, 60],
+                    'child9': [10, 10, 40, 50],
+                    'child10': [10, 10, 50, 40],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 30, 20],
+                    'child13': [30, 10, 30, 10],
+                    'child14': [30, 10, 30, 0],
+                },
             },
         },
         'row-reverse': {
@@ -361,6 +565,23 @@ var expectations = {
                     'child13': [10, 30, 10, 0],
                     'child14': [10, 30, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 60, 0],
+                    'child2': [10, 10, 50, 10],
+                    'child3': [10, 10, 40, 20],
+                    'child4': [10, 10, 30, 0],
+                    'child5': [10, 10, 20, 0],
+                    'child6': [10, 30, 10, 0],
+                    'child7': [10, 30, 0, 0],
+                    'child8': [10, 10, 60, 30],
+                    'child9': [10, 10, 50, 40],
+                    'child10': [10, 10, 40, 50],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 20, 30],
+                    'child13': [10, 30, 10, 30],
+                    'child14': [10, 30, 0, 30],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -380,6 +601,23 @@ var expectations = {
                     'child13': [10, 30, 50, 0],
                     'child14': [10, 30, 60, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 0, 0],
+                    'child2': [10, 10, 10, 10],
+                    'child3': [10, 10, 20, 20],
+                    'child4': [10, 10, 30, 0],
+                    'child5': [10, 10, 40, 0],
+                    'child6': [10, 30, 50, 0],
+                    'child7': [10, 30, 60, 0],
+                    'child8': [10, 10, 0, 30],
+                    'child9': [10, 10, 10, 40],
+                    'child10': [10, 10, 20, 50],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 40, 30],
+                    'child13': [10, 30, 50, 30],
+                    'child14': [10, 30, 60, 30],
+                },
             },
         },
         'column-reverse': {
@@ -401,6 +639,23 @@ var expectations = {
                     'child13': [30, 10, 30, 50],
                     'child14': [30, 10, 30, 60],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 70],
+                    'child1': [10, 10, 590, 0],
+                    'child2': [10, 10, 580, 10],
+                    'child3': [10, 10, 570, 20],
+                    'child4': [10, 10, 590, 30],
+                    'child5': [10, 10, 590, 40],
+                    'child6': [30, 10, 570, 50],
+                    'child7': [30, 10, 570, 60],
+                    'child8': [10, 10, 560, 0],
+                    'child9': [10, 10, 550, 10],
+                    'child10': [10, 10, 540, 20],
+                    'child11': [10, 10, 560, 30],
+                    'child12': [10, 10, 560, 40],
+                    'child13': [30, 10, 540, 50],
+                    'child14': [30, 10, 540, 60],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -420,6 +675,23 @@ var expectations = {
                     'child13': [30, 10, 540, 50],
                     'child14': [30, 10, 540, 60],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 70],
+                    'child1': [10, 10, 0, 0],
+                    'child2': [10, 10, 10, 10],
+                    'child3': [10, 10, 20, 20],
+                    'child4': [10, 10, 0, 30],
+                    'child5': [10, 10, 0, 40],
+                    'child6': [30, 10, 0, 50],
+                    'child7': [30, 10, 0, 60],
+                    'child8': [10, 10, 30, 0],
+                    'child9': [10, 10, 40, 10],
+                    'child10': [10, 10, 50, 20],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 30, 40],
+                    'child13': [30, 10, 30, 50],
+                    'child14': [30, 10, 30, 60],
+                },
             },
         },
     },
@@ -443,6 +715,23 @@ var expectations = {
                     'child13': [30, 10, 0, 50],
                     'child14': [30, 10, 0, 60],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 70],
+                    'child1': [10, 10, 0, 0],
+                    'child2': [10, 10, 10, 10],
+                    'child3': [10, 10, 20, 20],
+                    'child4': [10, 10, 0, 30],
+                    'child5': [10, 10, 0, 40],
+                    'child6': [30, 10, 0, 50],
+                    'child7': [30, 10, 0, 60],
+                    'child8': [10, 10, 30, 0],
+                    'child9': [10, 10, 40, 10],
+                    'child10': [10, 10, 50, 20],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 30, 40],
+                    'child13': [30, 10, 30, 50],
+                    'child14': [30, 10, 30, 60],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -462,6 +751,23 @@ var expectations = {
                     'child13': [30, 10, 0, 10],
                     'child14': [30, 10, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 70],
+                    'child1': [10, 10, 0, 60],
+                    'child2': [10, 10, 10, 50],
+                    'child3': [10, 10, 20, 40],
+                    'child4': [10, 10, 0, 30],
+                    'child5': [10, 10, 0, 20],
+                    'child6': [30, 10, 0, 10],
+                    'child7': [30, 10, 0, 0],
+                    'child8': [10, 10, 30, 60],
+                    'child9': [10, 10, 40, 50],
+                    'child10': [10, 10, 50, 40],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 30, 20],
+                    'child13': [30, 10, 30, 10],
+                    'child14': [30, 10, 30, 0],
+                },
             },
         },
         'column': {
@@ -483,6 +789,23 @@ var expectations = {
                     'child13': [10, 30, 10, 30],
                     'child14': [10, 30, 0, 30],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 60, 50],
+                    'child2': [10, 10, 50, 40],
+                    'child3': [10, 10, 40, 30],
+                    'child4': [10, 10, 30, 50],
+                    'child5': [10, 10, 20, 50],
+                    'child6': [10, 30, 10, 30],
+                    'child7': [10, 30, 0, 30],
+                    'child8': [10, 10, 60, 20],
+                    'child9': [10, 10, 50, 10],
+                    'child10': [10, 10, 40, 0],
+                    'child11': [10, 10, 30, 20],
+                    'child12': [10, 10, 20, 20],
+                    'child13': [10, 30, 10, 0],
+                    'child14': [10, 30, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -502,6 +825,23 @@ var expectations = {
                     'child13': [10, 30, 10, 0],
                     'child14': [10, 30, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 60, 0],
+                    'child2': [10, 10, 50, 10],
+                    'child3': [10, 10, 40, 20],
+                    'child4': [10, 10, 30, 0],
+                    'child5': [10, 10, 20, 0],
+                    'child6': [10, 30, 10, 0],
+                    'child7': [10, 30, 0, 0],
+                    'child8': [10, 10, 60, 30],
+                    'child9': [10, 10, 50, 40],
+                    'child10': [10, 10, 40, 50],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 20, 30],
+                    'child13': [10, 30, 10, 30],
+                    'child14': [10, 30, 0, 30],
+                },
             },
         },
         'row-reverse': {
@@ -523,6 +863,23 @@ var expectations = {
                     'child13': [30, 10, 0, 10],
                     'child14': [30, 10, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 70],
+                    'child1': [10, 10, 0, 60],
+                    'child2': [10, 10, 10, 50],
+                    'child3': [10, 10, 20, 40],
+                    'child4': [10, 10, 0, 30],
+                    'child5': [10, 10, 0, 20],
+                    'child6': [30, 10, 0, 10],
+                    'child7': [30, 10, 0, 0],
+                    'child8': [10, 10, 30, 60],
+                    'child9': [10, 10, 40, 50],
+                    'child10': [10, 10, 50, 40],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 30, 20],
+                    'child13': [30, 10, 30, 10],
+                    'child14': [30, 10, 30, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -542,6 +899,23 @@ var expectations = {
                     'child13': [30, 10, 0, 50],
                     'child14': [30, 10, 0, 60],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 70],
+                    'child1': [10, 10, 0, 0],
+                    'child2': [10, 10, 10, 10],
+                    'child3': [10, 10, 20, 20],
+                    'child4': [10, 10, 0, 30],
+                    'child5': [10, 10, 0, 40],
+                    'child6': [30, 10, 0, 50],
+                    'child7': [30, 10, 0, 60],
+                    'child8': [10, 10, 30, 0],
+                    'child9': [10, 10, 40, 10],
+                    'child10': [10, 10, 50, 20],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 30, 40],
+                    'child13': [30, 10, 30, 50],
+                    'child14': [30, 10, 30, 60],
+                },
             },
         },
         'column-reverse': {
@@ -563,6 +937,23 @@ var expectations = {
                     'child13': [10, 30, 50, 30],
                     'child14': [10, 30, 60, 30],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 0, 50],
+                    'child2': [10, 10, 10, 40],
+                    'child3': [10, 10, 20, 30],
+                    'child4': [10, 10, 30, 50],
+                    'child5': [10, 10, 40, 50],
+                    'child6': [10, 30, 50, 30],
+                    'child7': [10, 30, 60, 30],
+                    'child8': [10, 10, 0, 20],
+                    'child9': [10, 10, 10, 10],
+                    'child10': [10, 10, 20, 0],
+                    'child11': [10, 10, 30, 20],
+                    'child12': [10, 10, 40, 20],
+                    'child13': [10, 30, 50, 0],
+                    'child14': [10, 30, 60, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -582,6 +973,23 @@ var expectations = {
                     'child13': [10, 30, 50, 0],
                     'child14': [10, 30, 60, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 0, 0],
+                    'child2': [10, 10, 10, 10],
+                    'child3': [10, 10, 20, 20],
+                    'child4': [10, 10, 30, 0],
+                    'child5': [10, 10, 40, 0],
+                    'child6': [10, 30, 50, 0],
+                    'child7': [10, 30, 60, 0],
+                    'child8': [10, 10, 0, 30],
+                    'child9': [10, 10, 10, 40],
+                    'child10': [10, 10, 20, 50],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 40, 30],
+                    'child13': [10, 30, 50, 30],
+                    'child14': [10, 30, 60, 30],
+                },
             },
         },
     },
@@ -605,6 +1013,23 @@ var expectations = {
                     'child13': [30, 10, 30, 50],
                     'child14': [30, 10, 30, 60],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 70],
+                    'child1': [10, 10, 50, 0],
+                    'child2': [10, 10, 40, 10],
+                    'child3': [10, 10, 30, 20],
+                    'child4': [10, 10, 50, 30],
+                    'child5': [10, 10, 50, 40],
+                    'child6': [30, 10, 30, 50],
+                    'child7': [30, 10, 30, 60],
+                    'child8': [10, 10, 20, 0],
+                    'child9': [10, 10, 10, 10],
+                    'child10': [10, 10, 0, 20],
+                    'child11': [10, 10, 20, 30],
+                    'child12': [10, 10, 20, 40],
+                    'child13': [30, 10, 0, 50],
+                    'child14': [30, 10, 0, 60],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -624,6 +1049,23 @@ var expectations = {
                     'child13': [30, 10, 30, 10],
                     'child14': [30, 10, 30, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 70],
+                    'child1': [10, 10, 50, 60],
+                    'child2': [10, 10, 40, 50],
+                    'child3': [10, 10, 30, 40],
+                    'child4': [10, 10, 50, 30],
+                    'child5': [10, 10, 50, 20],
+                    'child6': [30, 10, 30, 10],
+                    'child7': [30, 10, 30, 0],
+                    'child8': [10, 10, 20, 60],
+                    'child9': [10, 10, 10, 50],
+                    'child10': [10, 10, 0, 40],
+                    'child11': [10, 10, 20, 30],
+                    'child12': [10, 10, 20, 20],
+                    'child13': [30, 10, 0, 10],
+                    'child14': [30, 10, 0, 0],
+                },
             },
         },
         'column': {
@@ -645,6 +1087,23 @@ var expectations = {
                     'child13': [10, 30, 50, 30],
                     'child14': [10, 30, 60, 30],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 0, 50],
+                    'child2': [10, 10, 10, 40],
+                    'child3': [10, 10, 20, 30],
+                    'child4': [10, 10, 30, 50],
+                    'child5': [10, 10, 40, 50],
+                    'child6': [10, 30, 50, 30],
+                    'child7': [10, 30, 60, 30],
+                    'child8': [10, 10, 0, 20],
+                    'child9': [10, 10, 10, 10],
+                    'child10': [10, 10, 20, 0],
+                    'child11': [10, 10, 30, 20],
+                    'child12': [10, 10, 40, 20],
+                    'child13': [10, 30, 50, 0],
+                    'child14': [10, 30, 60, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -664,6 +1123,23 @@ var expectations = {
                     'child13': [10, 30, 50, 0],
                     'child14': [10, 30, 60, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 0, 0],
+                    'child2': [10, 10, 10, 10],
+                    'child3': [10, 10, 20, 20],
+                    'child4': [10, 10, 30, 0],
+                    'child5': [10, 10, 40, 0],
+                    'child6': [10, 30, 50, 0],
+                    'child7': [10, 30, 60, 0],
+                    'child8': [10, 10, 0, 30],
+                    'child9': [10, 10, 10, 40],
+                    'child10': [10, 10, 20, 50],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 40, 30],
+                    'child13': [10, 30, 50, 30],
+                    'child14': [10, 30, 60, 30],
+                },
             },
         },
         'row-reverse': {
@@ -685,6 +1161,23 @@ var expectations = {
                     'child13': [30, 10, 30, 10],
                     'child14': [30, 10, 30, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 70],
+                    'child1': [10, 10, 50, 60],
+                    'child2': [10, 10, 40, 50],
+                    'child3': [10, 10, 30, 40],
+                    'child4': [10, 10, 50, 30],
+                    'child5': [10, 10, 50, 20],
+                    'child6': [30, 10, 30, 10],
+                    'child7': [30, 10, 30, 0],
+                    'child8': [10, 10, 20, 60],
+                    'child9': [10, 10, 10, 50],
+                    'child10': [10, 10, 0, 40],
+                    'child11': [10, 10, 20, 30],
+                    'child12': [10, 10, 20, 20],
+                    'child13': [30, 10, 0, 10],
+                    'child14': [30, 10, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -704,6 +1197,23 @@ var expectations = {
                     'child13': [30, 10, 30, 50],
                     'child14': [30, 10, 30, 60],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 70],
+                    'child1': [10, 10, 50, 0],
+                    'child2': [10, 10, 40, 10],
+                    'child3': [10, 10, 30, 20],
+                    'child4': [10, 10, 50, 30],
+                    'child5': [10, 10, 50, 40],
+                    'child6': [30, 10, 30, 50],
+                    'child7': [30, 10, 30, 60],
+                    'child8': [10, 10, 20, 0],
+                    'child9': [10, 10, 10, 10],
+                    'child10': [10, 10, 0, 20],
+                    'child11': [10, 10, 20, 30],
+                    'child12': [10, 10, 20, 40],
+                    'child13': [30, 10, 0, 50],
+                    'child14': [30, 10, 0, 60],
+                },
             },
         },
         'column-reverse': {
@@ -725,6 +1235,23 @@ var expectations = {
                     'child13': [10, 30, 10, 30],
                     'child14': [10, 30, 0, 30],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 60, 50],
+                    'child2': [10, 10, 50, 40],
+                    'child3': [10, 10, 40, 30],
+                    'child4': [10, 10, 30, 50],
+                    'child5': [10, 10, 20, 50],
+                    'child6': [10, 30, 10, 30],
+                    'child7': [10, 30, 0, 30],
+                    'child8': [10, 10, 60, 20],
+                    'child9': [10, 10, 50, 10],
+                    'child10': [10, 10, 40, 0],
+                    'child11': [10, 10, 30, 20],
+                    'child12': [10, 10, 20, 20],
+                    'child13': [10, 30, 10, 0],
+                    'child14': [10, 30, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -744,6 +1271,23 @@ var expectations = {
                     'child13': [10, 30, 10, 0],
                     'child14': [10, 30, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [70, 60],
+                    'child1': [10, 10, 60, 0],
+                    'child2': [10, 10, 50, 10],
+                    'child3': [10, 10, 40, 20],
+                    'child4': [10, 10, 30, 0],
+                    'child5': [10, 10, 20, 0],
+                    'child6': [10, 30, 10, 0],
+                    'child7': [10, 30, 0, 0],
+                    'child8': [10, 10, 60, 30],
+                    'child9': [10, 10, 50, 40],
+                    'child10': [10, 10, 40, 50],
+                    'child11': [10, 10, 30, 30],
+                    'child12': [10, 10, 20, 30],
+                    'child13': [10, 30, 10, 30],
+                    'child14': [10, 30, 0, 30],
+                },
             },
         },
     },
@@ -775,8 +1319,7 @@ function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength,
 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
 var directions = ['ltr', 'rtl'];
-// FIXME: Implement and test wrap-reverse.
-var wraps = ['wrap'];
+var wraps = ['wrap', 'wrap-reverse'];
 
 writingModes.forEach(function(writingMode) {
     flexDirections.forEach(function(flexDirection) {
@@ -795,8 +1338,8 @@ writingModes.forEach(function(writingMode) {
                 flexbox.className = 'flexbox ' + flexboxClassName;
                 flexbox.setAttribute('style', mainAxis + ': 70px');
 
-                var baselineMargin = (flexDirection.indexOf('row') != -1) ? '-webkit-margin-before: 5px' : '-webkit-margin-start: 5px';
-                    
+                var baselineMargin = (flexDirection.indexOf('row') != -1) ? '-webkit-margin-before: 5px;' : '-webkit-margin-start: 5px;';
+
                 var testExpectations = expectations[writingMode][flexDirection][direction][wrap];
                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'start', testExpectations['child1']);
                 addChild(flexbox, mainAxis, crossAxis, 10, '10px', 'center', testExpectations['child2']);
index 7480b4f..0456908 100644 (file)
 horizontal-tb ltr row wrap
 PASS
+horizontal-tb ltr row wrap-reverse
+PASS
 horizontal-tb rtl row wrap
 PASS
+horizontal-tb rtl row wrap-reverse
+PASS
 horizontal-tb ltr column wrap
 PASS
+horizontal-tb ltr column wrap-reverse
+PASS
 horizontal-tb rtl column wrap
 PASS
+horizontal-tb rtl column wrap-reverse
+PASS
 horizontal-tb ltr row-reverse wrap
 PASS
+horizontal-tb ltr row-reverse wrap-reverse
+PASS
 horizontal-tb rtl row-reverse wrap
 PASS
+horizontal-tb rtl row-reverse wrap-reverse
+PASS
 horizontal-tb ltr column-reverse wrap
 PASS
+horizontal-tb ltr column-reverse wrap-reverse
+PASS
 horizontal-tb rtl column-reverse wrap
 PASS
+horizontal-tb rtl column-reverse wrap-reverse
+PASS
 horizontal-bt ltr row wrap
 PASS
+horizontal-bt ltr row wrap-reverse
+PASS
 horizontal-bt rtl row wrap
 PASS
+horizontal-bt rtl row wrap-reverse
+PASS
 horizontal-bt ltr column wrap
 PASS
+horizontal-bt ltr column wrap-reverse
+PASS
 horizontal-bt rtl column wrap
 PASS
+horizontal-bt rtl column wrap-reverse
+PASS
 horizontal-bt ltr row-reverse wrap
 PASS
+horizontal-bt ltr row-reverse wrap-reverse
+PASS
 horizontal-bt rtl row-reverse wrap
 PASS
+horizontal-bt rtl row-reverse wrap-reverse
+PASS
 horizontal-bt ltr column-reverse wrap
 PASS
+horizontal-bt ltr column-reverse wrap-reverse
+PASS
 horizontal-bt rtl column-reverse wrap
 PASS
+horizontal-bt rtl column-reverse wrap-reverse
+PASS
 vertical-rl ltr row wrap
 PASS
+vertical-rl ltr row wrap-reverse
+PASS
 vertical-rl rtl row wrap
 PASS
+vertical-rl rtl row wrap-reverse
+PASS
 vertical-rl ltr column wrap
 PASS
+vertical-rl ltr column wrap-reverse
+PASS
 vertical-rl rtl column wrap
 PASS
+vertical-rl rtl column wrap-reverse
+PASS
 vertical-rl ltr row-reverse wrap
 PASS
+vertical-rl ltr row-reverse wrap-reverse
+PASS
 vertical-rl rtl row-reverse wrap
 PASS
+vertical-rl rtl row-reverse wrap-reverse
+PASS
 vertical-rl ltr column-reverse wrap
 PASS
+vertical-rl ltr column-reverse wrap-reverse
+PASS
 vertical-rl rtl column-reverse wrap
 PASS
+vertical-rl rtl column-reverse wrap-reverse
+PASS
 vertical-lr ltr row wrap
 PASS
+vertical-lr ltr row wrap-reverse
+PASS
 vertical-lr rtl row wrap
 PASS
+vertical-lr rtl row wrap-reverse
+PASS
 vertical-lr ltr column wrap
 PASS
+vertical-lr ltr column wrap-reverse
+PASS
 vertical-lr rtl column wrap
 PASS
+vertical-lr rtl column wrap-reverse
+PASS
 vertical-lr ltr row-reverse wrap
 PASS
+vertical-lr ltr row-reverse wrap-reverse
+PASS
 vertical-lr rtl row-reverse wrap
 PASS
+vertical-lr rtl row-reverse wrap-reverse
+PASS
 vertical-lr ltr column-reverse wrap
 PASS
+vertical-lr ltr column-reverse wrap-reverse
+PASS
 vertical-lr rtl column-reverse wrap
 PASS
+vertical-lr rtl column-reverse wrap-reverse
+PASS
index f51df82..b7bc3e2 100644 (file)
@@ -8,6 +8,16 @@ horizontal-tb ltr row wrap pack-justify
 PASS
 horizontal-tb ltr row wrap pack-distribute
 PASS
+horizontal-tb ltr row wrap-reverse pack-start
+PASS
+horizontal-tb ltr row wrap-reverse pack-end
+PASS
+horizontal-tb ltr row wrap-reverse pack-center
+PASS
+horizontal-tb ltr row wrap-reverse pack-justify
+PASS
+horizontal-tb ltr row wrap-reverse pack-distribute
+PASS
 horizontal-tb rtl row wrap pack-start
 PASS
 horizontal-tb rtl row wrap pack-end
@@ -18,6 +28,16 @@ horizontal-tb rtl row wrap pack-justify
 PASS
 horizontal-tb rtl row wrap pack-distribute
 PASS
+horizontal-tb rtl row wrap-reverse pack-start
+PASS
+horizontal-tb rtl row wrap-reverse pack-end
+PASS
+horizontal-tb rtl row wrap-reverse pack-center
+PASS
+horizontal-tb rtl row wrap-reverse pack-justify
+PASS
+horizontal-tb rtl row wrap-reverse pack-distribute
+PASS
 horizontal-tb ltr column wrap pack-start
 PASS
 horizontal-tb ltr column wrap pack-end
@@ -28,6 +48,16 @@ horizontal-tb ltr column wrap pack-justify
 PASS
 horizontal-tb ltr column wrap pack-distribute
 PASS
+horizontal-tb ltr column wrap-reverse pack-start
+PASS
+horizontal-tb ltr column wrap-reverse pack-end
+PASS
+horizontal-tb ltr column wrap-reverse pack-center
+PASS
+horizontal-tb ltr column wrap-reverse pack-justify
+PASS
+horizontal-tb ltr column wrap-reverse pack-distribute
+PASS
 horizontal-tb rtl column wrap pack-start
 PASS
 horizontal-tb rtl column wrap pack-end
@@ -38,6 +68,16 @@ horizontal-tb rtl column wrap pack-justify
 PASS
 horizontal-tb rtl column wrap pack-distribute
 PASS
+horizontal-tb rtl column wrap-reverse pack-start
+PASS
+horizontal-tb rtl column wrap-reverse pack-end
+PASS
+horizontal-tb rtl column wrap-reverse pack-center
+PASS
+horizontal-tb rtl column wrap-reverse pack-justify
+PASS
+horizontal-tb rtl column wrap-reverse pack-distribute
+PASS
 horizontal-tb ltr row-reverse wrap pack-start
 PASS
 horizontal-tb ltr row-reverse wrap pack-end
@@ -48,6 +88,16 @@ horizontal-tb ltr row-reverse wrap pack-justify
 PASS
 horizontal-tb ltr row-reverse wrap pack-distribute
 PASS
+horizontal-tb ltr row-reverse wrap-reverse pack-start
+PASS
+horizontal-tb ltr row-reverse wrap-reverse pack-end
+PASS
+horizontal-tb ltr row-reverse wrap-reverse pack-center
+PASS
+horizontal-tb ltr row-reverse wrap-reverse pack-justify
+PASS
+horizontal-tb ltr row-reverse wrap-reverse pack-distribute
+PASS
 horizontal-tb rtl row-reverse wrap pack-start
 PASS
 horizontal-tb rtl row-reverse wrap pack-end
@@ -58,6 +108,16 @@ horizontal-tb rtl row-reverse wrap pack-justify
 PASS
 horizontal-tb rtl row-reverse wrap pack-distribute
 PASS
+horizontal-tb rtl row-reverse wrap-reverse pack-start
+PASS
+horizontal-tb rtl row-reverse wrap-reverse pack-end
+PASS
+horizontal-tb rtl row-reverse wrap-reverse pack-center
+PASS
+horizontal-tb rtl row-reverse wrap-reverse pack-justify
+PASS
+horizontal-tb rtl row-reverse wrap-reverse pack-distribute
+PASS
 horizontal-tb ltr column-reverse wrap pack-start
 PASS
 horizontal-tb ltr column-reverse wrap pack-end
@@ -68,6 +128,16 @@ horizontal-tb ltr column-reverse wrap pack-justify
 PASS
 horizontal-tb ltr column-reverse wrap pack-distribute
 PASS
+horizontal-tb ltr column-reverse wrap-reverse pack-start
+PASS
+horizontal-tb ltr column-reverse wrap-reverse pack-end
+PASS
+horizontal-tb ltr column-reverse wrap-reverse pack-center
+PASS
+horizontal-tb ltr column-reverse wrap-reverse pack-justify
+PASS
+horizontal-tb ltr column-reverse wrap-reverse pack-distribute
+PASS
 horizontal-tb rtl column-reverse wrap pack-start
 PASS
 horizontal-tb rtl column-reverse wrap pack-end
@@ -78,6 +148,16 @@ horizontal-tb rtl column-reverse wrap pack-justify
 PASS
 horizontal-tb rtl column-reverse wrap pack-distribute
 PASS
+horizontal-tb rtl column-reverse wrap-reverse pack-start
+PASS
+horizontal-tb rtl column-reverse wrap-reverse pack-end
+PASS
+horizontal-tb rtl column-reverse wrap-reverse pack-center
+PASS
+horizontal-tb rtl column-reverse wrap-reverse pack-justify
+PASS
+horizontal-tb rtl column-reverse wrap-reverse pack-distribute
+PASS
 horizontal-bt ltr row wrap pack-start
 PASS
 horizontal-bt ltr row wrap pack-end
@@ -88,6 +168,16 @@ horizontal-bt ltr row wrap pack-justify
 PASS
 horizontal-bt ltr row wrap pack-distribute
 PASS
+horizontal-bt ltr row wrap-reverse pack-start
+PASS
+horizontal-bt ltr row wrap-reverse pack-end
+PASS
+horizontal-bt ltr row wrap-reverse pack-center
+PASS
+horizontal-bt ltr row wrap-reverse pack-justify
+PASS
+horizontal-bt ltr row wrap-reverse pack-distribute
+PASS
 horizontal-bt rtl row wrap pack-start
 PASS
 horizontal-bt rtl row wrap pack-end
@@ -98,6 +188,16 @@ horizontal-bt rtl row wrap pack-justify
 PASS
 horizontal-bt rtl row wrap pack-distribute
 PASS
+horizontal-bt rtl row wrap-reverse pack-start
+PASS
+horizontal-bt rtl row wrap-reverse pack-end
+PASS
+horizontal-bt rtl row wrap-reverse pack-center
+PASS
+horizontal-bt rtl row wrap-reverse pack-justify
+PASS
+horizontal-bt rtl row wrap-reverse pack-distribute
+PASS
 horizontal-bt ltr column wrap pack-start
 PASS
 horizontal-bt ltr column wrap pack-end
@@ -108,6 +208,16 @@ horizontal-bt ltr column wrap pack-justify
 PASS
 horizontal-bt ltr column wrap pack-distribute
 PASS
+horizontal-bt ltr column wrap-reverse pack-start
+PASS
+horizontal-bt ltr column wrap-reverse pack-end
+PASS
+horizontal-bt ltr column wrap-reverse pack-center
+PASS
+horizontal-bt ltr column wrap-reverse pack-justify
+PASS
+horizontal-bt ltr column wrap-reverse pack-distribute
+PASS
 horizontal-bt rtl column wrap pack-start
 PASS
 horizontal-bt rtl column wrap pack-end
@@ -118,6 +228,16 @@ horizontal-bt rtl column wrap pack-justify
 PASS
 horizontal-bt rtl column wrap pack-distribute
 PASS
+horizontal-bt rtl column wrap-reverse pack-start
+PASS
+horizontal-bt rtl column wrap-reverse pack-end
+PASS
+horizontal-bt rtl column wrap-reverse pack-center
+PASS
+horizontal-bt rtl column wrap-reverse pack-justify
+PASS
+horizontal-bt rtl column wrap-reverse pack-distribute
+PASS
 horizontal-bt ltr row-reverse wrap pack-start
 PASS
 horizontal-bt ltr row-reverse wrap pack-end
@@ -128,6 +248,16 @@ horizontal-bt ltr row-reverse wrap pack-justify
 PASS
 horizontal-bt ltr row-reverse wrap pack-distribute
 PASS
+horizontal-bt ltr row-reverse wrap-reverse pack-start
+PASS
+horizontal-bt ltr row-reverse wrap-reverse pack-end
+PASS
+horizontal-bt ltr row-reverse wrap-reverse pack-center
+PASS
+horizontal-bt ltr row-reverse wrap-reverse pack-justify
+PASS
+horizontal-bt ltr row-reverse wrap-reverse pack-distribute
+PASS
 horizontal-bt rtl row-reverse wrap pack-start
 PASS
 horizontal-bt rtl row-reverse wrap pack-end
@@ -138,6 +268,16 @@ horizontal-bt rtl row-reverse wrap pack-justify
 PASS
 horizontal-bt rtl row-reverse wrap pack-distribute
 PASS
+horizontal-bt rtl row-reverse wrap-reverse pack-start
+PASS
+horizontal-bt rtl row-reverse wrap-reverse pack-end
+PASS
+horizontal-bt rtl row-reverse wrap-reverse pack-center
+PASS
+horizontal-bt rtl row-reverse wrap-reverse pack-justify
+PASS
+horizontal-bt rtl row-reverse wrap-reverse pack-distribute
+PASS
 horizontal-bt ltr column-reverse wrap pack-start
 PASS
 horizontal-bt ltr column-reverse wrap pack-end
@@ -148,6 +288,16 @@ horizontal-bt ltr column-reverse wrap pack-justify
 PASS
 horizontal-bt ltr column-reverse wrap pack-distribute
 PASS
+horizontal-bt ltr column-reverse wrap-reverse pack-start
+PASS
+horizontal-bt ltr column-reverse wrap-reverse pack-end
+PASS
+horizontal-bt ltr column-reverse wrap-reverse pack-center
+PASS
+horizontal-bt ltr column-reverse wrap-reverse pack-justify
+PASS
+horizontal-bt ltr column-reverse wrap-reverse pack-distribute
+PASS
 horizontal-bt rtl column-reverse wrap pack-start
 PASS
 horizontal-bt rtl column-reverse wrap pack-end
@@ -158,6 +308,16 @@ horizontal-bt rtl column-reverse wrap pack-justify
 PASS
 horizontal-bt rtl column-reverse wrap pack-distribute
 PASS
+horizontal-bt rtl column-reverse wrap-reverse pack-start
+PASS
+horizontal-bt rtl column-reverse wrap-reverse pack-end
+PASS
+horizontal-bt rtl column-reverse wrap-reverse pack-center
+PASS
+horizontal-bt rtl column-reverse wrap-reverse pack-justify
+PASS
+horizontal-bt rtl column-reverse wrap-reverse pack-distribute
+PASS
 vertical-rl ltr row wrap pack-start
 PASS
 vertical-rl ltr row wrap pack-end
@@ -168,6 +328,16 @@ vertical-rl ltr row wrap pack-justify
 PASS
 vertical-rl ltr row wrap pack-distribute
 PASS
+vertical-rl ltr row wrap-reverse pack-start
+PASS
+vertical-rl ltr row wrap-reverse pack-end
+PASS
+vertical-rl ltr row wrap-reverse pack-center
+PASS
+vertical-rl ltr row wrap-reverse pack-justify
+PASS
+vertical-rl ltr row wrap-reverse pack-distribute
+PASS
 vertical-rl rtl row wrap pack-start
 PASS
 vertical-rl rtl row wrap pack-end
@@ -178,6 +348,16 @@ vertical-rl rtl row wrap pack-justify
 PASS
 vertical-rl rtl row wrap pack-distribute
 PASS
+vertical-rl rtl row wrap-reverse pack-start
+PASS
+vertical-rl rtl row wrap-reverse pack-end
+PASS
+vertical-rl rtl row wrap-reverse pack-center
+PASS
+vertical-rl rtl row wrap-reverse pack-justify
+PASS
+vertical-rl rtl row wrap-reverse pack-distribute
+PASS
 vertical-rl ltr column wrap pack-start
 PASS
 vertical-rl ltr column wrap pack-end
@@ -188,6 +368,16 @@ vertical-rl ltr column wrap pack-justify
 PASS
 vertical-rl ltr column wrap pack-distribute
 PASS
+vertical-rl ltr column wrap-reverse pack-start
+PASS
+vertical-rl ltr column wrap-reverse pack-end
+PASS
+vertical-rl ltr column wrap-reverse pack-center
+PASS
+vertical-rl ltr column wrap-reverse pack-justify
+PASS
+vertical-rl ltr column wrap-reverse pack-distribute
+PASS
 vertical-rl rtl column wrap pack-start
 PASS
 vertical-rl rtl column wrap pack-end
@@ -198,6 +388,16 @@ vertical-rl rtl column wrap pack-justify
 PASS
 vertical-rl rtl column wrap pack-distribute
 PASS
+vertical-rl rtl column wrap-reverse pack-start
+PASS
+vertical-rl rtl column wrap-reverse pack-end
+PASS
+vertical-rl rtl column wrap-reverse pack-center
+PASS
+vertical-rl rtl column wrap-reverse pack-justify
+PASS
+vertical-rl rtl column wrap-reverse pack-distribute
+PASS
 vertical-rl ltr row-reverse wrap pack-start
 PASS
 vertical-rl ltr row-reverse wrap pack-end
@@ -208,6 +408,16 @@ vertical-rl ltr row-reverse wrap pack-justify
 PASS
 vertical-rl ltr row-reverse wrap pack-distribute
 PASS
+vertical-rl ltr row-reverse wrap-reverse pack-start
+PASS
+vertical-rl ltr row-reverse wrap-reverse pack-end
+PASS
+vertical-rl ltr row-reverse wrap-reverse pack-center
+PASS
+vertical-rl ltr row-reverse wrap-reverse pack-justify
+PASS
+vertical-rl ltr row-reverse wrap-reverse pack-distribute
+PASS
 vertical-rl rtl row-reverse wrap pack-start
 PASS
 vertical-rl rtl row-reverse wrap pack-end
@@ -218,6 +428,16 @@ vertical-rl rtl row-reverse wrap pack-justify
 PASS
 vertical-rl rtl row-reverse wrap pack-distribute
 PASS
+vertical-rl rtl row-reverse wrap-reverse pack-start
+PASS
+vertical-rl rtl row-reverse wrap-reverse pack-end
+PASS
+vertical-rl rtl row-reverse wrap-reverse pack-center
+PASS
+vertical-rl rtl row-reverse wrap-reverse pack-justify
+PASS
+vertical-rl rtl row-reverse wrap-reverse pack-distribute
+PASS
 vertical-rl ltr column-reverse wrap pack-start
 PASS
 vertical-rl ltr column-reverse wrap pack-end
@@ -228,6 +448,16 @@ vertical-rl ltr column-reverse wrap pack-justify
 PASS
 vertical-rl ltr column-reverse wrap pack-distribute
 PASS
+vertical-rl ltr column-reverse wrap-reverse pack-start
+PASS
+vertical-rl ltr column-reverse wrap-reverse pack-end
+PASS
+vertical-rl ltr column-reverse wrap-reverse pack-center
+PASS
+vertical-rl ltr column-reverse wrap-reverse pack-justify
+PASS
+vertical-rl ltr column-reverse wrap-reverse pack-distribute
+PASS
 vertical-rl rtl column-reverse wrap pack-start
 PASS
 vertical-rl rtl column-reverse wrap pack-end
@@ -238,6 +468,16 @@ vertical-rl rtl column-reverse wrap pack-justify
 PASS
 vertical-rl rtl column-reverse wrap pack-distribute
 PASS
+vertical-rl rtl column-reverse wrap-reverse pack-start
+PASS
+vertical-rl rtl column-reverse wrap-reverse pack-end
+PASS
+vertical-rl rtl column-reverse wrap-reverse pack-center
+PASS
+vertical-rl rtl column-reverse wrap-reverse pack-justify
+PASS
+vertical-rl rtl column-reverse wrap-reverse pack-distribute
+PASS
 vertical-lr ltr row wrap pack-start
 PASS
 vertical-lr ltr row wrap pack-end
@@ -248,6 +488,16 @@ vertical-lr ltr row wrap pack-justify
 PASS
 vertical-lr ltr row wrap pack-distribute
 PASS
+vertical-lr ltr row wrap-reverse pack-start
+PASS
+vertical-lr ltr row wrap-reverse pack-end
+PASS
+vertical-lr ltr row wrap-reverse pack-center
+PASS
+vertical-lr ltr row wrap-reverse pack-justify
+PASS
+vertical-lr ltr row wrap-reverse pack-distribute
+PASS
 vertical-lr rtl row wrap pack-start
 PASS
 vertical-lr rtl row wrap pack-end
@@ -258,6 +508,16 @@ vertical-lr rtl row wrap pack-justify
 PASS
 vertical-lr rtl row wrap pack-distribute
 PASS
+vertical-lr rtl row wrap-reverse pack-start
+PASS
+vertical-lr rtl row wrap-reverse pack-end
+PASS
+vertical-lr rtl row wrap-reverse pack-center
+PASS
+vertical-lr rtl row wrap-reverse pack-justify
+PASS
+vertical-lr rtl row wrap-reverse pack-distribute
+PASS
 vertical-lr ltr column wrap pack-start
 PASS
 vertical-lr ltr column wrap pack-end
@@ -268,6 +528,16 @@ vertical-lr ltr column wrap pack-justify
 PASS
 vertical-lr ltr column wrap pack-distribute
 PASS
+vertical-lr ltr column wrap-reverse pack-start
+PASS
+vertical-lr ltr column wrap-reverse pack-end
+PASS
+vertical-lr ltr column wrap-reverse pack-center
+PASS
+vertical-lr ltr column wrap-reverse pack-justify
+PASS
+vertical-lr ltr column wrap-reverse pack-distribute
+PASS
 vertical-lr rtl column wrap pack-start
 PASS
 vertical-lr rtl column wrap pack-end
@@ -278,6 +548,16 @@ vertical-lr rtl column wrap pack-justify
 PASS
 vertical-lr rtl column wrap pack-distribute
 PASS
+vertical-lr rtl column wrap-reverse pack-start
+PASS
+vertical-lr rtl column wrap-reverse pack-end
+PASS
+vertical-lr rtl column wrap-reverse pack-center
+PASS
+vertical-lr rtl column wrap-reverse pack-justify
+PASS
+vertical-lr rtl column wrap-reverse pack-distribute
+PASS
 vertical-lr ltr row-reverse wrap pack-start
 PASS
 vertical-lr ltr row-reverse wrap pack-end
@@ -288,6 +568,16 @@ vertical-lr ltr row-reverse wrap pack-justify
 PASS
 vertical-lr ltr row-reverse wrap pack-distribute
 PASS
+vertical-lr ltr row-reverse wrap-reverse pack-start
+PASS
+vertical-lr ltr row-reverse wrap-reverse pack-end
+PASS
+vertical-lr ltr row-reverse wrap-reverse pack-center
+PASS
+vertical-lr ltr row-reverse wrap-reverse pack-justify
+PASS
+vertical-lr ltr row-reverse wrap-reverse pack-distribute
+PASS
 vertical-lr rtl row-reverse wrap pack-start
 PASS
 vertical-lr rtl row-reverse wrap pack-end
@@ -298,6 +588,16 @@ vertical-lr rtl row-reverse wrap pack-justify
 PASS
 vertical-lr rtl row-reverse wrap pack-distribute
 PASS
+vertical-lr rtl row-reverse wrap-reverse pack-start
+PASS
+vertical-lr rtl row-reverse wrap-reverse pack-end
+PASS
+vertical-lr rtl row-reverse wrap-reverse pack-center
+PASS
+vertical-lr rtl row-reverse wrap-reverse pack-justify
+PASS
+vertical-lr rtl row-reverse wrap-reverse pack-distribute
+PASS
 vertical-lr ltr column-reverse wrap pack-start
 PASS
 vertical-lr ltr column-reverse wrap pack-end
@@ -308,6 +608,16 @@ vertical-lr ltr column-reverse wrap pack-justify
 PASS
 vertical-lr ltr column-reverse wrap pack-distribute
 PASS
+vertical-lr ltr column-reverse wrap-reverse pack-start
+PASS
+vertical-lr ltr column-reverse wrap-reverse pack-end
+PASS
+vertical-lr ltr column-reverse wrap-reverse pack-center
+PASS
+vertical-lr ltr column-reverse wrap-reverse pack-justify
+PASS
+vertical-lr ltr column-reverse wrap-reverse pack-distribute
+PASS
 vertical-lr rtl column-reverse wrap pack-start
 PASS
 vertical-lr rtl column-reverse wrap pack-end
@@ -318,3 +628,13 @@ vertical-lr rtl column-reverse wrap pack-justify
 PASS
 vertical-lr rtl column-reverse wrap pack-distribute
 PASS
+vertical-lr rtl column-reverse wrap-reverse pack-start
+PASS
+vertical-lr rtl column-reverse wrap-reverse pack-end
+PASS
+vertical-lr rtl column-reverse wrap-reverse pack-center
+PASS
+vertical-lr rtl column-reverse wrap-reverse pack-justify
+PASS
+vertical-lr rtl column-reverse wrap-reverse pack-distribute
+PASS
index fd07036..060d36c 100644 (file)
@@ -123,6 +123,43 @@ var expectations = {
                         'child4': [20, 10, 55, 10],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 10],
+                        'child2': [20, 10, 40, 10],
+                        'child3': [40, 10, 0, 0],
+                        'child4': [20, 10, 40, 0],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 10],
+                        'child2': [20, 10, 60, 10],
+                        'child3': [40, 10, 20, 0],
+                        'child4': [20, 10, 60, 0],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 10, 10],
+                        'child2': [20, 10, 50, 10],
+                        'child3': [40, 10, 10, 0],
+                        'child4': [20, 10, 50, 0],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 10],
+                        'child2': [20, 10, 60, 10],
+                        'child3': [40, 10, 0, 0],
+                        'child4': [20, 10, 60, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 5, 10],
+                        'child2': [20, 10, 55, 10],
+                        'child3': [40, 10, 5, 0],
+                        'child4': [20, 10, 55, 0],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -162,6 +199,43 @@ var expectations = {
                         'child4': [20, 10, 5, 10],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 10],
+                        'child2': [20, 10, 20, 10],
+                        'child3': [40, 10, 40, 0],
+                        'child4': [20, 10, 20, 0],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 10],
+                        'child2': [20, 10, 0, 10],
+                        'child3': [40, 10, 20, 0],
+                        'child4': [20, 10, 0, 0],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 30, 10],
+                        'child2': [20, 10, 10, 10],
+                        'child3': [40, 10, 30, 0],
+                        'child4': [20, 10, 10, 0],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 10],
+                        'child2': [20, 10, 0, 10],
+                        'child3': [40, 10, 40, 0],
+                        'child4': [20, 10, 0, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 35, 10],
+                        'child2': [20, 10, 5, 10],
+                        'child3': [40, 10, 35, 0],
+                        'child4': [20, 10, 5, 0],
+                    },
+                },
             },
         },
         'column': {
@@ -203,6 +277,43 @@ var expectations = {
                         'child4': [10, 20, 10, 55],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 0],
+                        'child2': [10, 20, 90, 40],
+                        'child3': [10, 40, 80, 0],
+                        'child4': [10, 20, 80, 40],
+                    },
+                    'end': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 20],
+                        'child2': [10, 20, 90, 60],
+                        'child3': [10, 40, 80, 20],
+                        'child4': [10, 20, 80, 60],
+                    },
+                    'center': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 10],
+                        'child2': [10, 20, 90, 50],
+                        'child3': [10, 40, 80, 10],
+                        'child4': [10, 20, 80, 50],
+                    },
+                    'justify': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 0],
+                        'child2': [10, 20, 90, 60],
+                        'child3': [10, 40, 80, 0],
+                        'child4': [10, 20, 80, 60],
+                    },
+                    'distribute': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 5],
+                        'child2': [10, 20, 90, 55],
+                        'child3': [10, 40, 80, 5],
+                        'child4': [10, 20, 80, 55],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -242,6 +353,43 @@ var expectations = {
                         'child4': [10, 20, 80, 55],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 0],
+                        'child2': [10, 20, 0, 40],
+                        'child3': [10, 40, 10, 0],
+                        'child4': [10, 20, 10, 40],
+                    },
+                    'end': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 20],
+                        'child2': [10, 20, 0, 60],
+                        'child3': [10, 40, 10, 20],
+                        'child4': [10, 20, 10, 60],
+                    },
+                    'center': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 10],
+                        'child2': [10, 20, 0, 50],
+                        'child3': [10, 40, 10, 10],
+                        'child4': [10, 20, 10, 50],
+                    },
+                    'justify': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 0],
+                        'child2': [10, 20, 0, 60],
+                        'child3': [10, 40, 10, 0],
+                        'child4': [10, 20, 10, 60],
+                    },
+                    'distribute': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 5],
+                        'child2': [10, 20, 0, 55],
+                        'child3': [10, 40, 10, 5],
+                        'child4': [10, 20, 10, 55],
+                    },
+                },
             },
         },
         'row-reverse': {
@@ -283,6 +431,43 @@ var expectations = {
                         'child4': [20, 10, 5, 10],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 10],
+                        'child2': [20, 10, 20, 10],
+                        'child3': [40, 10, 40, 0],
+                        'child4': [20, 10, 20, 0],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 10],
+                        'child2': [20, 10, 0, 10],
+                        'child3': [40, 10, 20, 0],
+                        'child4': [20, 10, 0, 0],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 30, 10],
+                        'child2': [20, 10, 10, 10],
+                        'child3': [40, 10, 30, 0],
+                        'child4': [20, 10, 10, 0],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 10],
+                        'child2': [20, 10, 0, 10],
+                        'child3': [40, 10, 40, 0],
+                        'child4': [20, 10, 0, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 35, 10],
+                        'child2': [20, 10, 5, 10],
+                        'child3': [40, 10, 35, 0],
+                        'child4': [20, 10, 5, 0],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -322,6 +507,43 @@ var expectations = {
                         'child4': [20, 10, 55, 10],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 10],
+                        'child2': [20, 10, 40, 10],
+                        'child3': [40, 10, 0, 0],
+                        'child4': [20, 10, 40, 0],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 10],
+                        'child2': [20, 10, 60, 10],
+                        'child3': [40, 10, 20, 0],
+                        'child4': [20, 10, 60, 0],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 10, 10],
+                        'child2': [20, 10, 50, 10],
+                        'child3': [40, 10, 10, 0],
+                        'child4': [20, 10, 50, 0],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 10],
+                        'child2': [20, 10, 60, 10],
+                        'child3': [40, 10, 0, 0],
+                        'child4': [20, 10, 60, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 5, 10],
+                        'child2': [20, 10, 55, 10],
+                        'child3': [40, 10, 5, 0],
+                        'child4': [20, 10, 55, 0],
+                    },
+                },
             },
         },
         'column-reverse': {
@@ -363,9 +585,7 @@ var expectations = {
                         'child4': [10, 20, 10, 5],
                     },
                 },
-            },
-            'rtl': {
-                'wrap': {
+                'wrap-reverse': {
                     'start': {
                         'flexbox': [100, 80],
                         'child1': [10, 40, 90, 40],
@@ -403,35 +623,111 @@ var expectations = {
                     },
                 },
             },
-        },
-    },
-    'horizontal-bt': {
-        'row': {
-            'ltr': {
+            'rtl': {
                 'wrap': {
                     'start': {
-                        'flexbox': [80, 20],
-                        'child1': [40, 10, 0, 10],
-                        'child2': [20, 10, 40, 10],
-                        'child3': [40, 10, 0, 0],
-                        'child4': [20, 10, 40, 0],
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 40],
+                        'child2': [10, 20, 90, 20],
+                        'child3': [10, 40, 80, 40],
+                        'child4': [10, 20, 80, 20],
                     },
                     'end': {
-                        'flexbox': [80, 20],
-                        'child1': [40, 10, 20, 10],
-                        'child2': [20, 10, 60, 10],
-                        'child3': [40, 10, 20, 0],
-                        'child4': [20, 10, 60, 0],
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 20],
+                        'child2': [10, 20, 90, 0],
+                        'child3': [10, 40, 80, 20],
+                        'child4': [10, 20, 80, 0],
                     },
                     'center': {
-                        'flexbox': [80, 20],
-                        'child1': [40, 10, 10, 10],
-                        'child2': [20, 10, 50, 10],
-                        'child3': [40, 10, 10, 0],
-                        'child4': [20, 10, 50, 0],
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 30],
+                        'child2': [10, 20, 90, 10],
+                        'child3': [10, 40, 80, 30],
+                        'child4': [10, 20, 80, 10],
                     },
                     'justify': {
-                        'flexbox': [80, 20],
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 40],
+                        'child2': [10, 20, 90, 0],
+                        'child3': [10, 40, 80, 40],
+                        'child4': [10, 20, 80, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 35],
+                        'child2': [10, 20, 90, 5],
+                        'child3': [10, 40, 80, 35],
+                        'child4': [10, 20, 80, 5],
+                    },
+                },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 40],
+                        'child2': [10, 20, 0, 20],
+                        'child3': [10, 40, 10, 40],
+                        'child4': [10, 20, 10, 20],
+                    },
+                    'end': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 20],
+                        'child2': [10, 20, 0, 0],
+                        'child3': [10, 40, 10, 20],
+                        'child4': [10, 20, 10, 0],
+                    },
+                    'center': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 30],
+                        'child2': [10, 20, 0, 10],
+                        'child3': [10, 40, 10, 30],
+                        'child4': [10, 20, 10, 10],
+                    },
+                    'justify': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 40],
+                        'child2': [10, 20, 0, 0],
+                        'child3': [10, 40, 10, 40],
+                        'child4': [10, 20, 10, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 35],
+                        'child2': [10, 20, 0, 5],
+                        'child3': [10, 40, 10, 35],
+                        'child4': [10, 20, 10, 5],
+                    },
+                },
+            },
+        },
+    },
+    'horizontal-bt': {
+        'row': {
+            'ltr': {
+                'wrap': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 10],
+                        'child2': [20, 10, 40, 10],
+                        'child3': [40, 10, 0, 0],
+                        'child4': [20, 10, 40, 0],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 10],
+                        'child2': [20, 10, 60, 10],
+                        'child3': [40, 10, 20, 0],
+                        'child4': [20, 10, 60, 0],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 10, 10],
+                        'child2': [20, 10, 50, 10],
+                        'child3': [40, 10, 10, 0],
+                        'child4': [20, 10, 50, 0],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
                         'child1': [40, 10, 0, 10],
                         'child2': [20, 10, 60, 10],
                         'child3': [40, 10, 0, 0],
@@ -445,6 +741,43 @@ var expectations = {
                         'child4': [20, 10, 55, 0],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 0],
+                        'child2': [20, 10, 40, 0],
+                        'child3': [40, 10, 0, 10],
+                        'child4': [20, 10, 40, 10],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 0],
+                        'child2': [20, 10, 60, 0],
+                        'child3': [40, 10, 20, 10],
+                        'child4': [20, 10, 60, 10],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 10, 0],
+                        'child2': [20, 10, 50, 0],
+                        'child3': [40, 10, 10, 10],
+                        'child4': [20, 10, 50, 10],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 0],
+                        'child2': [20, 10, 60, 0],
+                        'child3': [40, 10, 0, 10],
+                        'child4': [20, 10, 60, 10],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 5, 0],
+                        'child2': [20, 10, 55, 0],
+                        'child3': [40, 10, 5, 10],
+                        'child4': [20, 10, 55, 10],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -484,6 +817,43 @@ var expectations = {
                         'child4': [20, 10, 5, 0],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 0],
+                        'child2': [20, 10, 20, 0],
+                        'child3': [40, 10, 40, 10],
+                        'child4': [20, 10, 20, 10],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 0],
+                        'child2': [20, 10, 0, 0],
+                        'child3': [40, 10, 20, 10],
+                        'child4': [20, 10, 0, 10],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 30, 0],
+                        'child2': [20, 10, 10, 0],
+                        'child3': [40, 10, 30, 10],
+                        'child4': [20, 10, 10, 10],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 0],
+                        'child2': [20, 10, 0, 0],
+                        'child3': [40, 10, 40, 10],
+                        'child4': [20, 10, 0, 10],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 35, 0],
+                        'child2': [20, 10, 5, 0],
+                        'child3': [40, 10, 35, 10],
+                        'child4': [20, 10, 5, 10],
+                    },
+                },
             },
         },
         'column': {
@@ -525,6 +895,43 @@ var expectations = {
                         'child4': [10, 20, 10, 5],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 40],
+                        'child2': [10, 20, 90, 20],
+                        'child3': [10, 40, 80, 40],
+                        'child4': [10, 20, 80, 20],
+                    },
+                    'end': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 20],
+                        'child2': [10, 20, 90, 0],
+                        'child3': [10, 40, 80, 20],
+                        'child4': [10, 20, 80, 0],
+                    },
+                    'center': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 30],
+                        'child2': [10, 20, 90, 10],
+                        'child3': [10, 40, 80, 30],
+                        'child4': [10, 20, 80, 10],
+                    },
+                    'justify': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 40],
+                        'child2': [10, 20, 90, 0],
+                        'child3': [10, 40, 80, 40],
+                        'child4': [10, 20, 80, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 35],
+                        'child2': [10, 20, 90, 5],
+                        'child3': [10, 40, 80, 35],
+                        'child4': [10, 20, 80, 5],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -564,6 +971,43 @@ var expectations = {
                         'child4': [10, 20, 80, 5],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 40],
+                        'child2': [10, 20, 0, 20],
+                        'child3': [10, 40, 10, 40],
+                        'child4': [10, 20, 10, 20],
+                    },
+                    'end': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 20],
+                        'child2': [10, 20, 0, 0],
+                        'child3': [10, 40, 10, 20],
+                        'child4': [10, 20, 10, 0],
+                    },
+                    'center': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 30],
+                        'child2': [10, 20, 0, 10],
+                        'child3': [10, 40, 10, 30],
+                        'child4': [10, 20, 10, 10],
+                    },
+                    'justify': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 40],
+                        'child2': [10, 20, 0, 0],
+                        'child3': [10, 40, 10, 40],
+                        'child4': [10, 20, 10, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 35],
+                        'child2': [10, 20, 0, 5],
+                        'child3': [10, 40, 10, 35],
+                        'child4': [10, 20, 10, 5],
+                    },
+                },
             },
         },
         'row-reverse': {
@@ -605,6 +1049,43 @@ var expectations = {
                         'child4': [20, 10, 5, 0],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 0],
+                        'child2': [20, 10, 20, 0],
+                        'child3': [40, 10, 40, 10],
+                        'child4': [20, 10, 20, 10],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 0],
+                        'child2': [20, 10, 0, 0],
+                        'child3': [40, 10, 20, 10],
+                        'child4': [20, 10, 0, 10],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 30, 0],
+                        'child2': [20, 10, 10, 0],
+                        'child3': [40, 10, 30, 10],
+                        'child4': [20, 10, 10, 10],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 0],
+                        'child2': [20, 10, 0, 0],
+                        'child3': [40, 10, 40, 10],
+                        'child4': [20, 10, 0, 10],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 35, 0],
+                        'child2': [20, 10, 5, 0],
+                        'child3': [40, 10, 35, 10],
+                        'child4': [20, 10, 5, 10],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -644,6 +1125,43 @@ var expectations = {
                         'child4': [20, 10, 55, 0],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 0],
+                        'child2': [20, 10, 40, 0],
+                        'child3': [40, 10, 0, 10],
+                        'child4': [20, 10, 40, 10],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 0],
+                        'child2': [20, 10, 60, 0],
+                        'child3': [40, 10, 20, 10],
+                        'child4': [20, 10, 60, 10],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 10, 0],
+                        'child2': [20, 10, 50, 0],
+                        'child3': [40, 10, 10, 10],
+                        'child4': [20, 10, 50, 10],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 0],
+                        'child2': [20, 10, 60, 0],
+                        'child3': [40, 10, 0, 10],
+                        'child4': [20, 10, 60, 10],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 5, 0],
+                        'child2': [20, 10, 55, 0],
+                        'child3': [40, 10, 5, 10],
+                        'child4': [20, 10, 55, 10],
+                    },
+                },
             },
         },
         'column-reverse': {
@@ -685,6 +1203,43 @@ var expectations = {
                         'child4': [10, 20, 10, 55],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 0],
+                        'child2': [10, 20, 90, 40],
+                        'child3': [10, 40, 80, 0],
+                        'child4': [10, 20, 80, 40],
+                    },
+                    'end': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 20],
+                        'child2': [10, 20, 90, 60],
+                        'child3': [10, 40, 80, 20],
+                        'child4': [10, 20, 80, 60],
+                    },
+                    'center': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 10],
+                        'child2': [10, 20, 90, 50],
+                        'child3': [10, 40, 80, 10],
+                        'child4': [10, 20, 80, 50],
+                    },
+                    'justify': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 0],
+                        'child2': [10, 20, 90, 60],
+                        'child3': [10, 40, 80, 0],
+                        'child4': [10, 20, 80, 60],
+                    },
+                    'distribute': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 90, 5],
+                        'child2': [10, 20, 90, 55],
+                        'child3': [10, 40, 80, 5],
+                        'child4': [10, 20, 80, 55],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -724,6 +1279,43 @@ var expectations = {
                         'child4': [10, 20, 80, 55],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 0],
+                        'child2': [10, 20, 0, 40],
+                        'child3': [10, 40, 10, 0],
+                        'child4': [10, 20, 10, 40],
+                    },
+                    'end': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 20],
+                        'child2': [10, 20, 0, 60],
+                        'child3': [10, 40, 10, 20],
+                        'child4': [10, 20, 10, 60],
+                    },
+                    'center': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 10],
+                        'child2': [10, 20, 0, 50],
+                        'child3': [10, 40, 10, 10],
+                        'child4': [10, 20, 10, 50],
+                    },
+                    'justify': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 0],
+                        'child2': [10, 20, 0, 60],
+                        'child3': [10, 40, 10, 0],
+                        'child4': [10, 20, 10, 60],
+                    },
+                    'distribute': {
+                        'flexbox': [100, 80],
+                        'child1': [10, 40, 0, 5],
+                        'child2': [10, 20, 0, 55],
+                        'child3': [10, 40, 10, 5],
+                        'child4': [10, 20, 10, 55],
+                    },
+                },
             },
         },
     },
@@ -767,6 +1359,43 @@ var expectations = {
                         'child4': [10, 20, 0, 55],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 0],
+                        'child2': [10, 20, 0, 40],
+                        'child3': [10, 40, 10, 0],
+                        'child4': [10, 20, 10, 40],
+                    },
+                    'end': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 20],
+                        'child2': [10, 20, 0, 60],
+                        'child3': [10, 40, 10, 20],
+                        'child4': [10, 20, 10, 60],
+                    },
+                    'center': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 10],
+                        'child2': [10, 20, 0, 50],
+                        'child3': [10, 40, 10, 10],
+                        'child4': [10, 20, 10, 50],
+                    },
+                    'justify': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 0],
+                        'child2': [10, 20, 0, 60],
+                        'child3': [10, 40, 10, 0],
+                        'child4': [10, 20, 10, 60],
+                    },
+                    'distribute': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 5],
+                        'child2': [10, 20, 0, 55],
+                        'child3': [10, 40, 10, 5],
+                        'child4': [10, 20, 10, 55],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -800,10 +1429,47 @@ var expectations = {
                     },
                     'distribute': {
                         'flexbox': [20, 80],
-                        'child1': [10, 40, 10, 35],
-                        'child2': [10, 20, 10, 5],
-                        'child3': [10, 40, 0, 35],
-                        'child4': [10, 20, 0, 5],
+                        'child1': [10, 40, 10, 35],
+                        'child2': [10, 20, 10, 5],
+                        'child3': [10, 40, 0, 35],
+                        'child4': [10, 20, 0, 5],
+                    },
+                },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 40],
+                        'child2': [10, 20, 0, 20],
+                        'child3': [10, 40, 10, 40],
+                        'child4': [10, 20, 10, 20],
+                    },
+                    'end': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 20],
+                        'child2': [10, 20, 0, 0],
+                        'child3': [10, 40, 10, 20],
+                        'child4': [10, 20, 10, 0],
+                    },
+                    'center': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 30],
+                        'child2': [10, 20, 0, 10],
+                        'child3': [10, 40, 10, 30],
+                        'child4': [10, 20, 10, 10],
+                    },
+                    'justify': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 40],
+                        'child2': [10, 20, 0, 0],
+                        'child3': [10, 40, 10, 40],
+                        'child4': [10, 20, 10, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 35],
+                        'child2': [10, 20, 0, 5],
+                        'child3': [10, 40, 10, 35],
+                        'child4': [10, 20, 10, 5],
                     },
                 },
             },
@@ -847,6 +1513,43 @@ var expectations = {
                         'child4': [20, 10, 5, 10],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 10],
+                        'child2': [20, 10, 20, 10],
+                        'child3': [40, 10, 40, 0],
+                        'child4': [20, 10, 20, 0],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 10],
+                        'child2': [20, 10, 0, 10],
+                        'child3': [40, 10, 20, 0],
+                        'child4': [20, 10, 0, 0],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 30, 10],
+                        'child2': [20, 10, 10, 10],
+                        'child3': [40, 10, 30, 0],
+                        'child4': [20, 10, 10, 0],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 10],
+                        'child2': [20, 10, 0, 10],
+                        'child3': [40, 10, 40, 0],
+                        'child4': [20, 10, 0, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 35, 10],
+                        'child2': [20, 10, 5, 10],
+                        'child3': [40, 10, 35, 0],
+                        'child4': [20, 10, 5, 0],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -886,6 +1589,43 @@ var expectations = {
                         'child4': [20, 10, 5, 0],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 0],
+                        'child2': [20, 10, 20, 0],
+                        'child3': [40, 10, 40, 10],
+                        'child4': [20, 10, 20, 10],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 0],
+                        'child2': [20, 10, 0, 0],
+                        'child3': [40, 10, 20, 10],
+                        'child4': [20, 10, 0, 10],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 30, 0],
+                        'child2': [20, 10, 10, 0],
+                        'child3': [40, 10, 30, 10],
+                        'child4': [20, 10, 10, 10],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 0],
+                        'child2': [20, 10, 0, 0],
+                        'child3': [40, 10, 40, 10],
+                        'child4': [20, 10, 0, 10],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 35, 0],
+                        'child2': [20, 10, 5, 0],
+                        'child3': [40, 10, 35, 10],
+                        'child4': [20, 10, 5, 10],
+                    },
+                },
             },
         },
         'row-reverse': {
@@ -927,6 +1667,43 @@ var expectations = {
                         'child4': [10, 20, 0, 5],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 40],
+                        'child2': [10, 20, 0, 20],
+                        'child3': [10, 40, 10, 40],
+                        'child4': [10, 20, 10, 20],
+                    },
+                    'end': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 20],
+                        'child2': [10, 20, 0, 0],
+                        'child3': [10, 40, 10, 20],
+                        'child4': [10, 20, 10, 0],
+                    },
+                    'center': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 30],
+                        'child2': [10, 20, 0, 10],
+                        'child3': [10, 40, 10, 30],
+                        'child4': [10, 20, 10, 10],
+                    },
+                    'justify': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 40],
+                        'child2': [10, 20, 0, 0],
+                        'child3': [10, 40, 10, 40],
+                        'child4': [10, 20, 10, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 35],
+                        'child2': [10, 20, 0, 5],
+                        'child3': [10, 40, 10, 35],
+                        'child4': [10, 20, 10, 5],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -966,6 +1743,43 @@ var expectations = {
                         'child4': [10, 20, 0, 55],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 0],
+                        'child2': [10, 20, 0, 40],
+                        'child3': [10, 40, 10, 0],
+                        'child4': [10, 20, 10, 40],
+                    },
+                    'end': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 20],
+                        'child2': [10, 20, 0, 60],
+                        'child3': [10, 40, 10, 20],
+                        'child4': [10, 20, 10, 60],
+                    },
+                    'center': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 10],
+                        'child2': [10, 20, 0, 50],
+                        'child3': [10, 40, 10, 10],
+                        'child4': [10, 20, 10, 50],
+                    },
+                    'justify': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 0],
+                        'child2': [10, 20, 0, 60],
+                        'child3': [10, 40, 10, 0],
+                        'child4': [10, 20, 10, 60],
+                    },
+                    'distribute': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 0, 5],
+                        'child2': [10, 20, 0, 55],
+                        'child3': [10, 40, 10, 5],
+                        'child4': [10, 20, 10, 55],
+                    },
+                },
             },
         },
         'column-reverse': {
@@ -1007,6 +1821,43 @@ var expectations = {
                         'child4': [20, 10, 55, 10],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 10],
+                        'child2': [20, 10, 40, 10],
+                        'child3': [40, 10, 0, 0],
+                        'child4': [20, 10, 40, 0],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 10],
+                        'child2': [20, 10, 60, 10],
+                        'child3': [40, 10, 20, 0],
+                        'child4': [20, 10, 60, 0],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 10, 10],
+                        'child2': [20, 10, 50, 10],
+                        'child3': [40, 10, 10, 0],
+                        'child4': [20, 10, 50, 0],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 10],
+                        'child2': [20, 10, 60, 10],
+                        'child3': [40, 10, 0, 0],
+                        'child4': [20, 10, 60, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 5, 10],
+                        'child2': [20, 10, 55, 10],
+                        'child3': [40, 10, 5, 0],
+                        'child4': [20, 10, 55, 0],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -1046,6 +1897,43 @@ var expectations = {
                         'child4': [20, 10, 55, 0],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 0],
+                        'child2': [20, 10, 40, 0],
+                        'child3': [40, 10, 0, 10],
+                        'child4': [20, 10, 40, 10],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 0],
+                        'child2': [20, 10, 60, 0],
+                        'child3': [40, 10, 20, 10],
+                        'child4': [20, 10, 60, 10],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 10, 0],
+                        'child2': [20, 10, 50, 0],
+                        'child3': [40, 10, 10, 10],
+                        'child4': [20, 10, 50, 10],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 0],
+                        'child2': [20, 10, 60, 0],
+                        'child3': [40, 10, 0, 10],
+                        'child4': [20, 10, 60, 10],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 5, 0],
+                        'child2': [20, 10, 55, 0],
+                        'child3': [40, 10, 5, 10],
+                        'child4': [20, 10, 55, 10],
+                    },
+                },
             },
         },
     },
@@ -1089,6 +1977,43 @@ var expectations = {
                         'child4': [10, 20, 10, 55],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 0],
+                        'child2': [10, 20, 10, 40],
+                        'child3': [10, 40, 0, 0],
+                        'child4': [10, 20, 0, 40],
+                    },
+                    'end': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 20],
+                        'child2': [10, 20, 10, 60],
+                        'child3': [10, 40, 0, 20],
+                        'child4': [10, 20, 0, 60],
+                    },
+                    'center': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 10],
+                        'child2': [10, 20, 10, 50],
+                        'child3': [10, 40, 0, 10],
+                        'child4': [10, 20, 0, 50],
+                    },
+                    'justify': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 0],
+                        'child2': [10, 20, 10, 60],
+                        'child3': [10, 40, 0, 0],
+                        'child4': [10, 20, 0, 60],
+                    },
+                    'distribute': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 5],
+                        'child2': [10, 20, 10, 55],
+                        'child3': [10, 40, 0, 5],
+                        'child4': [10, 20, 0, 55],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -1128,6 +2053,43 @@ var expectations = {
                         'child4': [10, 20, 10, 5],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 40],
+                        'child2': [10, 20, 10, 20],
+                        'child3': [10, 40, 0, 40],
+                        'child4': [10, 20, 0, 20],
+                    },
+                    'end': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 20],
+                        'child2': [10, 20, 10, 0],
+                        'child3': [10, 40, 0, 20],
+                        'child4': [10, 20, 0, 0],
+                    },
+                    'center': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 30],
+                        'child2': [10, 20, 10, 10],
+                        'child3': [10, 40, 0, 30],
+                        'child4': [10, 20, 0, 10],
+                    },
+                    'justify': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 40],
+                        'child2': [10, 20, 10, 0],
+                        'child3': [10, 40, 0, 40],
+                        'child4': [10, 20, 0, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 35],
+                        'child2': [10, 20, 10, 5],
+                        'child3': [10, 40, 0, 35],
+                        'child4': [10, 20, 0, 5],
+                    },
+                },
             },
         },
         'column': {
@@ -1169,6 +2131,43 @@ var expectations = {
                         'child4': [20, 10, 55, 10],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 10],
+                        'child2': [20, 10, 40, 10],
+                        'child3': [40, 10, 0, 0],
+                        'child4': [20, 10, 40, 0],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 10],
+                        'child2': [20, 10, 60, 10],
+                        'child3': [40, 10, 20, 0],
+                        'child4': [20, 10, 60, 0],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 10, 10],
+                        'child2': [20, 10, 50, 10],
+                        'child3': [40, 10, 10, 0],
+                        'child4': [20, 10, 50, 0],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 10],
+                        'child2': [20, 10, 60, 10],
+                        'child3': [40, 10, 0, 0],
+                        'child4': [20, 10, 60, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 5, 10],
+                        'child2': [20, 10, 55, 10],
+                        'child3': [40, 10, 5, 0],
+                        'child4': [20, 10, 55, 0],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -1208,6 +2207,43 @@ var expectations = {
                         'child4': [20, 10, 55, 0],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 0],
+                        'child2': [20, 10, 40, 0],
+                        'child3': [40, 10, 0, 10],
+                        'child4': [20, 10, 40, 10],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 0],
+                        'child2': [20, 10, 60, 0],
+                        'child3': [40, 10, 20, 10],
+                        'child4': [20, 10, 60, 10],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 10, 0],
+                        'child2': [20, 10, 50, 0],
+                        'child3': [40, 10, 10, 10],
+                        'child4': [20, 10, 50, 10],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 0, 0],
+                        'child2': [20, 10, 60, 0],
+                        'child3': [40, 10, 0, 10],
+                        'child4': [20, 10, 60, 10],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 5, 0],
+                        'child2': [20, 10, 55, 0],
+                        'child3': [40, 10, 5, 10],
+                        'child4': [20, 10, 55, 10],
+                    },
+                },
             },
         },
         'row-reverse': {
@@ -1249,6 +2285,43 @@ var expectations = {
                         'child4': [10, 20, 10, 5],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 40],
+                        'child2': [10, 20, 10, 20],
+                        'child3': [10, 40, 0, 40],
+                        'child4': [10, 20, 0, 20],
+                    },
+                    'end': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 20],
+                        'child2': [10, 20, 10, 0],
+                        'child3': [10, 40, 0, 20],
+                        'child4': [10, 20, 0, 0],
+                    },
+                    'center': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 30],
+                        'child2': [10, 20, 10, 10],
+                        'child3': [10, 40, 0, 30],
+                        'child4': [10, 20, 0, 10],
+                    },
+                    'justify': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 40],
+                        'child2': [10, 20, 10, 0],
+                        'child3': [10, 40, 0, 40],
+                        'child4': [10, 20, 0, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 35],
+                        'child2': [10, 20, 10, 5],
+                        'child3': [10, 40, 0, 35],
+                        'child4': [10, 20, 0, 5],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -1288,6 +2361,43 @@ var expectations = {
                         'child4': [10, 20, 10, 55],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 0],
+                        'child2': [10, 20, 10, 40],
+                        'child3': [10, 40, 0, 0],
+                        'child4': [10, 20, 0, 40],
+                    },
+                    'end': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 20],
+                        'child2': [10, 20, 10, 60],
+                        'child3': [10, 40, 0, 20],
+                        'child4': [10, 20, 0, 60],
+                    },
+                    'center': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 10],
+                        'child2': [10, 20, 10, 50],
+                        'child3': [10, 40, 0, 10],
+                        'child4': [10, 20, 0, 50],
+                    },
+                    'justify': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 0],
+                        'child2': [10, 20, 10, 60],
+                        'child3': [10, 40, 0, 0],
+                        'child4': [10, 20, 0, 60],
+                    },
+                    'distribute': {
+                        'flexbox': [20, 80],
+                        'child1': [10, 40, 10, 5],
+                        'child2': [10, 20, 10, 55],
+                        'child3': [10, 40, 0, 5],
+                        'child4': [10, 20, 0, 55],
+                    },
+                },
             },
         },
         'column-reverse': {
@@ -1329,6 +2439,43 @@ var expectations = {
                         'child4': [20, 10, 5, 10],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 10],
+                        'child2': [20, 10, 20, 10],
+                        'child3': [40, 10, 40, 0],
+                        'child4': [20, 10, 20, 0],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 10],
+                        'child2': [20, 10, 0, 10],
+                        'child3': [40, 10, 20, 0],
+                        'child4': [20, 10, 0, 0],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 30, 10],
+                        'child2': [20, 10, 10, 10],
+                        'child3': [40, 10, 30, 0],
+                        'child4': [20, 10, 10, 0],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 10],
+                        'child2': [20, 10, 0, 10],
+                        'child3': [40, 10, 40, 0],
+                        'child4': [20, 10, 0, 0],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 35, 10],
+                        'child2': [20, 10, 5, 10],
+                        'child3': [40, 10, 35, 0],
+                        'child4': [20, 10, 5, 0],
+                    },
+                },
             },
             'rtl': {
                 'wrap': {
@@ -1368,6 +2515,43 @@ var expectations = {
                         'child4': [20, 10, 5, 0],
                     },
                 },
+                'wrap-reverse': {
+                    'start': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 0],
+                        'child2': [20, 10, 20, 0],
+                        'child3': [40, 10, 40, 10],
+                        'child4': [20, 10, 20, 10],
+                    },
+                    'end': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 20, 0],
+                        'child2': [20, 10, 0, 0],
+                        'child3': [40, 10, 20, 10],
+                        'child4': [20, 10, 0, 10],
+                    },
+                    'center': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 30, 0],
+                        'child2': [20, 10, 10, 0],
+                        'child3': [40, 10, 30, 10],
+                        'child4': [20, 10, 10, 10],
+                    },
+                    'justify': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 40, 0],
+                        'child2': [20, 10, 0, 0],
+                        'child3': [40, 10, 40, 10],
+                        'child4': [20, 10, 0, 10],
+                    },
+                    'distribute': {
+                        'flexbox': [80, 20],
+                        'child1': [40, 10, 35, 0],
+                        'child2': [20, 10, 5, 0],
+                        'child3': [40, 10, 35, 10],
+                        'child4': [20, 10, 5, 10],
+                    },
+                },
             },
         },
     },
@@ -1398,8 +2582,7 @@ function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength,
 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
 var directions = ['ltr', 'rtl'];
-// FIXME: Implement and test wrap-reverse.
-var wraps = ['wrap'];
+var wraps = ['wrap', 'wrap-reverse'];
 var packs = ['start', 'end', 'center', 'justify', 'distribute'];
 
 writingModes.forEach(function(writingMode) {
index e0b6a6c..07d4f1d 100644 (file)
@@ -82,6 +82,14 @@ var expectations = {
                     'child4': [70, 20, 0, 15],
                     'child5': [60, 10, 0, 35],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 0, 40],
+                    'child2': [30, 10, 30, 35],
+                    'child3': [60, 5, 0, 30],
+                    'child4': [70, 20, 0, 10],
+                    'child5': [60, 10, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -92,6 +100,14 @@ var expectations = {
                     'child4': [70, 20, -10, 15],
                     'child5': [60, 10, 0, 35],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 30, 40],
+                    'child2': [30, 10, 0, 35],
+                    'child3': [60, 5, 0, 30],
+                    'child4': [70, 20, -10, 10],
+                    'child5': [60, 10, 0, 0],
+                },
             },
         },
         'column': {
@@ -104,6 +120,14 @@ var expectations = {
                     'child4': [20, 70, 15, 0],
                     'child5': [10, 60, 35, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 60],
+                    'child1': [5, 30, 595, 0],
+                    'child2': [10, 30, 590, 30],
+                    'child3': [5, 60, 585, 0],
+                    'child4': [20, 70, 565, 0],
+                    'child5': [10, 60, 555, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -114,6 +138,14 @@ var expectations = {
                     'child4': [20, 70, 565, 0],
                     'child5': [10, 60, 555, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 60],
+                    'child1': [5, 30, 0, 0],
+                    'child2': [10, 30, 0, 30],
+                    'child3': [5, 60, 10, 0],
+                    'child4': [20, 70, 15, 0],
+                    'child5': [10, 60, 35, 0],
+                },
             },
         },
         'row-reverse': {
@@ -126,6 +158,14 @@ var expectations = {
                     'child4': [70, 20, -10, 15],
                     'child5': [60, 10, 0, 35],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 30, 40],
+                    'child2': [30, 10, 0, 35],
+                    'child3': [60, 5, 0, 30],
+                    'child4': [70, 20, -10, 10],
+                    'child5': [60, 10, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -136,6 +176,14 @@ var expectations = {
                     'child4': [70, 20, 0, 15],
                     'child5': [60, 10, 0, 35],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 0, 40],
+                    'child2': [30, 10, 30, 35],
+                    'child3': [60, 5, 0, 30],
+                    'child4': [70, 20, 0, 10],
+                    'child5': [60, 10, 0, 0],
+                },
             },
         },
         'column-reverse': {
@@ -148,6 +196,14 @@ var expectations = {
                     'child4': [20, 70, 15, -10],
                     'child5': [10, 60, 35, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 60],
+                    'child1': [5, 30, 595, 30],
+                    'child2': [10, 30, 590, 0],
+                    'child3': [5, 60, 585, 0],
+                    'child4': [20, 70, 565, -10],
+                    'child5': [10, 60, 555, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -158,6 +214,14 @@ var expectations = {
                     'child4': [20, 70, 565, -10],
                     'child5': [10, 60, 555, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 60],
+                    'child1': [5, 30, 0, 30],
+                    'child2': [10, 30, 0, 0],
+                    'child3': [5, 60, 10, 0],
+                    'child4': [20, 70, 15, -10],
+                    'child5': [10, 60, 35, 0],
+                },
             },
         },
     },
@@ -172,6 +236,14 @@ var expectations = {
                     'child4': [70, 20, 0, 10],
                     'child5': [60, 10, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 0, 0],
+                    'child2': [30, 10, 30, 0],
+                    'child3': [60, 5, 0, 10],
+                    'child4': [70, 20, 0, 15],
+                    'child5': [60, 10, 0, 35],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -182,6 +254,14 @@ var expectations = {
                     'child4': [70, 20, -10, 10],
                     'child5': [60, 10, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 30, 0],
+                    'child2': [30, 10, 0, 0],
+                    'child3': [60, 5, 0, 10],
+                    'child4': [70, 20, -10, 15],
+                    'child5': [60, 10, 0, 35],
+                },
             },
         },
         'column': {
@@ -194,6 +274,14 @@ var expectations = {
                     'child4': [20, 70, 15, -10],
                     'child5': [10, 60, 35, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 60],
+                    'child1': [5, 30, 595, 30],
+                    'child2': [10, 30, 590, 0],
+                    'child3': [5, 60, 585, 0],
+                    'child4': [20, 70, 565, -10],
+                    'child5': [10, 60, 555, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -204,6 +292,14 @@ var expectations = {
                     'child4': [20, 70, 565, -10],
                     'child5': [10, 60, 555, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 60],
+                    'child1': [5, 30, 0, 30],
+                    'child2': [10, 30, 0, 0],
+                    'child3': [5, 60, 10, 0],
+                    'child4': [20, 70, 15, -10],
+                    'child5': [10, 60, 35, 0],
+                },
             },
         },
         'row-reverse': {
@@ -216,6 +312,14 @@ var expectations = {
                     'child4': [70, 20, -10, 10],
                     'child5': [60, 10, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 30, 0],
+                    'child2': [30, 10, 0, 0],
+                    'child3': [60, 5, 0, 10],
+                    'child4': [70, 20, -10, 15],
+                    'child5': [60, 10, 0, 35],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -226,6 +330,14 @@ var expectations = {
                     'child4': [70, 20, 0, 10],
                     'child5': [60, 10, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 0, 0],
+                    'child2': [30, 10, 30, 0],
+                    'child3': [60, 5, 0, 10],
+                    'child4': [70, 20, 0, 15],
+                    'child5': [60, 10, 0, 35],
+                },
             },
         },
         'column-reverse': {
@@ -238,6 +350,14 @@ var expectations = {
                     'child4': [20, 70, 15, 0],
                     'child5': [10, 60, 35, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 60],
+                    'child1': [5, 30, 595, 0],
+                    'child2': [10, 30, 590, 30],
+                    'child3': [5, 60, 585, 0],
+                    'child4': [20, 70, 565, 0],
+                    'child5': [10, 60, 555, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -248,6 +368,14 @@ var expectations = {
                     'child4': [20, 70, 565, 0],
                     'child5': [10, 60, 555, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [600, 60],
+                    'child1': [5, 30, 0, 0],
+                    'child2': [10, 30, 0, 30],
+                    'child3': [5, 60, 10, 0],
+                    'child4': [20, 70, 15, 0],
+                    'child5': [10, 60, 35, 0],
+                },
             },
         },
     },
@@ -262,6 +390,14 @@ var expectations = {
                     'child4': [20, 70, 10, 0],
                     'child5': [10, 60, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [45, 60],
+                    'child1': [5, 30, 0, 0],
+                    'child2': [10, 30, 0, 30],
+                    'child3': [5, 60, 10, 0],
+                    'child4': [20, 70, 15, 0],
+                    'child5': [10, 60, 35, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -272,6 +408,14 @@ var expectations = {
                     'child4': [20, 70, 10, -10],
                     'child5': [10, 60, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [45, 60],
+                    'child1': [5, 30, 0, 30],
+                    'child2': [10, 30, 0, 0],
+                    'child3': [5, 60, 10, 0],
+                    'child4': [20, 70, 15, -10],
+                    'child5': [10, 60, 35, 0],
+                },
             },
         },
         'column': {
@@ -284,6 +428,14 @@ var expectations = {
                     'child4': [70, 20, -10, 15],
                     'child5': [60, 10, 0, 35],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 30, 40],
+                    'child2': [30, 10, 0, 35],
+                    'child3': [60, 5, 0, 30],
+                    'child4': [70, 20, -10, 10],
+                    'child5': [60, 10, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -294,6 +446,14 @@ var expectations = {
                     'child4': [70, 20, -10, 10],
                     'child5': [60, 10, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 30, 0],
+                    'child2': [30, 10, 0, 0],
+                    'child3': [60, 5, 0, 10],
+                    'child4': [70, 20, -10, 15],
+                    'child5': [60, 10, 0, 35],
+                },
             },
         },
         'row-reverse': {
@@ -306,6 +466,14 @@ var expectations = {
                     'child4': [20, 70, 10, -10],
                     'child5': [10, 60, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [45, 60],
+                    'child1': [5, 30, 0, 30],
+                    'child2': [10, 30, 0, 0],
+                    'child3': [5, 60, 10, 0],
+                    'child4': [20, 70, 15, -10],
+                    'child5': [10, 60, 35, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -316,6 +484,14 @@ var expectations = {
                     'child4': [20, 70, 10, 0],
                     'child5': [10, 60, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [45, 60],
+                    'child1': [5, 30, 0, 0],
+                    'child2': [10, 30, 0, 30],
+                    'child3': [5, 60, 10, 0],
+                    'child4': [20, 70, 15, 0],
+                    'child5': [10, 60, 35, 0],
+                },
             },
         },
         'column-reverse': {
@@ -328,6 +504,14 @@ var expectations = {
                     'child4': [70, 20, 0, 15],
                     'child5': [60, 10, 0, 35],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 0, 40],
+                    'child2': [30, 10, 30, 35],
+                    'child3': [60, 5, 0, 30],
+                    'child4': [70, 20, 0, 10],
+                    'child5': [60, 10, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -338,6 +522,14 @@ var expectations = {
                     'child4': [70, 20, 0, 10],
                     'child5': [60, 10, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 0, 0],
+                    'child2': [30, 10, 30, 0],
+                    'child3': [60, 5, 0, 10],
+                    'child4': [70, 20, 0, 15],
+                    'child5': [60, 10, 0, 35],
+                },
             },
         },
     },
@@ -352,6 +544,14 @@ var expectations = {
                     'child4': [20, 70, 15, 0],
                     'child5': [10, 60, 35, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [45, 60],
+                    'child1': [5, 30, 40, 0],
+                    'child2': [10, 30, 35, 30],
+                    'child3': [5, 60, 30, 0],
+                    'child4': [20, 70, 10, 0],
+                    'child5': [10, 60, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -362,6 +562,14 @@ var expectations = {
                     'child4': [20, 70, 15, -10],
                     'child5': [10, 60, 35, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [45, 60],
+                    'child1': [5, 30, 40, 30],
+                    'child2': [10, 30, 35, 0],
+                    'child3': [5, 60, 30, 0],
+                    'child4': [20, 70, 10, -10],
+                    'child5': [10, 60, 0, 0],
+                },
             },
         },
         'column': {
@@ -374,6 +582,14 @@ var expectations = {
                     'child4': [70, 20, 0, 15],
                     'child5': [60, 10, 0, 35],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 0, 40],
+                    'child2': [30, 10, 30, 35],
+                    'child3': [60, 5, 0, 30],
+                    'child4': [70, 20, 0, 10],
+                    'child5': [60, 10, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -384,6 +600,14 @@ var expectations = {
                     'child4': [70, 20, 0, 10],
                     'child5': [60, 10, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 0, 0],
+                    'child2': [30, 10, 30, 0],
+                    'child3': [60, 5, 0, 10],
+                    'child4': [70, 20, 0, 15],
+                    'child5': [60, 10, 0, 35],
+                },
             },
         },
         'row-reverse': {
@@ -396,6 +620,14 @@ var expectations = {
                     'child4': [20, 70, 15, -10],
                     'child5': [10, 60, 35, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [45, 60],
+                    'child1': [5, 30, 40, 30],
+                    'child2': [10, 30, 35, 0],
+                    'child3': [5, 60, 30, 0],
+                    'child4': [20, 70, 10, -10],
+                    'child5': [10, 60, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -406,6 +638,14 @@ var expectations = {
                     'child4': [20, 70, 15, 0],
                     'child5': [10, 60, 35, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [45, 60],
+                    'child1': [5, 30, 40, 0],
+                    'child2': [10, 30, 35, 30],
+                    'child3': [5, 60, 30, 0],
+                    'child4': [20, 70, 10, 0],
+                    'child5': [10, 60, 0, 0],
+                },
             },
         },
         'column-reverse': {
@@ -418,6 +658,14 @@ var expectations = {
                     'child4': [70, 20, -10, 15],
                     'child5': [60, 10, 0, 35],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 30, 40],
+                    'child2': [30, 10, 0, 35],
+                    'child3': [60, 5, 0, 30],
+                    'child4': [70, 20, -10, 10],
+                    'child5': [60, 10, 0, 0],
+                },
             },
             'rtl': {
                 'wrap': {
@@ -428,6 +676,14 @@ var expectations = {
                     'child4': [70, 20, -10, 10],
                     'child5': [60, 10, 0, 0],
                 },
+                'wrap-reverse': {
+                    'flexbox': [60, 45],
+                    'child1': [30, 5, 30, 0],
+                    'child2': [30, 10, 0, 0],
+                    'child3': [60, 5, 0, 10],
+                    'child4': [70, 20, -10, 15],
+                    'child5': [60, 10, 0, 35],
+                },
             },
         },
     },
@@ -458,8 +714,7 @@ function addChild(flexbox, mainAxis, crossAxis, preferredSize, crossAxisLength,
 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
 var directions = ['ltr', 'rtl'];
-// FIXME: Implement and test wrap-reverse.
-var wraps = ['wrap'];
+var wraps = ['wrap', 'wrap-reverse'];
 
 writingModes.forEach(function(writingMode) {
     flexDirections.forEach(function(flexDirection) {
index ecc3fab..ad535ab 100644 (file)
@@ -1,3 +1,31 @@
+2012-03-08  Tony Chang  <tony@chromium.org>
+
+        implement flexbox wrap-reverse
+        https://bugs.webkit.org/show_bug.cgi?id=80552
+
+        Reviewed by Ojan Vafai.
+
+        No new tests, but additional coverage in:
+            css3/flexbox/multiline-align.html
+            css3/flexbox/multiline-pack.html
+            css3/flexbox/multiline.html
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::WrapReverseContext::WrapReverseContext): Helper struct to hold information needed for reversing
+        the order of lines.
+        (RenderFlexibleBox::WrapReverseContext):
+        (WebCore::RenderFlexibleBox::WrapReverseContext::addCrossAxisOffset):
+        (WebCore::RenderFlexibleBox::WrapReverseContext::addNumberOfChildrenOnLine):
+        (WebCore::RenderFlexibleBox::WrapReverseContext::lineCrossAxisDelta): Computes the number of pixels to move a line.
+        (WebCore):
+        (WebCore::RenderFlexibleBox::layoutFlexItems): Call flipForWrapReverse if needed. This happens
+        before flipForRightToLeftColumn because otherwise the crossAxisOffsets will be wrong.
+        (WebCore::flexAlignForChild):
+        (WebCore::RenderFlexibleBox::alignChildren): Flip alignment in wrap-reverse because the cross directions are flipped.
+        (WebCore::RenderFlexibleBox::flipForWrapReverse): Flip each line.
+        * rendering/RenderFlexibleBox.h:
+        (RenderFlexibleBox):
+
 2012-03-08  Adam Klein  <adamk@chromium.org>
 
         Remove InDocumentFlag manipulation methods from Node interface
index 05f70db..e33f320 100644 (file)
@@ -34,6 +34,7 @@
 #include "LayoutRepainter.h"
 #include "RenderLayer.h"
 #include "RenderView.h"
+#include <limits>
 
 namespace WebCore {
 
@@ -101,6 +102,40 @@ private:
     Vector<int>::const_iterator m_orderValuesIterator;
 };
 
+struct RenderFlexibleBox::WrapReverseContext {
+    explicit WrapReverseContext(EFlexWrap flexWrap)
+        : isWrapReverse(flexWrap == FlexWrapReverse)
+    {
+    }
+
+    void addCrossAxisOffset(LayoutUnit offset)
+    {
+        if (!isWrapReverse)
+            return;
+        crossAxisOffsets.append(offset);
+    }
+
+    void addNumberOfChildrenOnLine(size_t numberOfChildren)
+    {
+        if (!isWrapReverse)
+            return;
+        childrenPerLine.append(numberOfChildren);
+    }
+
+    LayoutUnit lineCrossAxisDelta(size_t line, LayoutUnit crossAxisContentExtent) const
+    {
+        ASSERT(line + 1 < crossAxisOffsets.size());
+        LayoutUnit lineHeight = crossAxisOffsets[line + 1] - crossAxisOffsets[line];
+        LayoutUnit originalOffset = crossAxisOffsets[line] - crossAxisOffsets[0];
+        LayoutUnit newOffset = crossAxisContentExtent - originalOffset - lineHeight;
+        return newOffset - originalOffset;
+    }
+
+    WTF::Vector<LayoutUnit> crossAxisOffsets;
+    WTF::Vector<size_t> childrenPerLine;
+    bool isWrapReverse;
+};
+
 
 RenderFlexibleBox::RenderFlexibleBox(Node* node)
     : RenderBlock(node)
@@ -544,6 +579,10 @@ void RenderFlexibleBox::layoutFlexItems(bool relayoutChildren)
     float totalNegativeFlexibility;
     FlexOrderIterator flexIterator(this, flexOrderValues);
 
+    // For wrap-reverse, we need to layout as wrap, then reverse the lines. The next two arrays
+    // are some extra information so it's possible to reverse the lines.
+    WrapReverseContext wrapReverseContext(style()->flexWrap());
+
     LayoutUnit crossAxisOffset = flowAwareBorderBefore() + flowAwarePaddingBefore();
     LayoutUnit mainAxisFlexibleSpace = mainAxisContentExtent();
     while (computeNextFlexLine(flexIterator, orderedChildren, preferredMainAxisExtent, totalPositiveFlexibility, totalNegativeFlexibility)) {
@@ -555,9 +594,16 @@ void RenderFlexibleBox::layoutFlexItems(bool relayoutChildren)
             ASSERT(inflexibleItems.size() > 0);
         }
 
+        wrapReverseContext.addNumberOfChildrenOnLine(orderedChildren.size());
+        wrapReverseContext.addCrossAxisOffset(crossAxisOffset);
         layoutAndPlaceChildren(crossAxisOffset, orderedChildren, childSizes, availableFreeSpace);
     }
 
+    if (wrapReverseContext.isWrapReverse) {
+        wrapReverseContext.addCrossAxisOffset(crossAxisOffset);
+        flipForWrapReverse(flexIterator, wrapReverseContext);
+    }
+
     // direction:rtl + flex-direction:column means the cross-axis direction is flipped.
     flipForRightToLeftColumn(flexIterator);
 }
@@ -753,7 +799,15 @@ static EFlexAlign flexAlignForChild(RenderBox* child)
 {
     EFlexAlign align = child->style()->flexItemAlign();
     if (align == AlignAuto)
-        return child->parent()->style()->flexAlign();
+        align = child->parent()->style()->flexAlign();
+
+    if (child->parent()->style()->flexWrap() == FlexWrapReverse) {
+        if (align == AlignStart)
+            align = AlignEnd;
+        else if (align == AlignEnd)
+            align = AlignStart;
+    }
+
     return align;
 }
 
@@ -867,6 +921,8 @@ void RenderFlexibleBox::adjustAlignmentForChild(RenderBox* child, LayoutUnit del
 
 void RenderFlexibleBox::alignChildren(const OrderedFlexItemList& children, LayoutUnit lineCrossAxisExtent, LayoutUnit maxAscent)
 {
+    LayoutUnit minMarginAfterBaseline = std::numeric_limits<LayoutUnit>::max();
+
     for (size_t i = 0; i < children.size(); ++i) {
         RenderBox* child = children[i];
         switch (flexAlignForChild(child)) {
@@ -893,6 +949,9 @@ void RenderFlexibleBox::alignChildren(const OrderedFlexItemList& children, Layou
                 child->setChildNeedsLayout(true);
                 child->layoutIfNeeded();
             }
+            // Since wrap-reverse flips cross start and cross end, strech children should be aligned with the cross end.
+            if (style()->flexWrap() == FlexWrapReverse)
+                adjustAlignmentForChild(child, availableAlignmentSpaceForChild(lineCrossAxisExtent, child));
             break;
         }
         case AlignStart:
@@ -905,11 +964,25 @@ void RenderFlexibleBox::alignChildren(const OrderedFlexItemList& children, Layou
             break;
         case AlignBaseline: {
             LayoutUnit ascent = marginBoxAscentForChild(child);
-            adjustAlignmentForChild(child, maxAscent - ascent);
+            LayoutUnit startOffset = maxAscent - ascent;
+            adjustAlignmentForChild(child, startOffset);
+
+            if (style()->flexWrap() == FlexWrapReverse)
+                minMarginAfterBaseline = std::min(minMarginAfterBaseline, availableAlignmentSpaceForChild(lineCrossAxisExtent, child) - startOffset);
             break;
         }
         }
     }
+
+    // wrap-reverse flips the cross axis start and end. For baseline alignment, this means we
+    // need to align the after edge of baseline elements with the after edge of the flex line.
+    if (style()->flexWrap() == FlexWrapReverse && minMarginAfterBaseline) {
+        for (size_t i = 0; i < children.size(); ++i) {
+            RenderBox* child = children[i];
+            if (flexAlignForChild(child) == AlignBaseline)
+                adjustAlignmentForChild(child, minMarginAfterBaseline);
+        }
+    }
 }
 
 void RenderFlexibleBox::flipForRightToLeftColumn(FlexOrderIterator& iterator)
@@ -925,4 +998,28 @@ void RenderFlexibleBox::flipForRightToLeftColumn(FlexOrderIterator& iterator)
     }
 }
 
+void RenderFlexibleBox::flipForWrapReverse(FlexOrderIterator& iterator, const WrapReverseContext& wrapReverseContext)
+{
+    if (!isColumnFlow())
+        computeLogicalHeight();
+
+    size_t currentChild = 0;
+    size_t lineNumber = 0;
+    LayoutUnit contentExtent = crossAxisContentExtent();
+    for (RenderBox* child = iterator.first(); child; child = iterator.next()) {
+        LayoutPoint location = flowAwareLocationForChild(child);
+        location.setY(location.y() + wrapReverseContext.lineCrossAxisDelta(lineNumber, contentExtent));
+
+        LayoutRect oldRect = child->frameRect();
+        setFlowAwareLocationForChild(child, location);
+        if (!selfNeedsLayout() && child->checkForRepaintDuringLayout())
+            child->repaintDuringLayoutIfMoved(oldRect);
+
+        if (++currentChild == wrapReverseContext.childrenPerLine[lineNumber]) {
+            ++lineNumber;
+            currentChild = 0;
+        }
+    }
+}
+
 }
index 32d3247..3490bf1 100644 (file)
@@ -56,6 +56,8 @@ private:
     typedef WTF::HashMap<const RenderBox*, LayoutUnit> InflexibleFlexItemSize;
     typedef WTF::Vector<RenderBox*> OrderedFlexItemList;
 
+    struct WrapReverseContext;
+
     bool hasOrthogonalFlow(RenderBox* child) const;
     bool isColumnFlow() const;
     bool isLeftToRightFlow() const;
@@ -109,6 +111,7 @@ private:
     void layoutColumnReverse(const OrderedFlexItemList&, const WTF::Vector<LayoutUnit>& childSizes, LayoutUnit crossAxisOffset, LayoutUnit availableFreeSpace);
     void alignChildren(const OrderedFlexItemList&, LayoutUnit lineCrossAxisExtent, LayoutUnit maxAscent);
     void flipForRightToLeftColumn(FlexOrderIterator&);
+    void flipForWrapReverse(FlexOrderIterator&, const WrapReverseContext&);
 };
 
 } // namespace WebCore