diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml
index 79af15889ee9..a9235f07ea35 100644
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001-ref.xhtml
@@ -66,6 +66,14 @@
         background: violet;
         float: left;
       }
+      .left {
+        background: tan;
+        float: left;
+      }
+      .right {
+        background: brown;
+        float: right;
+      }
 
       <!-- We center shrinkwrapped text by putting it into an inline-block, and
            then wrapping that inline-block in a helper-div that has
@@ -103,10 +111,12 @@
         <div class="initial">initial</div>
       </div>
       <div class="inherit">inherit</div>
-      <!-- Since that last div is floated right, the container doesn't include
-           its height by default. So we add some invisible hacky text (of the
+      <div class="left">left</div>
+      <div class="right">right</div>
+      <!-- Since the last three divs are floated, the container doesn't include
+           their heights by default. So we add some invisible hacky text (of the
            same font) to make sure our container is tall enough. -->
-      <span style="visibility:hidden">hacky text</span>
+      <span style="visibility:hidden">hacky text<br/>(line 2)<br/>(line 3)</span>
     </div>
   </body>
 </html>
diff --git a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001.xhtml b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001.xhtml
index 1016c28f824e..d0ef2963c8f8 100644
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-vert-rtl-001.xhtml
@@ -72,6 +72,14 @@
         background: violet;
         align-self: inherit;
       }
+      .left {
+        background: tan;
+        align-self: left;
+      }
+      .right {
+        background: brown;
+        align-self: right;
+      }
    </style>
   </head>
   <body>
@@ -90,6 +98,8 @@
       <div class="unspecified">unspec</div>
       <div class="initial">initial</div>
       <div class="inherit">inherit</div>
+      <div class="left">left</div>
+      <div class="right">right</div>
     </div>
   </body>
 </html>
