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