Blitz - WPT: inherit-height-from-fallback.html

wpt / css / css-anchor-position / inherit-height-from-fallback.html

/css/css-anchor-position/inherit-height-from-fallback.html

<!DOCTYPE html>
<title>CSS Anchor Positioning Test: inherit height from fallback height</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-try-fallbacks">
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
<style>
  #container {
    position: relative;
  }
  #anchor {
    anchor-name: --a1;
    width: 0px;
    height: 100px;
  }
  #anchored {
    position-area: left center;
    position: absolute;
    position-anchor: --a1;
    position-try-fallbacks: --f1;
    width: 100px;
  }
  #child {
    height: inherit;
    background: green;
  }
  @position-try --f1 {
    position-area: right center;
    height: 100px;
  }
</style>
<p>Test passes if there is a filled green square.</p>
<div id="container">
  <div id="anchor"></div>
  <div id="anchored">
    <div id="child"></div>
  </div>
</div>

/css/reference/ref-filled-green-100px-square-only.html

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
<p>Test passes if there is a filled green square.</p>
<div style="width:100px; height:100px; background:green;"></div>