src/third_party/WebKit/LayoutTests/inspector/elements/styles/style-update-during-selector-edit.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 addStyleClass()
   8 {
   9     document.getElementById("inspected").className = "new-class";
  10 }
  11
  12 function test()
  13 {
  14     WebInspector.inspectorView.showPanel("elements");
  15     InspectorTest.selectNodeAndWaitForStyles("inspected", step1);
  16     var treeOutline = WebInspector.panels.elements.treeOutline;
  17     var seenRebuildUpdate;
  18     var seenAttrModified;
  19     var modifiedAttrNodes = [];
  20
  21     function attributeChanged(event)
  22     {
  23         if (event.data.node === treeOutline.selectedDOMNode())
  24             seenAttrModified = true;
  25     }
  26
  27     function rebuildUpdate()
  28     {
  29         if (WebInspector.panels.elements.sidebarPanes.styles.node === treeOutline.selectedDOMNode())
  30             seenRebuildUpdate = true;
  31     }
  32
  33     function step1()
  34     {
  35         InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", rebuildUpdate);
  36         WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, attributeChanged, this);
  37         // Click "Add new rule".
  38         document.getElementById("add-style-button-test-id").click();
  39         InspectorTest.evaluateInPage("addStyleClass()", step2);
  40     }
  41
  42     function step2()
  43     {
  44         if (!seenAttrModified)
  45             InspectorTest.addResult("FAIL: AttrModified event not received.");
  46         else if (seenRebuildUpdate)
  47             InspectorTest.addResult("FAIL: Styles pane updated while a selector editor was active.");
  48         else
  49             InspectorTest.addResult("SUCCESS: Styles pane not updated.");
  50         InspectorTest.completeTest();
  51     }
  52 }
  53
  54 </script>
  55 <style>
  56 .new-class {
  57     color: red;
  58 }
  59 </style>
  60 </head>
  61
  62 <body onload="runTest()">
  63 <p>
  64 Tests that modification of element styles while editing a selector does not commit the editor.
  65 </p>
  66
  67 <div id="inspected"></div>
  68
  69 </body>
  70 </html>