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