Blitz - WPT: conic-gradient-line-height-relative-units-003.html

wpt / css / css-images / conic-gradient-line-height-relative-units-003.html

/css/css-images/conic-gradient-line-height-relative-units-003.html

<!doctype html>
<title>conic-gradient() with line-height relative unit &lt;position> (horizontal)</title>
<link rel="help" href="https://drafts.csswg.org/css-images/#conic-gradient-syntax">
<link rel="help" href="https://drafts.csswg.org/css-values/#font-relative-lengths">
<link rel="match" href="radial-gradient-line-height-relative-units-ref.html">
<style>
.base {
  position: absolute;
  width: 200px;
  height: 200px;
  background: green;
  z-index: -2;
}
.ref {
  position: absolute;
  width: 200px;
  height: 200px;
  mask-image: conic-gradient(from 45deg at 100px 50px, green 25%, transparent 0);
  background: green;
  z-index: 0;
}
.box {
  position: absolute;
  z-index: -1;
  width: 200px;
  font-size: 50px;
  line-height: 2;
  aspect-ratio: 1;
  mask-image: conic-gradient(from 45deg at 1lh 50px, green 25%, transparent 0);
  background: red;
}
</style>
<div class="base">
    <div class="ref"></div>
    <div class="box"></div>
</div>

/css/css-images/radial-gradient-line-height-relative-units-ref.html

<!doctype html>
<title>radial-gradient() with line-height relative unit (reference)</title>
<style>
  #box {
    width: 200px;
    height: 200px;
    background: green;
  }
</style>
<div id="box"></div>