src/third_party/WebKit/LayoutTests/inspector/timeline/timeline-node-reference.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/timeline-test.js"></script>
   5 <style>
   6 .relayout-boundary {
   7     overflow: hidden;
   8     width: 100px;
   9     height: 100px;
  10 }
  11 </style>
  12 <script>
  13
  14 function performActions()
  15 {
  16     var element = document.getElementById("invalidate1");
  17     element.style.marginTop = "10px";
  18     var unused = element.offsetHeight;
  19 }
  20
  21 function test()
  22 {
  23     InspectorTest.evaluateInPage("var unused = document.body.offsetWidth; testRunner.display();", function() {
  24          InspectorTest.evaluateWithTimeline("performActions()", onTimelineRecorded);
  25     });
  26
  27     function clickValueLink(record, row)
  28     {
  29         var helper = record.generatePopupContent(onDetailsContentReady);
  30
  31         function onDetailsContentReady(element)
  32         {
  33             var rows = element.querySelectorAll(".timeline-details-view-row");
  34             for (var i = 0; i < rows.length; ++i) {
  35                 if (rows[i].firstChild.textContent.indexOf(row) !== -1) {
  36                     rows[i].lastChild.firstChild.click();
  37                     return;
  38                 }
  39             }
  40         }
  41     }
  42
  43     function onTimelineRecorded(records)
  44     {
  45         var layoutRecord = InspectorTest.findPresentationRecord("Layout");
  46         WebInspector.notifications.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, onSelectedNodeChanged);
  47         clickValueLink(layoutRecord, "Layout root");
  48     }
  49
  50     function onSelectedNodeChanged()
  51     {
  52         // avoid using WebInspector.panel("elements"), as we get first event from constructor,
  53         // and this call would cause another instance to get constructed.
  54         var node = WebInspector.panels.elements.selectedDOMNode();
  55         // We may first get an old selected node while switching to the Elements panel.
  56         if (node.nodeName() === "BODY")
  57             return;
  58         WebInspector.notifications.removeEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, onSelectedNodeChanged);
  59         InspectorTest.addResult("Layout root node id: " + node.getAttribute("id"));
  60         InspectorTest.completeTest();
  61     }
  62 }
  63
  64 </script>
  65 </head>
  66
  67 <body onload="runTest()">
  68 <p>
  69 Tests the Timeline API instrumentation of a Layout event
  70 </p>
  71 <div id="boundary" class="relayout-boundary">
  72     <div>
  73         <div id="invalidate1"><div>text</div></div>
  74     </div>
  75 </div>
  76
  77 </body>
  78 </html>