src/third_party/WebKit/LayoutTests/compositing/change-from-paints-into-ancestor-to-paints-into-own-backing-for-ancestor-reason.html

   1 <!DOCTYPE html>
   2 <div id="target" style="transform: translateZ(0); width: 100px; height: 100px; background-color: lightblue">
   3   <div style="perspective: 20px; width: 100px; height: 100px; background-color: lightgray">
   4      <div style="width: 50px; height: 50px; transform: translateZ(1px); background-color: yellow">
   5      </div>
   6   </div>
   7 </div>
   8 <script src="../fast/repaint/resources/text-based-repaint.js"></script>
   9 <script>
  10 // Tests that transitioning  the container div from "composited but paints into ancestor" into "composited into own backing"
  11 // for ancestor reasons (in this case due to opacity change) correctly invalidates the old paint invalidation backing (document)
  12 // before the change. In this case, the reason it can no longer paint into its ancestor is because the ancestor has no visible content
  13 // (since the background color is removed).
  14 function repaintTest() {
  15     target.style.backgroundColor = '';
  16 }
  17 runRepaintTest()
  18 </script>