Blitz - WPT: radial-gradient-container-relative-units-004.html

wpt / css / css-images / radial-gradient-container-relative-units-004.html

/css/css-images/radial-gradient-container-relative-units-004.html

<!doctype html>
<title>radial-gradient() with container relative unit &lt;radial-size> (vertical)</title>
<link rel="help" href="https://drafts.csswg.org/css-images/#radial-gradient-syntax">
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths">
<link rel="match" href="radial-gradient-container-relative-units-ref.html">
<style>
  #container { container-type: size; width: 100px; height: 100px; }
  #inner {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(50px 50cqb ellipse at 50px 50px, green, blue);
  }
</style>
<div id="container">
  <div id="inner"></div>
</div>

/css/css-images/radial-gradient-container-relative-units-ref.html

<!doctype html>
<title>radial-gradient() with container relative unit (reference)</title>
<style>
  #gradient {
    width: 100px;
    height: 100px;
    background-image: radial-gradient(50px circle at 50px, green, blue);
  }
</style>
<div id="gradient"></div>