src/third_party/WebKit/LayoutTests/compositing/squashing/squashed-layer-loses-graphicslayer.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/run-after-display.js"></script>
   5 <style>
   6 div {
   7   position: absolute;
   8   z-index: 1;
   9   width: 100px;
  10   height: 100px;
  11 }
  12
  13 .composited {
  14   -webkit-transform: translatez(0);
  15 }
  16
  17 .underneath {
  18   top: 60px;
  19   left: 60px;
  20   background-color: gray;
  21 }
  22
  23 .overlap1 {
  24   top: 140px;
  25   left: 140px;
  26   background-color: blue;
  27 }
  28
  29 .overlap2 {
  30   top: 220px;
  31   left: 220px;
  32   background-color: lime;
  33 }
  34
  35 .overlap3 {
  36   top: 300px;
  37   left: 300px;
  38   background-color: magenta;
  39 }
  40
  41 div:hover {
  42   background-color: green;
  43   -webkit-transform: none;
  44 }
  45
  46 .green {
  47   background-color: green;
  48 }
  49
  50 #testResults {
  51   display: none;
  52 }
  53
  54 </style>
  55 <script>
  56     if (window.testRunner) {
  57         testRunner.dumpAsText();
  58         testRunner.waitUntilDone();
  59     }
  60     if (window.internals) {
  61         window.internals.settings.setForceCompositingMode(true);
  62     }
  63
  64     if (window.internals)
  65         internals.settings.setLayerSquashingEnabled(true);
  66
  67     function runTest()
  68     {
  69         if (!window.internals)
  70             return;
  71         runAfterDisplay(executeTestCases);
  72     }
  73
  74     function executeTestCases()
  75     {
  76         // Case 1
  77         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  78
  79         // Case 2
  80         window.internals.startTrackingRepaints(document);
  81         document.getElementById("forceComposited").className = "underneath";
  82         document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  83         window.internals.stopTrackingRepaints(document);
  84
  85         // Display the test results only after test is done so that it does not affect repaint rect results.
  86         document.getElementById('testResults').style.display = "block";
  87
  88         if (window.testRunner)
  89             testRunner.notifyDone();
  90     }
  91 </script>
  92 </head>
  93
  94 <body onload="runTest()">
  95
  96   <p>A squashing RenderLayer that becomes non-composited should correctly send
  97      a repaint invalidation to the new container GraphicsLayer that it paints
  98      into. When run interactively, hovering over the force-composited gray div
  99      should not cause other layers to disappear.</p>
 100
 101   <div id="forceComposited" class="composited underneath"></div>
 102   <div id="A" class="overlap1"></div>
 103   <div id="B" class="overlap2"></div>
 104   <div id="C" class="overlap3"></div>
 105
 106   <div id="testResults">
 107     CASE 1, original layer tree:
 108     <pre id="Case1"></pre>
 109
 110     CASE 2, The original composited layer is no longer composited, which then also removes all squashing layers. The important point is that there should be an appropriate repaint to the root GraphicsLayer:
 111     <pre id="Case2"></pre>
 112
 113   </div>
 114
 115 </body>
 116
 117 </html>