src/third_party/WebKit/LayoutTests/inspector/elements/edit-style-attribute.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 testSetNewValue()
   8 {
   9     document.getElementById("node-set-new-value").style.setProperty("color", "blue");
  10 }
  11
  12 function testSetSameValue()
  13 {
  14     document.getElementById("node-set-same-value").style.setProperty("color", "red");
  15 }
  16
  17 function test()
  18 {
  19     // Save time on style updates.
  20     WebInspector.StylesSidebarPane.prototype.update = function() {};
  21     WebInspector.MetricsSidebarPane.prototype.update = function() {};
  22
  23     InspectorTest.runTestSuite([
  24         function testSetUp(next)
  25         {
  26             InspectorTest.expandElementsTree(next);
  27         },
  28
  29         function testSetNewValue(next)
  30         {
  31             InspectorTest.evaluateInPage("testSetNewValue()");
  32
  33             WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, listener);
  34             function listener(event)
  35             {
  36                 InspectorTest.addResult("WebInspector.DOMModel.Events.AttrModified should be issued");
  37                 WebInspector.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrModified, listener);
  38                 next();
  39             }
  40         },
  41
  42         function testSetSameValue(next)
  43         {
  44             InspectorTest.evaluateInPage("testSetSameValue()");
  45
  46             WebInspector.domModel.addEventListener(WebInspector.DOMModel.Events.AttrModified, listener);
  47             function listener(event)
  48             {
  49                 InspectorTest.addResult("WebInspector.DOMModel.Events.AttrModified should not be issued");
  50                 WebInspector.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrModified, listener);
  51             }
  52
  53             InspectorTest.addSniffer(WebInspector.DOMNode.prototype, "_setAttributesPayload", callback);
  54             function callback()
  55             {
  56                 InspectorTest.addResult("WebInspector.DOMNode.prototype._setAttributesPayload should be called");
  57                 WebInspector.domModel.removeEventListener(WebInspector.DOMModel.Events.AttrModified, listener);
  58                 next();
  59             }
  60         }
  61     ]);
  62 }
  63
  64 </script>
  65 </head>
  66
  67 <body onload="runTest()">
  68 <p>
  69 Tests that style modification generates attribute updated event only when attribute is actually changed.
  70 </p>
  71
  72 <div id="container">
  73     <div id="node-set-new-value" style="color:red"></div>
  74     <div id="node-set-same-value" style="color:red"></div>
  75 </div>
  76 </body>
  77 </html>