Content - 380e5e4505c1fc1b23e6e44eaae436cffebc6b20 - f770cdd/css/css-ui/text-overflow-014.html

visit type:

Tip revision: e7944b7ba52ab7a830ee4115bbcc188f406105a4 authored by Guido Urdaneta on 06 August 2018, 12:06:09 UTC
Add SpeechRecognition Web Platform Tests

Tip revision: e7944b7

text-overflow-014.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: styling the ellipsis</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#ellipsing-details">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="ahem">
<meta name="assert" content="The ellipsis' font family, font size, and color are styled according to the block.">
<style>
.test {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:pre;
  font: 100px/1 Ahem;
  color: green;

  /* 2em width and starting with a space
     because the handling of the ellipsis of the first character on the line is special,
     and therefore we need to have the thing we want to test in non first position.
     Shifting 1em left to align with the usual green square.
   */
  width: 2em;
  margin-left: -1em;
}
.red {
  position: absolute;
  z-index: -1;
  width: 100px;
  height: 100px;
  background: red;
}
span {
  font: 50%/1 serif;
  color: red;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class=red></div>
<div class=test> <span>xxxxxxxxxxxxxxxxxxxx</span></div>

Browse the archive

https://github.com/web-platform-tests/wpt