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
--- 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
