--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001-ref.xhtml
@@ -98,10 +98,32 @@
            /><div class="b" style="margin-top: 70px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-top: calc(40px / 6)"
            /><div class="b" style="margin-top: calc(40px / 3)"
            /><div class="c" style="margin-top: calc(40px / 3)"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001a.xhtml
@@ -99,10 +99,32 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001b.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-001b.xhtml
@@ -100,10 +100,32 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002-ref.xhtml
@@ -111,10 +111,32 @@
            /><div style="margin-top: 64px"><div class="b"/></div>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-top: calc(8px / 6)"
            /><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div
             ><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div>
     </div>
 
+    <!-- left -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-002.xhtml
@@ -112,10 +112,32 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003-ref.xhtml
@@ -94,10 +94,32 @@
     </div>
     <div class="flexbox" style="margin-top: 77.5px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-top: 55px">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-003.xhtml
@@ -108,10 +108,32 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004-ref.xhtml
@@ -105,10 +105,32 @@
     </div>
     <div class="flexbox" style="margin-top: 66.5px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-top: 39px">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-top: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-004.xhtml
@@ -119,10 +119,32 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005-ref.xhtml
@@ -93,10 +93,32 @@
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox">
+      <div class="a"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-vert-005.xhtml
@@ -102,10 +102,32 @@
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="justify-content: space-around">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: left">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="justify-content: right">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>