src/third_party/WebKit/LayoutTests/inspector/tracing/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     // Force panel load.
  24     WebInspector.inspectorView.panel("elements");
  25
  26     InspectorTest.evaluateInPage("var unused = document.body.offsetWidth;", function() {
  27          InspectorTest.evaluateWithTimeline("performActions()", onTimelineRecorded);
  28     });
  29
  30     function clickValueLink(record, row)
  31     {
  32         var panel = WebInspector.inspectorView.panel("timeline");
  33         var helper = panel._uiUtils.generateDetailsContent(record, panel._model, new WebInspector.Linkifier(), onDetailsContentReady);
  34
  35         function onDetailsContentReady(element)
  36         {
  37             var rows = element.querySelectorAll(".timeline-details-view-row");
  38             for (var i = 0; i < rows.length; ++i) {
  39                 if (rows[i].firstChild.textContent.indexOf(row) !== -1) {
  40                     rows[i].lastChild.firstChild.click();
  41                     return;
  42                 }
  43             }
  44         }
  45     }
  46
  47     function onTimelineRecorded(records)
  48     {
  49         var layoutRecord = InspectorTest.findFirstTimelineRecord("Layout");
  50         WebInspector.notifications.addEventListener(WebInspector.NotificationService.Events.SelectedNodeChanged, onSelectedNodeChanged);
  51         clickValueLink(layoutRecord, "Layout root");
  52     }
  53
  54     function onSelectedNodeChanged()
  55     {
  56         // avoid using WebInspector.inspectorView.panel("elements"), as we get first event from constructor,
  57         // and this call would cause another instance to get constructed.
  58         var node = WebInspector.panels.elements.selectedDOMNode();
  59         // We may first get an old selected node while switching to the Elements panel.
  60         if (node.nodeName() === "BODY")
  61             return;
  62         WebInspector.notifications.removeEventListener(WebInspector.NotificationService.Events.SelectedNodeChanged, onSelectedNodeChanged);
  63         InspectorTest.addResult("Layout root node id: " + node.getAttribute("id"));
  64         InspectorTest.completeTest();
  65     }
  66 }
  67
  68 </script>
  69 </head>
  70
  71 <body onload="runTest()">
  72 <p>
  73 Tests the Timeline API instrumentation of a Layout event
  74 </p>
  75 <div id="boundary" class="relayout-boundary">
  76     <div>
  77         <div id="invalidate1"><div>text</div></div>
  78     </div>
  79 </div>
  80
  81 </body>
  82 </html>