third_party/WebKit/LayoutTests/inspector-protocol/dom/dom-relayout-boundary.html

   1 <html>
   2 <head>
   3 <style>
   4 .relayout-boundary {
   5     width: 200px;
   6     height: 40px;
   7     overflow: hidden;
   8 }
   9
  10 </style>
  11 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script>
  12 <script type="text/javascript">
  13
  14 function test()
  15 {
  16     var nodeByIdAttribute = {};
  17     var nodeById = {};
  18
  19     getDocument();
  20
  21     function getAttribute(node, attribute)
  22     {
  23         if (!node.attributes)
  24             return;
  25         for (var i = 0; i < node.attributes.length; i += 2) {
  26             if (node.attributes[i] === attribute)
  27                 return node.attributes[i + 1];
  28         }
  29     }
  30
  31     function nodeLabel(node)
  32     {
  33         var result = node.localName;
  34         var id = getAttribute(node, "id");
  35         if (id)
  36             result += "#" + id;
  37         return result;
  38     }
  39
  40     function addNode(node)
  41     {
  42         nodeById[node.nodeId] = node;
  43         var idAttribute = getAttribute(node, "id");
  44         if (idAttribute)
  45             nodeByIdAttribute[idAttribute] = node;
  46         if (node.children)
  47             addNodes(node.children);
  48     }
  49
  50     function addNodes(nodes)
  51     {
  52         nodes.forEach(addNode);
  53     }
  54
  55     InspectorTest.eventHandler["DOM.setChildNodes"] = function setChildNodes(messageObject)
  56     {
  57         addNodes(messageObject.params.nodes);
  58     };
  59
  60     function getDocument()
  61     {
  62         // We must first get the document so that later on we may get sensible nodeIds.
  63         step({
  64             command: "DOM.getDocument",
  65             parameters: {},
  66             callback: getAllNodes
  67         });
  68     };
  69
  70     function getAllNodes(error, result)
  71     {
  72         addNode(result.root);
  73         step({
  74             command: "DOM.requestChildNodes",
  75             parameters: {"nodeId": result.root.nodeId, "depth": -1},
  76             callback: dumpRelayoutBoundary.bind(this, 0)
  77         });
  78     };
  79
  80     var nodeIdsToTest = [
  81         "outer",
  82         "boundary",
  83         "inner",
  84         "hidden"
  85     ];
  86
  87     function dumpRelayoutBoundary(nextId)
  88     {
  89         if (nextId >= nodeIdsToTest.length) {
  90             InspectorTest.completeTest();
  91             return;
  92         }
  93         var node = nodeByIdAttribute[nodeIdsToTest[nextId]];
  94         function dumpResultsAndContinue(error, result)
  95         {
  96             var text;
  97             if (error) {
  98                 text = error;
  99             } else {
 100                 var boundaryNode = nodeById[result.nodeId];
 101                 text = boundaryNode ? nodeLabel(boundaryNode) : "null";
 102             }
 103             InspectorTest.log("Relayout boundary for " + nodeLabel(node) + " is: " + text);
 104             dumpRelayoutBoundary(nextId + 1);
 105         }
 106         step({
 107             command: "DOM.getRelayoutBoundary",
 108             parameters: {"nodeId": node.nodeId},
 109             callback: dumpResultsAndContinue
 110         });
 111     }
 112
 113     function step(test)
 114     {
 115         InspectorTest.sendCommand(test.command, test.parameters, function(messageObject) {
 116             if (test.callback)
 117                 test.callback(messageObject.error && messageObject.error.message, messageObject.result);
 118         });
 119     };
 120     setTimeout(InspectorTest.completeTest.bind(InspectorTest), 3400);
 121 };
 122
 123 window.addEventListener("DOMContentLoaded", function () {
 124     runTest();
 125 }, false);
 126 </script>
 127 </head>
 128 <body>
 129 <div id="outer"></div>
 130 <div class="relayout-boundary" id="boundary">
 131     <div id="inner"></div>
 132     <div style="display: none">
 133         <div id="hidden"></div>
 134     </div>
 135 </div>
 136 </body>
 137 </html>