WebKit export of https://commits.webkit.org/r180652 (#35482)
Avoid font rendering issues by switching this test to use Ahem font.
diff --git a/css/css-flexbox/flexbox_direction-row-reverse-ref.html b/css/css-flexbox/flexbox_direction-row-reverse-ref.html
index d4fbbfc..5ea38fd 100644
--- a/css/css-flexbox/flexbox_direction-row-reverse-ref.html
+++ b/css/css-flexbox/flexbox_direction-row-reverse-ref.html
@@ -1,25 +1,19 @@
<!DOCTYPE html>
<title>flexbox | flex-direction: row-reverse</title>
<link rel="author" href="http://opera.com" title="Opera Software">
+<link rel="stylesheet" href="/fonts/ahem.css">
<style>
-* {font-family: monospace;}
-body {
- width: 10em;
-}
-ul {
- background: blue;
- padding: 0;
- margin: 0;
+#container {
+ width: 13em;
+ font: 40px "Ahem";
+ background: black;
list-style: none;
-}
-li {
- color: white;
- margin: 0;
- width: 3.3333em;
- display: inline-block;
+ text-align: right;
}
</style>
-
+This test makes sure that the flex-direction: row-reverse CSS property correctly orders items.
+<div id="container">
<ul>
- <li>EFGH</li><li>ABCD</li><li>IJKL</li>
+<span style="color: red;">E</span><span style="color: purple;">F</span><span style="color: grey;">G</span><span style="color: bisque;">H</span><span style="color: lightblue;">A</span><span style="color: turquoise;">B</span><span style="color: coral;">C</span><span style="color: violet;">D</span><span style="color: green;">I</span><span style="color: blue;">J</span><span style="color: cyan;">K</span><span style="color: magenta;">L</span>
</ul>
+</div>
diff --git a/css/css-flexbox/flexbox_direction-row-reverse.html b/css/css-flexbox/flexbox_direction-row-reverse.html
index 8cc1ab1..501cd0d 100644
--- a/css/css-flexbox/flexbox_direction-row-reverse.html
+++ b/css/css-flexbox/flexbox_direction-row-reverse.html
@@ -1,32 +1,29 @@
<!DOCTYPE html>
<title>flexbox | flex-direction: row-reverse</title>
<link rel="author" href="http://opera.com" title="Opera Software">
-<link rel="help"
- href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
<link rel="match" href="flexbox_direction-row-reverse-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
<style>
-* {font-family: monospace;}
-body {
- width: 10em;
+#container {
+ font: 40px "Ahem";
+ width: 13em;
}
ul {
- background: blue;
- padding: 0;
- margin: 0;
+ background: black;
list-style: none;
display: flex;
flex-direction: row-reverse;
}
li {
- color: white;
margin: 0;
- width: 10em;
+ width: 4em;
}
</style>
-
-<ul>
- <li>IJKL</li>
- <li>ABCD</li>
- <li>EFGH</li>
-</ul>
+This test makes sure that the flex-direction: row-reverse CSS property correctly orders items.
+<div id="container"><ul>
+ <li><span style="color: green;">I</span><span style="color: blue;">J</span><span style="color: cyan;">K</span><span style="color: magenta;">L</span></li>
+ <li><span style="color: lightblue;">A</span><span style="color: turquoise;">B</span><span style="color: coral;">C</span><span style="color: violet;">D</span></li>
+ <li><span style="color: red;">E</span><span style="color: purple;">F</span><span style="color: grey;">G</span><span style="color: bisque;">H</span></li>
+</ul></div>
