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

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