backstopjs/test/configs/special_cases/scrollToSelector.html

BackstopJS: Catch CSS curveballs.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .scrollable-container {
      background-color: lightblue;
      width: 500px;
      height: 175px;
      overflow: scroll;
    }

    .image-box {
      width: 200px;
      margin: auto;
    }

    img.lemurFace {
      display: block;
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
<div class="main-page-layout">
  <div class="scrollable-container">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna tellus, pellentesque
      eget sagittis quis, ullamcorper sed sapien. Proin eget mollis nulla. Sed dapibus arcu id
      pretium ornare. Sed at faucibus tellus. Vestibulum sed efficitur dui, ut dapibus diam.
      Suspendisse potenti. Curabitur porta, justo quis convallis dictum, nulla ex rutrum ante, eu
      arius velit dui in libero. Vestibulum eleifend vitae ipsum in mattis. Vivamus sed tempor quam.
      Quisque vulputate feugiat lobortis. Aliquam erat volutpat.
    </p>

    <div class="image-box">
      <img id="lemurFace" src="../../../assets/lemurFace.png" class="lemurFace">
    </div>
  </div>
</div>
</body>
</html>