position-sticky-fixed-ancestor-iframe-ref.html

<!DOCTYPE html>
<title>Sticky elements inside fixed ancestors and iframe shouldn't account for scroll</title>

<style>
  body,html {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  iframe {
    margin: 10px;
    width: 90%;
    height: 90%;
    border: 1px solid black;
  }

  .spacer {
    height: 120vh;
  }
</style>

<div class="spacer"></div>
<iframe srcdoc="
  <!DOCTYPE html>
  <title>Reference for sticky elements inside fixed ancestors shouldn't account for scroll</title>
  <style>
    body,html {
      margin: 0;
      width: 100%;
      height: 100%;
    }

    .sticky {
      background: green;
      width: 100px;
      height: 10%;
    }

    .spacer {
      height: calc(25vh - 10%);
    }
    .long {
      height: 600vh;
    }

    .position-parent {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      top: 100vh;
      background-color: lightgrey;
    }

    .container {
      width: 100px;
      height: 100%;
      background-color: grey;
    }

    button {
      position: fixed;
      left: 20px;
      top: 20px;
    }

    .fixed {
      position: fixed;
      top: 25vh;
    }
  </style>

  <div class='position-parent fixed'>
    <div class='container'>
      <div class='spacer'></div>
      <div class='sticky'></div>
    </div>
  </div>
  <div class='long'></div>
  <button id='button'>Toggle Fixed</button>
  <script>
    window.scrollTo(0, document.querySelector('.long').clientHeight);
  </script>
"></iframe>
<div class="spacer"></div>

<script>
  const child = document.querySelector('iframe');
  child.scrollIntoView();
</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-position/sticky/position-sticky-fixed-ancestor-iframe-ref.html
