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