Blitz - WPT: position-sticky-fixed-ancestor-iframe.html

wpt / css / css-position / sticky / position-sticky-fixed-ancestor-iframe.html

/css/css-position/sticky/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>

/css/css-position/sticky/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>