third_party/WebKit/LayoutTests/inspector/elements/styles/cancel-upon-invalid-property.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>
   6 #inspected {
   7     color: blue;
   8 }
   9 </style>
  10 <script>
  11
  12 function test()
  13 {
  14     var treeElement;
  15     InspectorTest.selectNodeAndWaitForStyles("inspected", editProperty);
  16
  17     function editProperty()
  18     {
  19         treeElement = InspectorTest.getMatchedStylePropertyTreeItem("color");
  20         InspectorTest.dumpSelectedElementStyles(true, false, true);
  21         treeElement.startEditing();
  22         treeElement.nameElement.textContent = "color";
  23         treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  24         treeElement.valueElement.textContent = "red";
  25         InspectorTest.waitForStyleApplied(commitInvalidProperty);
  26         treeElement.kickFreeFlowStyleEditForTest();
  27     }
  28
  29     function commitInvalidProperty()
  30     {
  31         treeElement.valueElement.textContent = "red/*";
  32         treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  33         InspectorTest.waitForStyleApplied(invalidCommitted);
  34     }
  35
  36     function invalidCommitted()
  37     {
  38         InspectorTest.waitForStyleApplied(dumpAndExit);
  39     }
  40
  41     function dumpAndExit()
  42     {
  43         InspectorTest.dumpSelectedElementStyles(true, false, true);
  44         InspectorTest.completeTest();
  45     }
  46 }
  47
  48 </script>
  49 </head>
  50
  51 <body onload="runTest()">
  52 <p>
  53 Verifies that entering poor property value restores original text.
  54 </p>
  55
  56 <div id="inspected">Text</div>
  57
  58 </body>
  59 </html>