fixed-descendant-of-transformed-scrolled.html

<!DOCTYPE html>
<script src="../resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementById('fixed').style.backgroundColor = 'green';
}
onload = function() {
  document.getElementById('transformed').scrollTop = 50;
  runRepaintAndPixelTest();
}
</script>
<style>
#transformed {
  position: absolute;
  top: 50px;
  left: 100px;
  transform: translateX(0);
  overflow: scroll;
  width: 300px;
  height: 300px;
}
#fixed {
  position: fixed;
  top: 150px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: red;
}
#relative {
  position: relative;
  top: 50px;
  left: 50px;
}
/* to make the transformed container scrollable */
#content {
  width: 1000px;
  height: 1000px;
}
</style>
Tests invalidation of a fixed-position descendant of a transformed scrolled element.
Passes if there is a green box at the center of the scrollable area.
<div id="transformed">
  <div id="relative">
    <div id="fixed"></div>
    <div id="content"></div>
  </div>
</div>

chromium/third_party/blink/web_tests/paint/invalidation/scroll/fixed-descendant-of-transformed-scrolled.html