Blitz - WPT: position-area-anchor-001.html

wpt / css / css-anchor-position / position-area-anchor-001.html

/css/css-anchor-position/position-area-anchor-001.html

<!DOCTYPE html>
<title>anchor() resolution in position-area</title>

<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area">
<link rel="match" href="position-area-anchor-001-ref.html">
<link rel="author" name="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">

<style>
  .container {
    width: 100px; height: 100px;
    border: solid gray;
    margin: 6px;
    position: relative;
    anchor-scope: all;
    float: left;
  }

  .block {
    background: silver;
    height: 40px;
    width: 40px;
    margin: 10px;
  }

  .anchor {
    position: absolute;
    border: solid orange;
    margin: 25px;
  }
  .controls .anchor,
  .pull-up .anchor {
    width: 5px;
    height: 5px;
  }
  .push-down .anchor {
    width: 40px;
    height: 40px;
  }

  .anchored {
    border: solid blue;
    position: absolute;
    position-area: span-bottom right;
    inset: 0;
    place-self: stretch;
  }

  body > div { clear: both; }
</style>

<div class=pull-up>
  <div class=container>
    <div class=anchor style="anchor-name: --foo"></div>
    <div class=block></div>
    <div class=anchored style="top: anchor(bottom); position-anchor: --foo"></div>
  </div>

  <div class=container>
    <div class=anchor style="anchor-name: --foo"></div>
    <div class=block style="anchor-name: --bar"></div>
    <div class=anchored style="top: anchor(--foo bottom); position-anchor: --bar"></div>
  </div>
</div>

<div class=push-down>
  <div class=container>
    <div class=anchor style="anchor-name: --foo"></div>
    <div class=block></div>
    <div class=anchored style="top: anchor(bottom); position-anchor: --foo"></div>
  </div>

  <div class=container>
    <div class=anchor style="anchor-name: --foo"></div>
    <div class=block style="anchor-name: --bar"></div>
    <div class=anchored style="top: anchor(--foo bottom); position-anchor: --bar"></div>
  </div>
</div>

<div class=controls>
  <div class=container>
    <div class=anchor style="anchor-name: --foo"></div>
    <div class=block></div>
    <div class=anchored style="top: anchor(--foo bottom)"></div>
  </div>
  <div class=container>
    <div class=anchor style="anchor-name: --foo"></div>
    <div class=block></div>
    <div class=anchored style="position-anchor: --foo"></div>
  </div>
</div>

/css/css-anchor-position/position-area-anchor-001-ref.html

<!DOCTYPE html>
<title>anchor() resolution in position-area</title>

<style>
  .container {
    width: 100px; height: 100px;
    border: solid gray;
    margin: 6px;
    position: relative;
    anchor-scope: all;
    float: left;
  }

  .block {
    background: silver;
    height: 40px;
    width: 40px;
    margin: 10px;
  }

  .anchor {
    position: absolute;
    border: solid orange;
    margin: 25px;
  }
  .controls .anchor,
  .pull-up .anchor {
    width: 5px;
    height: 5px;
  }
  .push-down .anchor {
    width: 40px;
    height: 40px;
  }

  .anchored {
    border: solid blue;
    position: absolute;
    inset: 0;
    place-self: stretch;
  }

  body > div { clear: both; }
</style>

<div class=pull-up>
  <div class=container>
    <div class=anchor></div>
    <div class=block></div>
    <div class=anchored style="top: 36px; left: 36px;"></div>
  </div>

  <div class=container>
    <div class=anchor></div>
    <div class=block></div>
    <div class=anchored style="top: 36px; left: 50px;"></div>
  </div>
</div>

<div class=push-down>
  <div class=container>
    <div class=anchor></div>
    <div class=block></div>
    <div class=anchored style="top: 71px; left: 71px"></div>
  </div>

  <div class=container>
    <div class=anchor></div>
    <div class=block></div>
    <div class=anchored style="top: 71px; left: 50px"></div>
  </div>
</div>

<div class=controls>
  <div class=container>
    <div class=anchor></div>
    <div class=block></div>
    <div class=anchored style="top: 36px"></div>
  </div>
  <div class=container>
    <div class=anchor></div>
    <div class=block></div>
    <div class=anchored style="top: 25px; left: 36px"></div>
  </div>
</div>