third_party/WebKit/LayoutTests/inspector/elements/edit/edit-dom-actions-shadow.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="edit-dom-test.js"></script>
   6 <script>
   7
   8 function test()
   9 {
  10     // Save time on style updates.
  11     WebInspector.ElementsPanel.show();
  12
  13     WebInspector.StylesSidebarPane.prototype.update = function() {};
  14     WebInspector.MetricsSidebarPane.prototype.update = function() {};
  15
  16     InspectorTest.runTestSuite([
  17         function testSetUp(next)
  18         {
  19             InspectorTest.expandElementsTree(next);
  20         },
  21
  22         function testSetAuthorShadowDOMElementAttribute(next)
  23         {
  24             InspectorTest.domActionTestForNodeId("testSetAuthorShadowDOMElementAttribute", "shadow-node-to-set-attribute", testBody, next);
  25
  26             function testBody(node, done)
  27             {
  28                 InspectorTest.editNodePartAndRun(node, "webkit-html-attribute", "bar=\"edited attribute\"", done, true);
  29             }
  30         },
  31
  32         function testEditShadowDOMAsHTML(next)
  33         {
  34             InspectorTest.domActionTestForNodeId("testEditAuthorShadowDOMAsHTML", "authorShadowDOMElement", testBody, next);
  35
  36             function testBody(node, done)
  37             {
  38                 var treeOutline = InspectorTest.firstElementsTreeOutline();
  39                 var treeElement = treeOutline.findTreeElement(node);
  40                 treeOutline.toggleEditAsHTML(node);
  41                 InspectorTest.runAfterPendingDispatches(step2);
  42
  43                 function step2()
  44                 {
  45                     InspectorTest.addResult(treeElement._editing.codeMirror.getValue());
  46                     treeElement._editing.codeMirror.setValue("<span foo=\"shadow-span\"><span id=\"inner-shadow-span\">Shadow span contents</span></span>");
  47                     var event = InspectorTest.createKeyEvent("Enter");
  48                     event.isMetaOrCtrlForTest = true;
  49                     treeElement._htmlEditElement.dispatchEvent(event);
  50                     InspectorTest.runAfterPendingDispatches(InspectorTest.expandElementsTree.bind(InspectorTest, done));
  51                 }
  52             }
  53         }
  54
  55     ]);
  56 }
  57
  58 </script>
  59 </head>
  60
  61 <body onload="runTest()">
  62 <p>
  63 Tests that user can mutate author shadow DOM by means of elements panel.
  64 </p>
  65
  66 <div>
  67     <div id="testEditAuthorShadowDOMAsHTML"></div>
  68
  69     <div id="testSetAuthorShadowDOMElementAttribute"></div>
  70 </div>
  71 <script>
  72 function createRootWithContents(id, html)
  73 {
  74     var container = document.getElementById(id);
  75     var root = container.createShadowRoot();
  76     root.innerHTML = html;
  77 }
  78
  79 createRootWithContents("testEditAuthorShadowDOMAsHTML", "<div id='authorShadowDOMElement'></div>");
  80 createRootWithContents("testSetAuthorShadowDOMElementAttribute", "<div foo='attribute value' id='shadow-node-to-set-attribute'></div>");
  81 </script>
  82 </body>
  83 </html>