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/elements-test.js"></script>
   5 <script src="../../http/tests/inspector/timeline-test.js"></script>
   6 <style>
   7 .relayout-boundary {
   8     overflow: hidden;
   9     width: 100px;
  10     height: 100px;
  11 }
  12 </style>
  13 <script>
  14
  15 function performActions()
  16 {
  17     var element = document.getElementById("invalidate1");
  18     element.style.marginTop = "10px";
  19     var unused = element.offsetHeight;
  20 }
  21
  22 function test()
  23 {
  24     InspectorTest.evaluateInPage("var unused = document.body.offsetWidth;", function() {
  25          InspectorTest.evaluateWithTimeline("performActions()", onTimelineRecorded);
  26     });
  27
  28     function clickValueLink(record, row)
  29     {
  30         var panel = WebInspector.panels.timeline;
  31         var helper = panel._uiUtils.generateDetailsContent(record, panel._model, new WebInspector.Linkifier(), onDetailsContentReady);
  32
  33         function onDetailsContentReady(element)
  34         {
  35             var rows = element.querySelectorAll(".timeline-details-view-row");
  36             for (var i = 0; i < rows.length; ++i) {
  37                 if (rows[i].firstChild.textContent.indexOf(row) !== -1) {
  38                     rows[i].lastChild.firstChild.click();
  39                     return;
  40                 }
  41             }
  42         }
  43     }
  44
  45     function onTimelineRecorded(records)
  46     {
  47         var layoutRecord = InspectorTest.findFirstTimelineRecord("Layout");
  48         WebInspector.notifications.addEventListener(WebInspector.NotificationService.Events.SelectedNodeChanged, onSelectedNodeChanged);
  49         clickValueLink(layoutRecord, "Layout root");
  50     }
  51
  52     function onSelectedNodeChanged()
  53     {
  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.NotificationService.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>