gecko-dev/testing/web-platform/tests/css/css-ui/text-overflow-007.html
Luke Zielinski 0ce9f7c61a Bug 1556841 [wpt PR 17173] - Load Ahem as a webfont everywhere (part 2), a=testonly
Automatic update from web-platform-tests
 Load Ahem as a webfont everywhere (part 2) (#17173)

This change updates a large number of reftests to link to the
`/fonts/ahem.css` stylesheet. Each file contains a single additional
line before the first `<style>` element:
```
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
```
--

wp5At-commits: 9c780585758acf5e9ac6d17ad9bd03c83404c7e6
wpt-pr: 17173
2019-06-19 11:06:58 -07:00

34 lines
1.5 KiB
HTML

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: ellipsis adjacent to remaining content</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<meta name="assert" content="The ellipsis is placed immediately adjacent to the end edge of the remaining inline content, with no intervening gap.">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.test {
white-space: pre;
font: 50px/1 Ahem;
text-overflow: ellipsis;
overflow: hidden;
width: 2.5em; /* We will be fitting 2em worth of characters in a 2.5em space, to see where the extra .5em goes. It should be after, not between the characters.*/
color: green;
}
.red {
position: absolute;
z-index: -1;
width: 100px;
height: 100px;
background: red;
/* This red box wich will show through the gap between the letter and the ellipsis if there's one
but not extend past the two characters if the ellipsis is adjacent to the character as it should be.
*/
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class=red></div>
<div class=test>this line should render to a "t" followed by a "…", both of which are a 1em square in ahem, whithout any gap between them.
this line also should render to a "t" followed by a "…", both of which are a 1em square in ahem, whithout any gap between them.</div>