third_party/WebKit/LayoutTests/http/tests/inspector-enabled/reattach-after-editing-styles.html

   1 <html>
   2 <head>
   3 <link rel="stylesheet" href="resources/style.css">
   4 <script src="../inspector/inspector-test.js"></script>
   5 <script src="../inspector/elements-test.js"></script>
   6 <style>
   7 #testDiv {
   8     font-family: arial;
   9 }
  10 </style>
  11 <script>
  12
  13 function reopenWebInspector(objectId)
  14 {
  15     window.didReopen = 1;
  16     testRunner.closeWebInspector();
  17     setTimeout(function() {
  18       testRunner.showWebInspector();
  19       runTest();
  20     }, 0);
  21 }
  22
  23 function initTest()
  24 {
  25     delete window.didReopen;
  26     if (window.testRunner)
  27         testRunner.waitUntilDone();
  28     if (window.testRunner)
  29         testRunner.showWebInspector();
  30     runTest();
  31 }
  32
  33 function test()
  34 {
  35     InspectorTest.RuntimeAgent.evaluate("window.didReopen", dispatch);
  36
  37     function dispatch(error, result, wasThrown)
  38     {
  39         if (result.type !== "number") {
  40             InspectorTest.addResult("Opening front-end for the first time");
  41             testFirstOpen();
  42         } else {
  43             InspectorTest.addResult("Opening front-end second time");
  44             InspectorTest.addResult("Dump styles after inspector was reopened:");
  45             dump(InspectorTest.completeTest);
  46         }
  47     }
  48
  49     function testFirstOpen()
  50     {
  51         InspectorTest.addResult("Dump initial styles:");
  52         dump(onStylesDumped);
  53
  54         function onStylesDumped()
  55         {
  56             treeElement = InspectorTest.getMatchedStylePropertyTreeItem("color");
  57             treeElement.startEditing();
  58             treeElement.nameElement.textContent = "color";
  59             treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  60
  61             // Commit editing.
  62             treeElement.valueElement.textContent = "green";
  63             treeElement.valueElement.firstChild.select();
  64             treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  65             InspectorTest.waitForStyleApplied(onStyleSheetPropertyEdited);
  66         }
  67
  68         function onStyleSheetPropertyEdited()
  69         {
  70             treeElement = InspectorTest.getMatchedStylePropertyTreeItem("font-family");
  71             treeElement.startEditing();
  72             treeElement.nameElement.textContent = "font-family";
  73             treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  74
  75             // Commit editing.
  76             treeElement.valueElement.textContent = "Helvetica";
  77             treeElement.valueElement.firstChild.select();
  78             treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  79             InspectorTest.waitForStyleApplied(onStyleTagPropertyEdited);
  80         }
  81
  82         function onStyleTagPropertyEdited()
  83         {
  84             InspectorTest.addNewRule("#testDiv, my-custom-tag", onFirstRuleAdded);
  85         }
  86
  87         function onFirstRuleAdded()
  88         {
  89             InspectorTest.addNewRule("#testDiv, another-custom-tag", onSecondRuleAdded);
  90         }
  91
  92         function onSecondRuleAdded()
  93         {
  94             InspectorTest.domModel.undo(onRuleRemoved);
  95         }
  96
  97         function onRuleRemoved()
  98         {
  99             InspectorTest.selectNodeAndWaitForStyles("other", step4);
 100         }
 101
 102         function step4()
 103         {
 104             InspectorTest.addResult("Dump styles after editing:");
 105             dump(reopenInspector);
 106         }
 107     }
 108
 109     function reopenInspector()
 110     {
 111         InspectorTest.flushResults();
 112         InspectorTest.evaluateInPage("reopenWebInspector()");
 113     }
 114
 115     function dump(callback)
 116     {
 117         InspectorTest.selectNodeAndWaitForStyles("testDiv", step2);
 118
 119         function step2()
 120         {
 121             InspectorTest.dumpSelectedElementStyles(true);
 122             callback();
 123         }
 124     }
 125 }
 126 </script>
 127 </head>
 128
 129 <body onload="initTest()">
 130 <p>This test checks that styles edited through inspector are correctly shown upon reattach.</p>
 131 <div id="testDiv"></div>
 132 <div id="other"></div>
 133 </body>
 134 </html>