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
Show 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 @@
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Tsutomu ogaoga Ogasawara" href="mailto:info@ogaoga.org">
<style type="text/css">
.container {
color: white;
}
<style>
.item {
writing-mode: vertical-rl;
background: green;
height: 3em;
width: 3em;
line-height: 1.5em;
width: 15px;
height: 45px;
float: left;
}
</style>
</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">
<div class="item">１２３<br />ａｂｃ</div>
<div class="item">４５６<br />ｄｅｆ</div>
<div class="item">７８９<br />ｇｈｉ</div>
</div>
<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.
</body>
</html>
<div style="height: 90px; width: 30px; border: 2px solid black;">
<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 @@
display: flex;
flex-flow: row-reverse wrap-reverse;
writing-mode: vertical-rl;
color: white;
height: 9em;
border: 2px solid black;
height: 90px;
}
.item {
background: green;
height: 3em;
width: 1.5em;
line-height: 1.5em;
width: 15px;
height: 45px;
/* make sure UA that doesn't support writing mode and flexbox fails. */
float: right;
}
.error {
position: absolute;
background: red;
height: 9em;
width: 3em;
z-index: -1;
}
</style>
</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>
<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="item">ｇｈｉ</div>
<div class="item">ｄｅｆ</div>
<div class="item">ａｂｃ</div>
<div class="item">７８９</div>
<div class="item">４５６</div>
<div class="item">１２３</div>
<div class="item" style="background: yellow"></div>
<div class="item" style="background: grey"></div>
<div class="item" style="background: blue"></div>
<div class="item" style="background: orange"></div>
</div>
</body>
</html>
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row-reverse-wrap.html
View file @ 1e8bae07
......@@ -18,39 +18,26 @@
display: flex;
flex-flow: row-reverse wrap;
writing-mode: vertical-rl;
color: white;
height: 9em;
border: 2px solid black;
height: 90px;
}
.item {
background: green;
height: 3em;
width: 1.5em;
line-height: 1.5em;
width: 15px;
height: 45px;
/* make sure UA that doesn't support writing mode and flexbox fails. */
float: right;
}
.error {
position: absolute;
background: red;
height: 9em;
width: 3em;
z-index: -1;
}
</style>
</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>
<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="item">７８９</div>
<div class="item">４５６</div>
<div class="item">１２３</div>
<div class="item">ｇｈｉ</div>
<div class="item">ｄｅｆ</div>
<div class="item">ａｂｃ</div>
<div class="item" style="background: blue"></div>
<div class="item" style="background: orange"></div>
<div class="item" style="background: yellow"></div>
<div class="item" style="background: grey"></div>
</div>
</body>
</html>
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row-reverse.html
View file @ 1e8bae07
......@@ -18,34 +18,35 @@
display: flex;
flex-flow: row-reverse;
writing-mode: vertical-rl;
color: white;
border: 2px solid black;
height: 90px;
}
.item {
background: green;
height: 3em;
width: 3em;
line-height: 1.5em;
line-height: 0;
/* make sure UA that doesn't support writing mode and flexbox fails. */
float: right;
}
.error {
position: absolute;
background: red;
height: 9em;
width: 3em;
z-index: -1;
.color-block {
display: inline-block;
width: 15px;
height: 45px;
}
</style>
</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="error"></div>
<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.
<div class="container">
<div class="item">７８９<br />ｇｈｉ</div>
<div class="item">４５６<br />ｄｅｆ</div>
<div class="item">１２３<br />ａｂｃ</div>
<div class="item">
<span class=color-block style="background: blue;"></span>
<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>
</body>
</html>
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row-wrap-reverse.html
View file @ 1e8bae07
......@@ -18,39 +18,25 @@
display: flex;
flex-flow: row wrap-reverse;
writing-mode: vertical-rl;
color: white;
height: 9em;
border: 2px solid black;
height: 90px;
}
.item {
background: green;
height: 3em;
width: 1.5em;
line-height: 1.5em;
width: 15px;
height: 45px;
/* make sure UA that doesn't support writing mode and flexbox fails. */
float: right;
}
.error {
position: absolute;
background: red;
height: 9em;
width: 3em;
z-index: -1;
}
</style>
</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="error"></div>
<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.
<div class="container">
<div class="item">ａｂｃ</div>
<div class="item">ｄｅｆ</div>
<div class="item">ｇｈｉ</div>
<div class="item">１２３</div>
<div class="item">４５６</div>
<div class="item">７８９</div>
<div class="item" style="background: grey"></div>
<div class="item" style="background: yellow"></div>
<div class="item" style="background: orange"></div>
<div class="item" style="background: blue"></div>
</div>
</body>
</html>
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row-wrap.html
View file @ 1e8bae07
......@@ -18,39 +18,26 @@
display: flex;
flex-flow: row wrap;
writing-mode: vertical-rl;
color: white;
height: 9em;
border: 2px solid black;
height: 90px;
}
.item {
background: green;
height: 3em;
width: 1.5em;
line-height: 1.5em;
width: 15px;
height: 45px;
/* make sure UA that doesn't support writing mode and flexbox fails. */
float: right;
}
.error {
position: absolute;
background: red;
height: 9em;
width: 3em;
z-index: -1;
}
</style>
</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>
<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="item">１２３</div>
<div class="item">４５６</div>
<div class="item">７８９</div>
<div class="item">ａｂｃ</div>
<div class="item">ｄｅｆ</div>
<div class="item">ｇｈｉ</div>
<div class="item" style="background: orange"></div>
<div class="item" style="background: blue"></div>
<div class="item" style="background: grey"></div>
<div class="item" style="background: yellow"></div>
</div>
</body>
</html>
third_party/blink/web_tests/external/wpt/css/css-flexbox/css-flexbox-row.html
View file @ 1e8bae07
......@@ -18,35 +18,35 @@
display: flex;
flex-flow: row;
writing-mode: vertical-rl;
color: white;
border: 2px solid black;
height: 90px;
}
.item {
background: green;
height: 3em;
width: 3em;
line-height: 1.5em;
line-height: 0;
/* make sure UA that doesn't support writing mode and flexbox fails. */
float: right;
}
.error {
position: absolute;
background: red;
height: 9em;
width: 3em;
z-index: -1;
.color-block {
display: inline-block;
width: 15px;
height: 45px;
}
</style>
</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="error"></div>
<p>Pass condition: 4 rectangles, with colors in clockwise order starting from top-left: grey, orange, blue, yellow.
<div class="container">
<div class="item">１２３<br />ａｂｃ</div>
<div class="item">４５６<br />ｄｅｆ</div>
<div class="item">７８９<br />ｇｈｉ</div>
<div class="item">
<span class=color-block style="background: orange;"></span>
<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>
</body>
</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