blob: 62aba61ca49dfeec3311806eba3be28600a6a096 [file] [log] [blame]
<html>
<head>
<style>
h1 {
color: #FF2;
opacity: .5;
transform: rotate(1000000000000000065537deg);
}
</style>
<script src="../../../http/tests/inspector/inspector-test.js"></script>
<script src="../../../http/tests/inspector/elements-test.js"></script>
<script>
function test()
{
InspectorTest.runTestSuite([
function testInit(next)
{
InspectorTest.selectNodeAndWaitForStyles("inspected", next);
},
function testAlterColor(next)
{
var colorTreeElement = InspectorTest.getMatchedStylePropertyTreeItem("color");
colorTreeElement.startEditing(colorTreeElement.valueElement);
// PageUp should change to 'FF3'
colorTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageUp"));
// Ctrl/Meta + Shift Down should change to 'EE3'
if (WebInspector.isMac())
colorTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("ArrowDown", /*Ctrl*/ false, /*Alt*/ false, /*Shift*/ true, /*Meta*/ true));
else
colorTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("ArrowDown", /*Ctrl*/ true, /*Alt*/ false, /*Shift*/ true, /*Meta*/ false));
InspectorTest.addResult(colorTreeElement.listItemElement.textContent);
next();
},
function testAlterNumber(next)
{
var opacityTreeElement = InspectorTest.getMatchedStylePropertyTreeItem("opacity");
opacityTreeElement.startEditing(opacityTreeElement.valueElement);
// 0.5 (initial). Alt + Up should change to 0.6
opacityTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("ArrowUp", /*Ctrl*/ false, /*Alt*/ true, /*Shift*/ false));
// Up should change to 1.6
opacityTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("ArrowUp"));
// Shift + PageUp should change to 11.6
opacityTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageUp", /*Ctrl*/ false, /*Alt*/ false, /*Shift*/ true));
InspectorTest.addResult(opacityTreeElement.listItemElement.textContent);
next();
},
function testAlterBigNumber(next)
{
var treeElement = InspectorTest.getMatchedStylePropertyTreeItem("transform");
treeElement.startEditing(treeElement.valueElement);
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var newRange = document.createRange();
newRange.setStart(range.startContainer, 10);
newRange.setEnd(range.startContainer, 10);
selection.removeAllRanges();
selection.addRange(newRange);
treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("ArrowUp"));
treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageUp"));
InspectorTest.addResult(treeElement.listItemElement.textContent);
next();
}
]);
}
</script>
</head>
<body onload="runTest()">
<p>
Tests that numeric and color values are incremented/decremented correctly.
</p>
<h1 id="inspected">Inspect Me</h1>
</body>
</html>