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