third_party/WebKit/LayoutTests/inspector/elements/inline-style-title.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 <style id="inline-style">
   6     div { color: red }
   7 </style>
   8 <script>
   9
  10 function updateStyleText()
  11 {
  12     document.querySelector("#inline-style").textContent = "span { border: 1px solid black }";
  13 }
  14
  15 function test()
  16 {
  17     // Save time on style updates.
  18     WebInspector.StylesSidebarPane.prototype.update = function() {};
  19     WebInspector.MetricsSidebarPane.prototype.update = function() {};
  20
  21     InspectorTest.nodeWithId("inline-style", onInlineStyleQueried);
  22
  23     var treeOutline = InspectorTest.firstElementsTreeOutline();
  24     var treeElement;
  25
  26     function onInlineStyleQueried(node)
  27     {
  28         if (!node) {
  29             InspectorTest.addResult("Didn't find node with given ID");
  30             InspectorTest.completeTest();
  31             return;
  32         }
  33         treeElement = treeOutline.findTreeElement(node);
  34         InspectorTest.addResult("=== initial inline style text ===");
  35         InspectorTest.addResult(treeElement.title.textContent);
  36         InspectorTest.evaluateInPage("updateStyleText()", onStyleUpdated);
  37     }
  38
  39     function onStyleUpdated()
  40     {
  41         InspectorTest.firstElementsTreeOutline().runPendingUpdates();
  42         InspectorTest.addResult("=== inline style text after change ===");
  43         InspectorTest.addResult(treeElement.title.textContent);
  44         InspectorTest.completeTest();
  45     }
  46 }
  47
  48 </script>
  49 </head>
  50
  51 <body onload="runTest()">
  52 <p>
  53 Verifies that external change of inline style element updates its title.
  54 </p>
  55 </div>
  56 </body>
  57 </html>