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