Blitz - WPT: grow-per-line-all.html

wpt / css / css-text / text-fit / grow-per-line-all.html

/css/css-text/text-fit/grow-per-line-all.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-text-5/#text-fit-property">
<link rel="match" href="grow-per-line-all-ref.html">
<meta name="flags" content="ahem">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.target {
  text-fit: grow per-line-all;
  white-space: pre;
  width: 120px;
  border: 2px solid blue;
  margin-bottom: 10px;
  font: 10px/normal Ahem;
}

.target:first-line {
  color: gray;
}
</style>
<body>
<div class="target" style="width:122px">AB<span style="border:1px solid lime">CD</span>EF</div>

<div class="target">GHIJ
KLM</div>

<!-- Fixed line-height -->
<div class="target" style="line-height:20px;">ABC
DEFGHI</div>
</body>

/css/css-text/text-fit/grow-per-line-all-ref.html

<!DOCTYPE html>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.target {
  white-space: pre;
  width: 120px;
  border: 2px solid blue;
  margin-bottom: 10px;
  font: 10px/normal Ahem;
}

.target:first-line {
  color: gray;
}
</style>
<body>
<div class="target" style="width:122px; font-size:20px">AB<span style="border:1px solid lime">CD</span>EF</div>

<div class="target"><span style="font-size:30px">GHIJ</span>
<span style="font-size:40px">KLM</span></div>

<!-- Fixed line-height -->
<div style="width:120px; border:2px solid blue; margin-bottom:10px;">
  <div style="white-space:pre; font:40px/20px Ahem; color:gray">ABC</div>
  <div style="white-space:pre; font:20px/20px Ahem;">DEFGHI</div>
</div>
</body>