src/third_party/WebKit/LayoutTests/inspector-protocol/layers/get-layers.html

   1 <html>
   2 <head>
   3 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script>
   4 <script type="text/javascript" src="layer-protocol-test.js"></script>
   5 <script type="text/javascript">
   6
   7 function addCompositedLayer()
   8 {
   9     var element = document.createElement("div");
  10     element.className = "composited";
  11     element.id = "last-element";
  12     document.body.appendChild(element);
  13 };
  14
  15 function test()
  16 {
  17     var documentNode;
  18     var initialLayers;
  19     var modifiedLayers;
  20
  21     InspectorTest.enableLayerTreeAgent(gotInitialLayerTree);
  22
  23     function gotInitialLayerTree(layers)
  24     {
  25         initialLayers = layers;
  26         InspectorTest.setLayerTreeChangeCallback(gotModifiedLayerTree);
  27
  28         InspectorTest.sendCommand("Runtime.evaluate", {"expression": "addCompositedLayer()"});
  29     };
  30
  31     function gotModifiedLayerTree(layers)
  32     {
  33         modifiedLayers = layers;
  34
  35         var mutations = layerMutations(initialLayers, modifiedLayers);
  36         var newLayer = mutations.additions[0];
  37
  38         InspectorTest.sendCommand("DOM.pushNodesByBackendIdsToFrontend", {"backendNodeIds": [newLayer.backendNodeId]}, InspectorTest.wrapCallback(gotNodeId));
  39     };
  40
  41     function gotNodeId(result)
  42     {
  43         InspectorTest.sendCommand("DOM.getAttributes", {"nodeId": result.nodeIds[0]}, InspectorTest.wrapCallback(gotNodeAttributes));
  44     }
  45
  46     function gotNodeAttributes(result)
  47     {
  48         var attributes = attributesDictionaryFromArray(result.attributes);
  49         if (attributes.id !== "last-element")
  50             InspectorTest.log("FAIL: Did not obtain the expected element for the last inserted layer.");
  51
  52         dumpLayers(initialLayers);
  53         dumpLayers(modifiedLayers);
  54         InspectorTest.log("DONE!");
  55         InspectorTest.completeTest();
  56     };
  57
  58     function layerMutations(oldLayers, newLayers)
  59     {
  60         function layerIdMap(layer) {
  61             return layer.layerId;
  62         }
  63
  64         var oldLayerIds = oldLayers.map(layerIdMap);
  65         var newLayerIds = newLayers.map(layerIdMap);
  66
  67         return {
  68             additions: newLayers.filter(function (layer) {
  69                 return (oldLayerIds.indexOf(layer.layerId) === -1);
  70             }),
  71             removals: oldLayers.filter(function (layer) {
  72                 return (newLayerIds.indexOf(layer.layerId) === -1);
  73             })
  74         };
  75     };
  76
  77     function attributesDictionaryFromArray(attributes)
  78     {
  79         var dictionary = {}
  80         for (var i = 0, count = attributes.length; i < count; i += 2) {
  81             dictionary[attributes[i]] = attributes[i + 1];
  82         }
  83         return dictionary;
  84     };
  85
  86     function dumpLayers(layers)
  87     {
  88         // Keep "internal" layers out for better stability.
  89         layers = layers.filter(function(layer) { return !!layer.backendNodeId; });
  90         function replacer(key, value)
  91         {
  92
  93             if (["layerId", "parentLayerId", "backendNodeId", "paintCount"].indexOf(key) >= 0)
  94                 return typeof(value);
  95
  96             // some values differ based on port, but the ones we most
  97             // care about will always be less or equal 100.
  98             if ((key === "width" || key === "height") && value > 100)
  99                 return typeof(value);
 100
 101             return value;
 102         };
 103
 104         InspectorTest.log("\n" + JSON.stringify(layers, replacer, "    "));
 105     };
 106 };
 107
 108 window.addEventListener("DOMContentLoaded", function () {
 109     runTest();
 110 }, false);
 111
 112 </script>
 113 <style type="text/css">
 114
 115     div {
 116         position: absolute;
 117         top: 0;
 118         left: 0;
 119     }
 120
 121     .regular {
 122         width: 100px;
 123         height: 100px;
 124         background-color: black;
 125     }
 126
 127     .composited {
 128         top: 25px;
 129         left: 25px;
 130         width: 50px;
 131         height: 50px;
 132         background-color: blue;
 133         transform: translateZ(0);
 134     }
 135
 136     .offset {
 137         left: 200px;
 138         transform: translateZ(0);
 139     }
 140
 141 </style>
 142 </head>
 143 <body>
 144
 145     <div class="regular"></div>
 146
 147     <div class="composited">
 148         <div class="composited"></div>
 149     </div>
 150
 151     <div class="regular offset">
 152         <div class="composited"></div>
 153     </div>
 154
 155 </body>
 156 </html>