c3d4890f6fc9cc36abb08cb4156cc9a2214bdef2
[platform/framework/web/crosswalk.git] / 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>