raster-under-invalidation-checking.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!DOCTYPE html>
  2. <script src="../../resources/run-after-layout-and-paint.js"></script>
  3. <script src="resources/text-based-repaint.js"></script>
  4. <style>
  5. [id^="target"] {
  6. width: 60px;
  7. height: 40px;
  8. margin: 10px;
  9. background: blue;
  10. }
  11. </style>
  12. <div id="target1"></div>
  13. <div id="target2" style="will-change: transform"></div>
  14. <div style="will-change: transform; width: 150px; height: 150px; background: yellow">
  15. <div id="target3" style="position: relative; top: 70px; left: 30px"></div>
  16. </div>
  17. <div id="scroller" style="will-change: transform; width: 150px; height: 150px; overflow: scroll">
  18. <div style="width: 4000px; height: 20000px"></div>
  19. <div id="target4" style="position: relative; top: -10000px; left: 30px"></div>
  20. </div>
  21. <script>
  22. window.testIsAsync = true;
  23. function repaintTest() {
  24. if (window.internals)
  25. internals.simulateRasterUnderInvalidations(true);
  26. document.querySelectorAll('[id^="target"]').forEach(function(e) {
  27. e.style.background = 'green';
  28. });
  29. runAfterLayoutAndPaint(function() {
  30. if (window.internals)
  31. internals.simulateRasterUnderInvalidations(false);
  32. finishRepaintTest();
  33. });
  34. };
  35. onload = function() {
  36. scroller.scrollTop = 9950;
  37. scroller.scrollLeft = 50;
  38. runRepaintAndPixelTest();
  39. }
  40. </script>