Bug 1438704: Adjust some flexbox reftests to use special Ahem character rather than border-color to signal directionality. r=mats
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 15 Feb 2018 15:54:19 -0800
changeset 404132 6ba349d419dd67074dcfffc56ed8fa38337511da
parent 404131 0854548560aa2310ca47b53fe41d9b9651391db5
child 404133 9eaebbcc33fd3824876db1b8b33750e997c02f7b
child 404202 24117c13a4043ea2ec4e56d55569e8d643446e82
push id99938
push usercbrindusan@mozilla.com
push dateFri, 16 Feb 2018 09:57:26 +0000
treeherdermozilla-inbound@5f2344531e28 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats
bugs1438704
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1438704: Adjust some flexbox reftests to use special Ahem character rather than border-color to signal directionality. r=mats This patch just removes the following styles from these reftests: border-block-start-color: orange; border-inline-start-color: lime; (which latest Chrome, Safari, and Edge don't support anyway) ...and adjusts all text runs to start with 'p' -- which has special rendering in Ahem -- so that directionality can still be inferred. MozReview-Commit-ID: KBCsW0wjON7
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
layout/reftests/w3c-css/submitted/flexbox/reftest.list
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
@@ -18,20 +18,16 @@
     height: 150px;
     width: 500px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
   }
 
   .small { font: 12px Ahem; }
   .big   { font: 20px Ahem; }
 
   .hl  { writing-mode: horizontal-tb;  direction: ltr; }
@@ -53,42 +49,42 @@
   .container.hl > * { float: left; }
   .container.hr > * { float: right; }
 
   </style>
 </head>
 <body>
 
 <div class="container hl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container hl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 <div class="container hr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container hr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
@@ -25,20 +25,16 @@
     height: 150px;
     width: 500px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
   }
 
   .small { font: 12px Ahem; }
   .big   { font: 20px Ahem; }
 
   .hl  { writing-mode: horizontal-tb;  direction: ltr; }
@@ -47,42 +43,42 @@
   .vr  { writing-mode: vertical-rl;    direction: ltr; }
   .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
   .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
   </style>
 </head>
 <body>
 
 <div class="container hl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container hl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 <div class="container hr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container hr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
@@ -19,20 +19,16 @@
     height: 500px;
     width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
 
     /* This really floats to top ('logical left'), since all the containers
        have a vertical writing mode. */
     float: left;
   }
 
@@ -56,42 +52,42 @@
        and their horizontal writing-mode, so those ones do not stretch.) */
     width: 126px;
   }
   </style>
 </head>
 <body>
 
 <div class="container vl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 <div class="container vr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
@@ -26,20 +26,16 @@
     height: 500px;
     width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
   }
 
   .small { font: 12px Ahem; }
   .big   { font: 20px Ahem; }
 
   .hl  { writing-mode: horizontal-tb;  direction: ltr; }
@@ -48,42 +44,42 @@
   .vr  { writing-mode: vertical-rl;    direction: ltr; }
   .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
   .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
   </style>
 </head>
 <body>
 
 <div class="container vl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 <div class="container vr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
@@ -19,20 +19,16 @@
     height: 500px;
     width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
 
     /* This really floats to top ('logical left'), since all the containers
        have a vertical writing mode. */
     float: right;
   }
 
@@ -56,42 +52,42 @@
        and their horizontal writing-mode, so those ones do not stretch.) */
     width: 126px;
   }
   </style>
 </head>
 <body>
 
 <div class="container vl_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vl_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 <div class="container vr_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vr_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
@@ -27,20 +27,16 @@
     height: 500px;
     width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
   }
 
   .small { font: 12px Ahem; }
   .big   { font: 20px Ahem; }
 
   .hl  { writing-mode: horizontal-tb;  direction: ltr; }
@@ -49,42 +45,42 @@
   .vr  { writing-mode: vertical-rl;    direction: ltr; }
   .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
   .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
   </style>
 </head>
 <body>
 
 <div class="container vl_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vl_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 <div class="container vr_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vr_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
