subpixel-shadow-included-in-invalidation.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!DOCTYPE html>
  2. <script src="../../resources/testharness.js"></script>
  3. <script src="../../resources/testharnessreport.js"></script>
  4. <script src="../../resources/run-after-layout-and-paint.js"></script>
  5. <style>
  6. #box {
  7. position: absolute;
  8. left: 0;
  9. top: 0;
  10. width: 100px;
  11. height: 100px;
  12. background: green;
  13. box-shadow: 1.4px 1.4px blue;
  14. }
  15. </style>
  16. <div id="box"></div>
  17. <script>
  18. var t = async_test('Tests whether a repaint rect encompasses box-shadow with subpixel offset when the shadow changes.');
  19. // Accepts [x, y, width, height] rects. Checks if the first argument contains the second.
  20. function rectContainsRect(outer, inner) {
  21. return outer[0] <= inner[0]
  22. && outer[1] <= inner[1]
  23. && outer[0] + outer[2] >= inner[0] + inner[2]
  24. && outer[1] + outer[3] >= inner[1] + inner[3];
  25. }
  26. t.step(function() {
  27. assert_true(!!window.internals, 'Test requires window.internals.');
  28. });
  29. var box = document.getElementById('box');
  30. runAfterLayoutAndPaint(function() {
  31. if (window.internals)
  32. internals.startTrackingRepaints(document);
  33. box.style.boxShadow = 'none';
  34. runAfterLayoutAndPaint(function() {
  35. t.step(function() {
  36. if (!window.internals)
  37. return;
  38. var layers_dump = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_DETAILED_INVALIDATIONS);
  39. var layers = JSON.parse(layers_dump).layers;
  40. var scrollingContentsLayer = layers[0];
  41. var invalidations = scrollingContentsLayer.invalidations;
  42. var shadowRect = [1.4, 1.4, 100, 100];
  43. assert_true(invalidations.some(paintInvalidation => rectContainsRect(paintInvalidation.rect, shadowRect)),
  44. 'Subpixel shadow ' + JSON.stringify(shadowRect) + ' should be repainted. ' + layers_dump);
  45. internals.stopTrackingRepaints(document);
  46. });
  47. t.done();
  48. });
  49. });
  50. </script>