LayoutTests/inspector/styles/up-down-numerics-and-colors.html

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