src/third_party/WebKit/LayoutTests/inspector/elements/styles/up-down-numerics-and-colors.html

   1 <html>
   2 <head>
   3
   4 <style>
   5 h1 {
   6     color: #FF2;
   7     opacity: .5;
   8     transform: rotate(1000000000000000065537deg);
   9 }
  10 </style>
  11
  12 <script src="../../../http/tests/inspector/inspector-test.js"></script>
  13 <script src="../../../http/tests/inspector/elements-test.js"></script>
  14 <script>
  15
  16 function test()
  17 {
  18     InspectorTest.runTestSuite([
  19         function testInit(next)
  20         {
  21             InspectorTest.selectNodeAndWaitForStyles("inspected", expandSection);
  22
  23             function expandSection()
  24             {
  25                 var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][2];
  26                 section.expand();
  27                 next();
  28             }
  29         },
  30
  31         function testAlterColor(next)
  32         {
  33             var colorTreeElement = InspectorTest.getMatchedStylePropertyTreeItem("color");
  34             colorTreeElement.startEditing(colorTreeElement.valueElement);
  35
  36             // Most significant digit increment ('F') should not change the value.
  37             colorTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageUp", false, false, true));
  38             colorTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Up"));
  39             colorTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageDown"));
  40             colorTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageDown", false, false, true));
  41             InspectorTest.addResult(colorTreeElement.listItemElement.textContent);
  42             next();
  43         },
  44
  45         function testAlterNumber(next)
  46         {
  47             var opacityTreeElement = InspectorTest.getMatchedStylePropertyTreeItem("opacity");
  48             opacityTreeElement.startEditing(opacityTreeElement.valueElement);
  49             // 0.5 (initial)
  50             opacityTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Up", false, true, false)); // Alt-Up
  51             // 0.6
  52             opacityTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Up"));
  53             // 1.6
  54             opacityTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageUp"));
  55             // 11.6
  56             InspectorTest.addResult(opacityTreeElement.listItemElement.textContent);
  57             next();
  58         },
  59
  60         function testAlterBigNumber(next)
  61         {
  62             var treeElement = InspectorTest.getMatchedStylePropertyTreeItem("transform");
  63             treeElement.startEditing(treeElement.valueElement);
  64             var selection = window.getSelection();
  65             var range = selection.getRangeAt(0);
  66             var newRange = document.createRange();
  67             newRange.setStart(range.startContainer, 10);
  68             newRange.setEnd(range.startContainer, 10);
  69             selection.removeAllRanges();
  70             selection.addRange(newRange);
  71             treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Up"));
  72             treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageUp"));
  73             InspectorTest.addResult(treeElement.listItemElement.textContent);
  74             next();
  75         }
  76     ]);
  77 }
  78 </script>
  79 </head>
  80
  81 <body onload="runTest()">
  82 <p>
  83 Tests that numeric and color values are incremented/decremented correctly.
  84 </p>
  85 <h1 id="inspected">Inspect Me</h1>
  86 </body>
  87 </html>