src/third_party/WebKit/LayoutTests/inspector/styles/styles-change-node-while-editing.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>
   6
   7 function test()
   8 {
   9     WebInspector.showPanel("elements");
  10     InspectorTest.selectNodeAndWaitForStyles("inspected", step1);
  11
  12     var treeElement;
  13     var section;
  14
  15     function step1()
  16     {
  17         InspectorTest.dumpSelectedElementStyles(true, true, true);
  18         treeElement = InspectorTest.getElementStylePropertyTreeItem("color");
  19
  20         treeElement.startEditing();
  21         treeElement.nameElement.textContent = "background";
  22
  23         InspectorTest.selectNodeAndWaitForStyles("other", step2);
  24     }
  25
  26     function step2()
  27     {
  28         InspectorTest.dumpSelectedElementStyles(true, true, true);
  29         InspectorTest.selectNodeAndWaitForStyles("inspected", step3);
  30     }
  31
  32     function step3()
  33     {
  34         InspectorTest.dumpSelectedElementStyles(true, true, true);
  35         InspectorTest.completeTest();
  36     }
  37 }
  38
  39 </script>
  40 </head>
  41
  42 <body onload="runTest()">
  43 <p>
  44 Tests that changing selected node while editing style does update styles sidebar.
  45 </p>
  46
  47 <div id="inspected" style="color: red">Text</div>
  48 <div id="other" style="color: blue"></div>
  49
  50 </body>
  51 </html>