position-sticky-fixed-ancestor-iframe.html

<!DOCTYPE html>
<html class='reftest-wait'>
<title>Sticky elements inside fixed ancestors and iframe shouldn't account for scroll</title>
<link rel="match" href="position-sticky-fixed-ancestor-iframe-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<link rel="help" href="https://crbug.com/1019142">
<meta name="assert" content="This test checks that a sticky element inside a fixed subtree and iframe doesn't scroll with the viewport "/>

<script src="/common/reftest-wait.js"></script>

<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 src="../resources/position-sticky-fixed-ancestor-iframe-child.html"></iframe>
<div class="spacer"></div>

<script>
  const child = document.querySelector('iframe');
  child.scrollIntoView();
  window.onload = () => {
    const childDoc = child.contentDocument;
    function toggleFixed() {
      childDoc.querySelector('.position-parent').classList.toggle('fixed');
    }

    childDoc.getElementById('button').addEventListener('click', toggleFixed);

    requestAnimationFrame(() => {
      childDoc.scrollingElement.scrollTop = childDoc.querySelector('.long').clientHeight;
      requestAnimationFrame(() => {
        toggleFixed();
        takeScreenshot();
      });
    });
  };
</script>
</html>
chromium/third_party/blink/web_tests/external/wpt/css/css-position/sticky/position-sticky-fixed-ancestor-iframe.html
