scroll-inactive-layers.html 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <!DOCTYPE html>
  2. <html class="reftest-wait"
  3. reftest-displayport-x="0"
  4. reftest-displayport-y="0"
  5. reftest-displayport-w="800"
  6. reftest-displayport-h="1000">
  7. <title>Scrolling over inactive layers shouldn't repaint their contents</title>
  8. <style>
  9. .outer {
  10. border: 1px solid black;
  11. width: 100px;
  12. height: 2000px;
  13. margin-top: 200px;
  14. margin-right: 20px;
  15. padding-top: 100px;
  16. float: left;
  17. }
  18. .opacity {
  19. opacity: 0.5;
  20. }
  21. .transform {
  22. transform: translateX(1px);
  23. }
  24. .filter {
  25. filter: url(#filter);
  26. }
  27. .mask {
  28. mask: url(#mask);
  29. }
  30. .reftest-no-paint {
  31. height: 50px;
  32. border: 1px solid lime;
  33. }
  34. </style>
  35. <svg height="0">
  36. <defs>
  37. <filter id="filter" filterUnits="objectBoundingBox"
  38. x="0%" y="0%" width="100%" height="100%"
  39. color-interpolation-filters="sRGB">
  40. <feMerge><feMergeNode/><feMerge>
  41. </filter>
  42. <mask id="mask" maskContentUnits="objectBoundingBox">
  43. <rect x="0" y="0" width="1" height="1" fill="white"/>
  44. </mask>
  45. </defs>
  46. </svg>
  47. <div class="outer opacity">
  48. <div class="reftest-no-paint"></div>
  49. </div>
  50. <div class="outer transform">
  51. <div class="reftest-no-paint"></div>
  52. </div>
  53. <div class="outer filter">
  54. <div class="reftest-no-paint"></div>
  55. </div>
  56. <div class="outer mask">
  57. <div class="reftest-no-paint"></div>
  58. </div>
  59. <script>
  60. function doTest() {
  61. document.documentElement.scrollTop = 100;
  62. document.documentElement.removeAttribute("class");
  63. }
  64. document.addEventListener("MozReftestInvalidate", doTest, false);
  65. </script>