@@ -19,20 +19,16 @@
     height: 500px;
     width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
   }
 
   nocollapse {
     /* special element to disable margin-collapsing */
     display: block;
     overflow: hidden;
@@ -57,42 +53,42 @@
        and their horizontal writing-mode, so those ones do not stretch.) */
     width: 126px;
   }
   </style>
 </head>
 <body>
 
 <div class="container hl">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">p e</span>        <nocollapse></nocollapse>
+  <span class="hr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">p e</span>        <nocollapse></nocollapse>
 </div>
 <div class="container hl">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">p e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">p e</span>    <nocollapse></nocollapse>
 </div>
 <div class="container hr">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">p e</span>        <nocollapse></nocollapse>
+  <span class="hr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">p e</span>        <nocollapse></nocollapse>
 </div>
 <div class="container hr">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">p e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">p e</span>    <nocollapse></nocollapse>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
@@ -26,20 +26,16 @@
     height: 500px;
     width: 150px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
   }
 
   .small { font: 12px Ahem; }
   .big   { font: 20px Ahem; }
 
   .hl  { writing-mode: horizontal-tb;  direction: ltr; }
@@ -48,42 +44,42 @@
   .vr  { writing-mode: vertical-rl;    direction: ltr; }
   .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
   .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
   </style>
 </head>
 <body>
 
 <div class="container hl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container hl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 <div class="container hr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container hr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
@@ -18,20 +18,16 @@
     height: 150px;
     width: 500px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
   }
 
   nocollapse {
     /* special element to disable margin-collapsing */
     display: block;
     overflow: hidden;
@@ -55,42 +51,42 @@
        and their vertical writing-mode, so those ones do not stretch.) */
     height: 118px;
   }
   </style>
 </head>
 <body>
 
 <div class="container vl">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">p e</span>        <nocollapse></nocollapse>
+  <span class="hr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">p e</span>        <nocollapse></nocollapse>
 </div>
 <div class="container vl">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">p e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">p e</span>    <nocollapse></nocollapse>
 </div>
 <div class="container vr">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">p e</span>        <nocollapse></nocollapse>
+  <span class="hr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">p e</span>        <nocollapse></nocollapse>
 </div>
 <div class="container vr">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">p e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">p e</span>    <nocollapse></nocollapse>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
@@ -25,20 +25,16 @@
     height: 150px;
     width: 500px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
   }
 
   .small { font: 12px Ahem; }
   .big   { font: 20px Ahem; }
 
   .hl  { writing-mode: horizontal-tb;  direction: ltr; }
@@ -47,42 +43,42 @@
   .vr  { writing-mode: vertical-rl;    direction: ltr; }
   .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
   .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
   </style>
 </head>
 <body>
 
 <div class="container vl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 <div class="container vr">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vr">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
@@ -18,20 +18,16 @@
     height: 150px;
     width: 500px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
   }
 
   nocollapse {
     /* special element to disable margin-collapsing */
     display: block;
     overflow: hidden;
@@ -55,42 +51,42 @@
        and their vertical writing-mode, so those ones do not stretch.) */
     height: 118px;
   }
   </style>
 </head>
 <body>
 
 <div class="container vl_rtl">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">p e</span>        <nocollapse></nocollapse>
+  <span class="hr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">p e</span>        <nocollapse></nocollapse>
 </div>
 <div class="container vl_rtl">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">p e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">p e</span>    <nocollapse></nocollapse>
 </div>
 <div class="container vr_rtl">
-  <span class="hl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hl big">d e</span>        <nocollapse></nocollapse>
-  <span class="hr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="hr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vl big">d e</span>        <nocollapse></nocollapse>
+  <span class="hl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hl big">p e</span>        <nocollapse></nocollapse>
+  <span class="hr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="hr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vl big">p e</span>        <nocollapse></nocollapse>
 </div>
 <div class="container vr_rtl">
