blob: 1f0002ab45ae9a0f43e4c3458b41895eb0ca4355 [file] [log] [blame]
<html>
<head>
<script src="../../../http/tests/inspector/inspector-test.js"></script>
<script src="../../../http/tests/inspector/elements-test.js"></script>
<script>
function test()
{
InspectorTest.runTestSuite([
function init(next)
{
InspectorTest.selectNodeAndWaitForStyles("inspected1", next);
},
function editKeywordAsOriginal(next)
{
startEditingAndDumpValue(WebInspector.Color.Format.Original, "border", next);
},
function editKeywordAsHex(next)
{
startEditingAndDumpValue(WebInspector.Color.Format.HEX, "border", next);
},
function editKeywordAsHSL(next)
{
startEditingAndDumpValue(WebInspector.Color.Format.HSL, "border", next);
},
function editKeywordAsRGB(next)
{
startEditingAndDumpValue(WebInspector.Color.Format.RGB, "border", onValueDumped);
function onValueDumped()
{
InspectorTest.selectNodeAndWaitForStyles("inspected2", next);
}
},
function editHexAsOriginal(next)
{
startEditingAndDumpValue(WebInspector.Color.Format.Original, "color", next);
},
function editHexAsHex(next)
{
startEditingAndDumpValue(WebInspector.Color.Format.HEX, "color", next);
},
function editHexAsHSL(next)
{
startEditingAndDumpValue(WebInspector.Color.Format.HSL, "color", next);
},
function editHexAsRGB(next)
{
startEditingAndDumpValue(WebInspector.Color.Format.RGB, "color", next);
},
function editNewProperty(next)
{
var section = InspectorTest.inlineStyleSection();
treeElement = section.addNewBlankProperty(0);
treeElement.startEditing();
treeElement.nameElement.textContent = "border-color";
treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
treeElement.valueElement.textContent = "hsl(120, 100%, 25%)";
treeElement.kickFreeFlowStyleEditForTest();
InspectorTest.waitForStyleApplied(kicked);
function kicked()
{
treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Tab", false, false, true));
treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Tab"));
InspectorTest.addResult(treeElement.valueElement.textContent);
next();
}
}
]);
function setFormat(newFormat, callback)
{
WebInspector.settingForTest("colorFormat").set(newFormat);
WebInspector.panels.elements.sidebarPanes.styles.doUpdate().then(callback);
}
function startEditingAndDumpValue(format, propertyName, next)
{
setFormat(format, onFormatSet);
function onFormatSet()
{
var treeElement = InspectorTest.getElementStylePropertyTreeItem(propertyName);
treeElement.startEditing(treeElement.valueElement);
InspectorTest.addResult(treeElement.valueElement.textContent);
treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Escape"));
next();
}
}
}
</script>
</head>
<body onload="runTest()">
<p>
Tests that property value being edited uses the user-specified color format.
</p>
<div id="inspected1" style="border: 1px solid red">inspected1</div>
<div id="inspected2" style="color: #ffffee">inspected2</div>
</body>
</html>