third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-value-inside-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 <script>
   6
   7 function test()
   8 {
   9     InspectorTest.selectNodeAndWaitForStyles("inspected", testEmulateKeypress);
  10
  11     function testEmulateKeypress()
  12     {
  13         var treeElement = InspectorTest.getMatchedStylePropertyTreeItem("font-size");
  14         treeElement.startEditing(treeElement.valueElement);
  15         var selection = window.getSelection();
  16         var range = selection.getRangeAt(0);
  17         var newRange = document.createRange();
  18         newRange.setStart(range.startContainer, 1);
  19         newRange.setEnd(range.startContainer, 1);
  20         selection.removeAllRanges();
  21         selection.addRange(newRange);
  22         // Use eventSender to emit "input" event.
  23         eventSender.keyDown("1");
  24         InspectorTest.waitForStyleApplied(onStyleApplied);
  25     }
  26
  27     function onStyleApplied()
  28     {
  29         InspectorTest.nodeWithId("inspected", onNodeFound);
  30     }
  31
  32     function onNodeFound(node)
  33     {
  34         InspectorTest.cssModel.inlineStylesPromise(node.id).then(onInlineStyle);
  35     }
  36
  37     function onInlineStyle(inlineStyleResult)
  38     {
  39         if (!inlineStyleResult || !inlineStyleResult.inlineStyle) {
  40             InspectorTest.addResult("Failed to get inline styles.").
  41             InspectorTest.completeTest();
  42             return;
  43         }
  44         InspectorTest.addResult("font-size: " + inlineStyleResult.inlineStyle.getPropertyValue("font-size"));
  45         InspectorTest.completeTest();
  46     }
  47 }
  48
  49 </script>
  50 </head>
  51
  52 <body onload="runTest()">
  53 <p>
  54 Verifies that property value editing triggers style update in rendering engine.
  55 </p>
  56
  57 <div id="inspected" style="font-size: 19px"></div>
  58
  59 </body>
  60 </html>