-  <span class="vr small">a b c</span>    <nocollapse></nocollapse>
-  <span class="vr big">d e</span>        <nocollapse></nocollapse>
-  <span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vl_rtl big">d e</span>    <nocollapse></nocollapse>
-  <span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
-  <span class="vr_rtl big">d e</span>    <nocollapse></nocollapse>
+  <span class="vr small">p b c</span>    <nocollapse></nocollapse>
+  <span class="vr big">p e</span>        <nocollapse></nocollapse>
+  <span class="vl_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vl_rtl big">p e</span>    <nocollapse></nocollapse>
+  <span class="vr_rtl small">p b c</span><nocollapse></nocollapse>
+  <span class="vr_rtl big">p e</span>    <nocollapse></nocollapse>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
@@ -26,20 +26,16 @@
     height: 150px;
     width: 500px;
   }
 
   span {
     display: block;
     background: lightgrey;
     border: 2px solid black;
-    /* If browser supports it, signal the inline direction with border color: */
-    border-block-start-color: orange;
-    border-inline-start-color: lime;
-
     margin: 11px 13px 17px 7px;
     inline-size: 6px;
   }
 
   .small { font: 12px Ahem; }
   .big   { font: 20px Ahem; }
 
   .hl  { writing-mode: horizontal-tb;  direction: ltr; }
@@ -48,42 +44,42 @@
   .vr  { writing-mode: vertical-rl;    direction: ltr; }
   .vl_rtl { writing-mode: vertical-lr; direction: rtl; }
   .vr_rtl { writing-mode: vertical-rl; direction: rtl; }
   </style>
 </head>
 <body>
 
 <div class="container vl_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vl_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 <div class="container vr_rtl">
-  <span class="hl small">a b c</span>
-  <span class="hl big">d e</span>
-  <span class="hr small">a b c</span>
-  <span class="hr big">d e</span>
-  <span class="vl small">a b c</span>
-  <span class="vl big">d e</span>
+  <span class="hl small">p b c</span>
+  <span class="hl big">p e</span>
+  <span class="hr small">p b c</span>
+  <span class="hr big">p e</span>
+  <span class="vl small">p b c</span>
+  <span class="vl big">p e</span>
 </div>
 <div class="container vr_rtl">
-  <span class="vr small">a b c</span>
-  <span class="vr big">d e</span>
-  <span class="vl_rtl small">a b c</span>
-  <span class="vl_rtl big">d e</span>
-  <span class="vr_rtl small">a b c</span>
-  <span class="vr_rtl big">d e</span>
+  <span class="vr small">p b c</span>
+  <span class="vr big">p e</span>
+  <span class="vl_rtl small">p b c</span>
+  <span class="vl_rtl big">p e</span>
+  <span class="vr_rtl small">p b c</span>
+  <span class="vr_rtl big">p e</span>
 </div>
 
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -217,20 +217,20 @@ fails == flexbox-min-height-auto-002b.ht
 == flexbox-writing-mode-002.html flexbox-writing-mode-002-ref.html
 == flexbox-writing-mode-003.html flexbox-writing-mode-003-ref.html
 == flexbox-writing-mode-004.html flexbox-writing-mode-004-ref.html
 == flexbox-writing-mode-005.html flexbox-writing-mode-005-ref.html
 == flexbox-writing-mode-006.html flexbox-writing-mode-006-ref.html
 == flexbox-writing-mode-007.html flexbox-writing-mode-007-ref.html
 == flexbox-writing-mode-008.html flexbox-writing-mode-008-ref.html
 == flexbox-writing-mode-009.html flexbox-writing-mode-009-ref.html
-fuzzy(1,16) == flexbox-writing-mode-010.html flexbox-writing-mode-010-ref.html
-fuzzy(1,16) == flexbox-writing-mode-011.html flexbox-writing-mode-011-ref.html
+== flexbox-writing-mode-010.html flexbox-writing-mode-010-ref.html
+== flexbox-writing-mode-011.html flexbox-writing-mode-011-ref.html
 == flexbox-writing-mode-012.html flexbox-writing-mode-012-ref.html
-fuzzy(1,10) == flexbox-writing-mode-013.html flexbox-writing-mode-013-ref.html
+== flexbox-writing-mode-013.html flexbox-writing-mode-013-ref.html
 == flexbox-writing-mode-014.html flexbox-writing-mode-014-ref.html
 == flexbox-writing-mode-015.html flexbox-writing-mode-015-ref.html
 
 # Single-line size clamping
 == flexbox-single-line-clamp-1.html flexbox-single-line-clamp-1-ref.html
 == flexbox-single-line-clamp-2.html flexbox-single-line-clamp-2-ref.html
 == flexbox-single-line-clamp-3.html flexbox-single-line-clamp-3-ref.html