third_party/WebKit/LayoutTests/inspector/sources/debugger-step/debugger-step-into-custom-element-callbacks.html

   1 <html>
   2 <head>
   3 <script src="../../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../../http/tests/inspector/debugger-test.js"></script>
   5 <script>
   6
   7 function testFunction()
   8 {
   9     var proto = Object.create(HTMLElement.prototype);
  10     proto.createdCallback = function createdCallback()
  11     {
  12         output('Invoked createdCallback.');
  13     };
  14     proto.attachedCallback = function attachedCallback()
  15     {
  16         output('Invoked attachedCallback.');
  17     };
  18     proto.detachedCallback = function detachedCallback()
  19     {
  20         output('Invoked detachedCallback.');
  21     };
  22     proto.attributeChangedCallback = function attributeChangedCallback()
  23     {
  24         output('Invoked attributeChangedCallback.');
  25     };
  26     var FooElement = document.registerElement('x-foo', { prototype: proto });
  27     debugger;
  28     var foo = new FooElement();
  29     debugger;
  30     foo.setAttribute('a', 'b');
  31     debugger;
  32     document.body.appendChild(foo);
  33     debugger;
  34     foo.remove();
  35 }
  36
  37 function test()
  38 {
  39     InspectorTest.startDebuggerTest(step1, true);
  40
  41     function step1()
  42     {
  43         InspectorTest.runTestFunctionAndWaitUntilPaused(step2);
  44     }
  45
  46     function checkTopFrameFunction(callFrames, expectedName)
  47     {
  48         var topFunctionName = callFrames[0].functionName;
  49         if (expectedName === topFunctionName)
  50             InspectorTest.addResult("PASS: Did step into event listener(" + expectedName + ").");
  51         else
  52             InspectorTest.addResult("FAIL: Unexpected top function: expected " + expectedName + ", found " + topFunctionName);
  53     }
  54
  55     function stepOverThenIn(name, callback)
  56     {
  57         InspectorTest.addResult("Stepping to " + name + "...");
  58         WebInspector.panels.sources._stepOverButton.element.click();
  59         InspectorTest.waitUntilResumed(InspectorTest.waitUntilPaused.bind(InspectorTest, function() {
  60             InspectorTest.addResult("Stepping into " + name + "...");
  61             WebInspector.panels.sources._stepIntoButton.element.click();
  62             InspectorTest.waitUntilResumed(InspectorTest.waitUntilPaused.bind(InspectorTest, callback));
  63         }));
  64     }
  65
  66     function step2()
  67     {
  68         stepOverThenIn('constructor', step3);
  69     }
  70
  71     function step3(callFrames)
  72     {
  73         checkTopFrameFunction(callFrames, 'createdCallback');
  74         InspectorTest.resumeExecution(InspectorTest.waitUntilPaused.bind(InspectorTest, step4));
  75     }
  76
  77     function step4()
  78     {
  79         stepOverThenIn('setAttribute', step5);
  80     }
  81
  82     function step5(callFrames)
  83     {
  84         checkTopFrameFunction(callFrames, 'attributeChangedCallback');
  85         InspectorTest.resumeExecution(InspectorTest.waitUntilPaused.bind(InspectorTest, step6));
  86     }
  87
  88     function step6()
  89     {
  90         stepOverThenIn('attachedCallback', step7);
  91     }
  92
  93     function step7(callFrames)
  94     {
  95         checkTopFrameFunction(callFrames, 'attachedCallback');
  96         InspectorTest.resumeExecution(InspectorTest.waitUntilPaused.bind(InspectorTest, step8));
  97     }
  98
  99     function step8()
 100     {
 101         stepOverThenIn('detachedCallback', step9);
 102     }
 103
 104     function step9(callFrames)
 105     {
 106         checkTopFrameFunction(callFrames, 'detachedCallback');
 107         InspectorTest.completeDebuggerTest();
 108     }
 109 }
 110
 111 </script>
 112 </head>
 113
 114 <body onload="runTest()">
 115 <p>
 116 Tests that stepping into custom element methods will lead to a pause in the callbacks.
 117 </p>
 118 </body>
 119 </html>