khronosschoty
/
palemoon-dev


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!DOCTYPE html>
<html class="reftest-wait"
      reftest-displayport-x="0"
      reftest-displayport-y="0"
      reftest-displayport-w="800"
      reftest-displayport-h="1000">
<title>Scrolling over inactive layers shouldn't repaint their contents even if both the top and the bottom edge of the inactive layers are offscreen</title>

<style>

html, body {
  margin: 0;
  padding: 0;
}

.outer {
  border: 1px solid black;
  width: 100px;
  height: 2000px;
  margin-right: 20px;
  padding-top: 200px;
  float: left;
}

.opacity {
  opacity: 0.5;
}

.transform {
  transform: translateX(1px);
}

.filter {
  filter: url(#filter);
}

.mask {
  mask: url(#mask);
}

.reftest-no-paint {
  height: 50px;
  border: 1px solid lime;
}

</style>

<svg height="0">
  <defs>
    <filter id="filter" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%"
            color-interpolation-filters="sRGB">
      <feMerge><feMergeNode/><feMerge>
    </filter>
    <mask id="mask" maskContentUnits="objectBoundingBox">
      <rect x="0" y="0" width="1" height="1" fill="white"/>
    </mask>
  </defs>
</svg>

<div class="outer opacity">
  <div class="reftest-no-paint"></div>
</div>

<div class="outer transform">
  <div class="reftest-no-paint"></div>
</div>

<div class="outer filter">
  <div class="reftest-no-paint"></div>
</div>

<div class="outer mask">
  <div class="reftest-no-paint"></div>
</div>

<script>

function doTest() {
  document.documentElement.scrollTop = 100;
  document.documentElement.removeAttribute("class");
}
document.documentElement.scrollTop = 50;
document.addEventListener("MozReftestInvalidate", doTest, false);

</script>