--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001-ref.xhtml
@@ -100,10 +100,32 @@
            /><div class="b" style="margin-left: 70px"/>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: calc(40px / 6)"
            /><div class="b" style="margin-left: calc(40px / 3)"
            /><div class="c" style="margin-left: 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" style="margin-left: 190px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 140px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001a.xhtml
@@ -97,10 +97,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-horiz-001b.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-001b.xhtml
@@ -103,10 +103,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-horiz-002-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002-ref.xhtml
@@ -114,10 +114,32 @@
            /><div style="margin-left: 59px"><div class="b"/></div>
     </div>
     <div class="flexbox">
       <div class="a" style="margin-left: calc(8px / 6)"
            /><div style="margin-left: calc(8px / 3)"><div class="b"/></div
             ><div style="margin-left: calc(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" style="margin-left: 180px"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 118px"/><div class="b"/>
+    </div>
+    <div class="flexbox">
+      <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-002.xhtml
@@ -110,10 +110,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-horiz-003-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003-ref.xhtml
@@ -96,10 +96,32 @@
     </div>
     <div class="flexbox" style="margin-left: 77.5px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-left: 55px">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="margin-left: 95px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 55px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 10px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-003.xhtml
@@ -105,10 +105,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-horiz-004-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004-ref.xhtml
@@ -108,10 +108,32 @@
     </div>
     <div class="flexbox" style="margin-left: 66.5px">
       <div class="a"/><div class="b"/>
     </div>
     <div class="flexbox" style="margin-left: 39px">
       <div class="a"/><div class="b"/><div class="c"/>
     </div>
 
+    <!-- left -->
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: 100px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
+    <!-- right -->
+    <div class="flexbox" style="margin-left: 85px">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="margin-left: 33px">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="margin-left: -22px">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-004.xhtml
@@ -116,10 +116,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-horiz-005-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005-ref.xhtml
@@ -129,10 +129,34 @@
       <div style="flex: 0.5"/>
       <div class="a"/>
       <div style="flex: 1"/>
       <div class="b"/>
       <div style="flex: 1"/>
       <div class="c"/>
       <div style="flex: 0.5"/>
     </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" style="float:right; clear:right;">
+      <div class="a"/>
+    </div>
+    <div class="flexbox" style="float:right; clear:right;">
+      <div class="a"/><div class="b"/>
+    </div>
+    <div class="flexbox" style="float:right; clear:right;">
+      <div class="a"/><div class="b"/><div class="c"/>
+    </div>
+    <div style="clear:right;"></div>
+
   </body>
 </html>

--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-justify-content-horiz-005.xhtml
@@ -94,10 +94,33 @@
       <div class="a"/>
     </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>