src/third_party/WebKit/LayoutTests/inspector/layer-tree-model.html

   1 <html>
   2 <head>
   3 <style>
   4 .layer {
   5     -webkit-transform: translateZ(10px);
   6     opacity: 0.8;
   7 }
   8 </style>
   9 <script src="../http/tests/inspector/inspector-test.js"></script>
  10 <script src="../http/tests/inspector/layers-test.js"></script>
  11 <script>
  12 window.quietUntilDone = true;
  13
  14 function updateTree()
  15 {
  16     document.getElementById("c").appendChild(document.getElementById("b1"));
  17     var b3 = document.getElementById("b3");
  18     b3.parentElement.removeChild(b3);
  19     var b4 = document.createElement("div");
  20     b4.id = "b4";
  21     b4.className = "layer";
  22     document.getElementById("a").appendChild(b4);
  23 }
  24
  25 function updateGeometry()
  26 {
  27     document.getElementById("c").style.width = "80px";
  28 }
  29
  30 function test()
  31 {
  32     function addDepthMarker(layer)
  33     {
  34         layer.__extraData = layer.parent() ? layer.parent().__extraData + 1 : 0;
  35     }
  36
  37     InspectorTest.requestLayers(step1);
  38
  39     function step1()
  40     {
  41         // Assure layer objects are not re-created during updates.
  42         InspectorTest._layerTreeModel.forEachLayer(addDepthMarker);
  43         InspectorTest.addResult("Initial layer tree");
  44         InspectorTest.dumpLayerTree();
  45         InspectorTest.evaluateAndRunWhenTreeChanges("requestAnimationFrame(updateTree)", step2);
  46     }
  47
  48     function step2()
  49     {
  50         InspectorTest.addResult("Updated layer tree");
  51         InspectorTest.dumpLayerTree();
  52         InspectorTest.evaluateAndRunWhenTreeChanges("requestAnimationFrame(updateGeometry)", step3);
  53     }
  54
  55     function step3()
  56     {
  57         InspectorTest.addResult("Updated layer geometry");
  58         InspectorTest.dumpLayerTree();
  59         InspectorTest.completeTest();
  60     }
  61 }
  62
  63 </script>
  64 </head>
  65 <body onload="runTest()">
  66 <div id="a" style="width: 200px; height: 200px" class="layer">
  67     <div class="layer" id="b1" style="width: 150px; height: 100px"></div>
  68     <div id="b2" class="layer" style="width: 140px; height: 110px">
  69         <div id="c" class="layer" style="width: 100px; height: 90px"></div>
  70     </div>
  71     <div id="b3" class="layer" style="width: 140px; height: 110px"></div>
  72 </div>
  73 <iframe id="frame" src="resources/composited-iframe.html" width="200" height="200"></div>
  74 </body>
  75 </html>