third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/custom-element-lifecycle-events.html

   1 <html>
   2 <head>
   3 <script src="../../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../../http/tests/inspector/console-test.js"></script>
   5 <script src="../../../http/tests/inspector/debugger-test.js"></script>
   6 <script>
   7
   8 function test() {
   9     var setup = [
  10         "var proto = Object.create(HTMLElement.prototype);",
  11         "proto.createdCallback = function() { output('Invoked createdCallback.'); };",
  12         "proto.attachedCallback = function() { output('Invoked attachedCallback.'); };",
  13         "proto.detachedCallback = function() { output('Invoked detachedCallback.'); };",
  14         "proto.attributeChangedCallback = function() { output('Invoked attributeChangedCallback.'); };",
  15         "CustomElement = document.registerElement('x-foo', {prototype: proto});",
  16     ].join('\n');
  17
  18     var lifecycleCallbacks = [
  19         "created = new CustomElement();",
  20         "created.setAttribute('x', '1');",
  21         "document.body.appendChild(created);",
  22         "created.remove();",
  23     ].join('\n');
  24
  25     InspectorTest.startDebuggerTest(step1);
  26
  27     function step1() {
  28         InspectorTest.evaluateInConsole(setup, function() {
  29             InspectorTest.addResult("Custom element registered.");
  30             InspectorTest.evaluateInConsoleAndDump("new CustomElement() instanceof CustomElement", step2);
  31         });
  32     }
  33
  34     function step2() {
  35         InspectorTest.evaluateInConsole('debugger;');
  36         InspectorTest.waitUntilPaused(step3);
  37     }
  38
  39     function step3() {
  40         InspectorTest.evaluateInConsoleAndDump("new CustomElement() instanceof CustomElement", step4);
  41     }
  42
  43     function step4() {
  44         InspectorTest.evaluateInConsole(lifecycleCallbacks, InspectorTest.completeDebuggerTest);
  45     }
  46 }
  47
  48 </script>
  49 </head>
  50
  51 <body onload="runTest()">
  52 <p>
  53 Tests that custom element lifecycle events fire while debugger is paused.
  54 </p>
  55
  56 </body>
  57 </html>