Skip to content

GitLab

T
tangled
Commit 1e8bae07 authored by David Grogan's avatar David Grogan Committed by Commit Bot
Browse files
Options

[css-flex] Fix some tests that fail only on wpt, not run_web_tests.py 

These used some full-width characters that wpt doesn't have a font for.
As a result, the sizes of the containing blocks that had been calculated
to align with the text is misaligned on wpt.

I replaced the characters with inline-blocks with fixed width and
height.

I tried using an mplus web font available in wpt but couldn't find a way
to determine the size of the characters that I could use to derive the
size of the blocks.

Using fixed width/height blocks is more robust anyway.

https://wpt.fyi/results/css/css-flexbox?label=experimental&label=master&aligned&q=css-flexbox-row

Change-Id: I3e9484029c9e275c4dcc23dda967d2a166e44da3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2548681Reviewed-by: default avatarChristian Biesinger <cbiesinger@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#829255}
parent 7dbd5f31
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 142 deletions
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row-ref.html
View file @ 1e8bae07
...@@ -4,27 +4,21 @@ ...@@ -4,27 +4,21 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>CSS Reftest Reference</title> <title>CSS Reftest Reference</title>
<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org"> <link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org">
<style type="text/css">
.container { <style>
color: white;
}
.item { .item {
writing-mode: vertical-rl; width: 15px;
background: green; height: 45px;
height: 3em; float: left;
width: 3em;
line-height: 1.5em;
} }
</style> </style>
</head> </head>
<body>
<p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p>
<div class="container"> <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.
<div class="item">１２３<br />ａｂｃ</div>
<div class="item">４５６<br />ｄｅｆ</div>
<div class="item">７８９<br />ｇｈｉ</div>
</div>
</body> <div style="height: 90px; width: 30px; border: 2px solid black;">
</html> <div class="item" style="background: grey"></div>
<div class="item" style="background: orange"></div>
<div class="item" style="background: yellow"></div>
<div class="item" style="background: blue"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row-reverse-wrap-reverse.html
View file @ 1e8bae07
...@@ -18,39 +18,26 @@ ...@@ -18,39 +18,26 @@
display: flex; display: flex;
flex-flow: row-reverse wrap-reverse; flex-flow: row-reverse wrap-reverse;
writing-mode: vertical-rl; writing-mode: vertical-rl;
color: white; border: 2px solid black;
height: 90px;
height: 9em;
} }
.item { .item {
background: green; width: 15px;
height: 3em; height: 45px;
width: 1.5em;
line-height: 1.5em;
/* make sure UA that doesn't support writing mode and flexbox fails. */ /* make sure UA that doesn't support writing mode and flexbox fails. */
float: right; float: right;
} }
.error {
position: absolute;
background: red;
height: 9em;
width: 3em;
z-index: -1;
}
</style> </style>
</head> </head>
<body> <body>
<p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.
<div class="error"></div>
<div class="container"> <div class="container">
<div class="item">ｇｈｉ</div> <div class="item" style="background: yellow"></div>
<div class="item">ｄｅｆ</div> <div class="item" style="background: grey"></div>
<div class="item">ａｂｃ</div> <div class="item" style="background: blue"></div>
<div class="item">７８９</div> <div class="item" style="background: orange"></div>
<div class="item">４５６</div>
<div class="item">１２３</div>
</div> </div>
</body> </body>
</html> </html>
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row-reverse-wrap.html
View file @ 1e8bae07
...@@ -18,39 +18,26 @@ ...@@ -18,39 +18,26 @@
display: flex; display: flex;
flex-flow: row-reverse wrap; flex-flow: row-reverse wrap;
writing-mode: vertical-rl; writing-mode: vertical-rl;
color: white; border: 2px solid black;
height: 90px;
height: 9em;
} }
.item { .item {
background: green; width: 15px;
height: 3em; height: 45px;
width: 1.5em;
line-height: 1.5em;
/* make sure UA that doesn't support writing mode and flexbox fails. */ /* make sure UA that doesn't support writing mode and flexbox fails. */
float: right; float: right;
} }
.error {
position: absolute;
background: red;
height: 9em;
width: 3em;
z-index: -1;
}
</style> </style>
</head> </head>
<body> <body>
<p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.
<div class="error"></div>
<div class="container"> <div class="container">
<div class="item">７８９</div> <div class="item" style="background: blue"></div>
<div class="item">４５６</div> <div class="item" style="background: orange"></div>
<div class="item">１２３</div> <div class="item" style="background: yellow"></div>
<div class="item">ｇｈｉ</div> <div class="item" style="background: grey"></div>
<div class="item">ｄｅｆ</div>
<div class="item">ａｂｃ</div>
</div> </div>
</body> </body>
</html> </html>
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row-reverse.html
View file @ 1e8bae07
...@@ -18,34 +18,35 @@ ...@@ -18,34 +18,35 @@
display: flex; display: flex;
flex-flow: row-reverse; flex-flow: row-reverse;
writing-mode: vertical-rl; writing-mode: vertical-rl;
color: white; border: 2px solid black;
height: 90px;
} }
.item { .item {
background: green; line-height: 0;
height: 3em;
width: 3em;
line-height: 1.5em;
/* make sure UA that doesn't support writing mode and flexbox fails. */ /* make sure UA that doesn't support writing mode and flexbox fails. */
float: right; float: right;
} }
.error { .color-block {
position: absolute; display: inline-block;
background: red; width: 15px;
height: 9em; height: 45px;
width: 3em;
z-index: -1;
} }
</style> </style>
</head> </head>
<body> <body>
<p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.
<div class="error"></div>
<div class="container"> <div class="container">
<div class="item">７８９<br />ｇｈｉ</div> <div class="item">
<div class="item">４５６<br />ｄｅｆ</div> <span class=color-block style="background: blue;"></span>
<div class="item">１２３<br />ａｂｃ</div> <br />
<span class=color-block style="background: yellow;"></span>
</div>
<div class="item">
<span class=color-block style="background: orange;"></span>
<br />
<span class=color-block style="background: grey;"></span>
</div>
</div> </div>
</body> </body>
</html> </html>
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row-wrap-reverse.html
View file @ 1e8bae07
...@@ -18,39 +18,25 @@ ...@@ -18,39 +18,25 @@
display: flex; display: flex;
flex-flow: row wrap-reverse; flex-flow: row wrap-reverse;
writing-mode: vertical-rl; writing-mode: vertical-rl;
color: white; border: 2px solid black;
height: 90px;
height: 9em;
} }
.item { .item {
background: green; width: 15px;
height: 3em; height: 45px;
width: 1.5em;
line-height: 1.5em;
/* make sure UA that doesn't support writing mode and flexbox fails. */ /* make sure UA that doesn't support writing mode and flexbox fails. */
float: right; float: right;
} }
.error {
position: absolute;
background: red;
height: 9em;
width: 3em;
z-index: -1;
}
</style> </style>
</head> </head>
<body> <body>
<p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.
<div class="error"></div>
<div class="container"> <div class="container">
<div class="item">ａｂｃ</div> <div class="item" style="background: grey"></div>
<div class="item">ｄｅｆ</div> <div class="item" style="background: yellow"></div>
<div class="item">ｇｈｉ</div> <div class="item" style="background: orange"></div>
<div class="item">１２３</div> <div class="item" style="background: blue"></div>
<div class="item">４５６</div>
<div class="item">７８９</div>
</div> </div>
</body> </body>
</html> </html>
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row-wrap.html
View file @ 1e8bae07
...@@ -18,39 +18,26 @@ ...@@ -18,39 +18,26 @@
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
writing-mode: vertical-rl; writing-mode: vertical-rl;
color: white; border: 2px solid black;
height: 90px;
height: 9em;
} }
.item { .item {
background: green; width: 15px;
height: 3em; height: 45px;
width: 1.5em;
line-height: 1.5em;
/* make sure UA that doesn't support writing mode and flexbox fails. */ /* make sure UA that doesn't support writing mode and flexbox fails. */
float: right; float: right;
} }
.error {
position: absolute;
background: red;
height: 9em;
width: 3em;
z-index: -1;
}
</style> </style>
</head> </head>
<body> <body>
<p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> <p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.
<div class="error"></div>
<div class="container"> <div class="container">
<div class="item">１２３</div> <div class="item" style="background: orange"></div>
<div class="item">４５６</div> <div class="item" style="background: blue"></div>
<div class="item">７８９</div> <div class="item" style="background: grey"></div>
<div class="item">ａｂｃ</div> <div class="item" style="background: yellow"></div>
<div class="item">ｄｅｆ</div>
<div class="item">ｇｈｉ</div>
</div> </div>
</body> </body>
</html> </html>
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row.html
View file @ 1e8bae07
...@@ -18,35 +18,35 @@ ...@@ -18,35 +18,35 @@
display: flex; display: flex;
flex-flow: row; flex-flow: row;
writing-mode: vertical-rl; writing-mode: vertical-rl;
color: white; border: 2px solid black;
height: 90px;
} }
.item { .item {
background: green; line-height: 0;
height: 3em;
width: 3em;
line-height: 1.5em;
/* make sure UA that doesn't support writing mode and flexbox fails. */ /* make sure UA that doesn't support writing mode and flexbox fails. */
float: right; float: right;
} }
.error { .color-block {
position: absolute; display: inline-block;
background: red; width: 15px;
height: 9em; height: 45px;
width: 3em;
z-index: -1;
} }
</style> </style>
</head> </head>
<body> <body>
<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.
<p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p>
<div class="error"></div>
<div class="container"> <div class="container">
<div class="item">１２３<br />ａｂｃ</div> <div class="item">
<div class="item">４５６<br />ｄｅｆ</div> <span class=color-block style="background: orange;"></span>
<div class="item">７８９<br />ｇｈｉ</div> <br />
<span class=color-block style="background: grey;"></span>
</div>
<div class="item">
<span class=color-block style="background: blue;"></span>
<br />
<span class=color-block style="background: yellow;"></span>
</div>
</div> </div>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment