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