Blitz - WPT: anchor-center-scroll-horizontal-wm-001.html

wpt / css / css-anchor-position / anchor-center-scroll-horizontal-wm-001.html

/css/css-anchor-position/anchor-center-scroll-horizontal-wm-001.html

<!DOCTYPE html>
<title>CSS Anchor Positioning Test: scroll adjusted anchor-center with a horizontal writing-mode containing block (control)</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center">
<link rel="match" href="anchor-center-scroll-horizontal-wm-001-ref.html">
<meta name="assert" content="Horizontal-writing-mode control for anchor-center-scroll-vertical-wm-001: an abspos box with align-self:anchor-center whose containing block is a horizontal writing mode stays centered on its anchor along the block (vertical) axis after the anchor's scroller scrolls. Uses the identical harness so the only difference from the vertical test is the writing-mode/alignment axis pairing.">
<style>
  body { margin: 0; }
  /* The containing block of #anchored. Horizontal writing-mode makes
     align-self the property that controls the vertical (Y) axis. */
  #cb {
    position: relative;
    writing-mode: horizontal-tb;
    width: 400px;
    height: 400px;
  }
  #scroller {
    writing-mode: horizontal-tb;
    width: 400px;
    height: 400px;
    overflow: auto;
    background: orange;
  }
  #spacer { height: 100px; }
  #anchor {
    width: 100px;
    height: 100px;
    background: pink;
    anchor-name: --anchor;
  }
  #anchored {
    position: absolute;
    position-anchor: --anchor;
    align-self: anchor-center;
    left: 0;
    width: 50px;
    height: 50px;
    background: purple;
  }
  #filler { height: 1000px; }
</style>
<div id="cb">
  <div id="scroller">
    <div id="spacer"></div>
    <div id="anchor"></div>
    <div id="filler"></div>
  </div>
  <div id="anchored"></div>
</div>
<script>
  scroller.offsetTop;
  scroller.scrollTop = 100;
</script>

/css/css-anchor-position/anchor-center-scroll-horizontal-wm-001-ref.html

<!DOCTYPE html>
<title>CSS Test Reference</title>
<body style="margin:0">
  <!-- Reproduces the post-scroll layout with a real scroller so the scrollbar
       matches the test. The anchored box is a static child of the anchor,
       centered on it vertically (25px = (100 - 50) / 2). -->
  <div id="scroller" style="width:400px;height:400px;overflow:auto;background:orange">
    <div style="height:100px"></div>
    <div style="width:100px;height:100px;background:pink">
      <div style="height:25px"></div>
      <div style="width:50px;height:50px;background:purple"></div>
    </div>
    <div style="height:1000px"></div>
  </div>
</body>
<script>
  scroller.scrollTop = 100;
</script>