css/css-fonts/first-available-font-005.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS fonts test: baseline position with explicit sizing, no space in first font</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
<link rel="help" href="https://drafts.csswg.org/css-fonts-3/#first-available-font">
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#first-available-font">
<link rel="match" href="first-available-font-005-ref.html">
<meta name="assert" content="The position of the baseline in an inline-level box whose height is determined by a non-normal value of line-height
                             does depend on the primary font, which is the first that contains U+0020.">
<style>
@font-face {
  font-family: 'A-no-space';
  font-style: normal;
  font-weight: 400;
  src:  url(/fonts/Revalia.woff) format('woff');
  unicode-range: U+0061;
}
@font-face {
  font-family: 'B-no-space';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/AD.woff) format('woff');
  unicode-range: U+0061;
}
@font-face {
  font-family: 'B';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/AD.woff) format('woff');
}

div {
  position: absolute;
  line-height: 100px;
  font-size: 100px;
  width: 300px; /* plenty of room for the (invisible) text */
  text-align: right;
  color: transparent;
  outline: solid;
}
span { /* visible thing aligned to the baseline, and small enough to not influence its position */
  display: inline-block;
  width: 20px;
  height: 20px;
}

/* white #a is on top of red #b,
   The first font in their respective lists do no contain U+0020,
   and therfore the first available font should be the next one, which is the same.
   Since the baseline should be based on the primary font,
   their baselines should line up and red #b should be invisible.*/
#a { font-family: A-no-space, B; }
#a span { background: red; }

#b { font-family: B-no-space, B; }
#b span { background: white; }

</style>

<p>Test passes if there is <strong>no red</strong> below.

<div id=a>bb<span></span></div>
<div id=b>bb<span></span></div>