LayoutTests/inspector/css/keyframes-edit-declaration.html

<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<style>
    @keyframes fade { from { opacity: 0.1; } to { opacity: 0.9; } }
    #target { animation: fade 100s steps(1, end) paused; }
</style>
<script>
function test() {
    let suite = InspectorTest.createAsyncSuite("CSS.Keyframes.Edit");
    suite.addTestCase({
        name: "CSS.Keyframes.EditDeclarationChangesAnimation",
        async test() {
            let documentNode = await WI.domManager.requestDocument();
            let nodeId = await documentNode.querySelector("#target");
            let domNodeStyles = WI.cssManager.stylesForNode(WI.domManager.nodeForId(nodeId));
            await domNodeStyles.refresh();

            let fromKeyframe = domNodeStyles.keyframes[0];
            InspectorTest.expectTrue(fromKeyframe.style.editable, "`from` keyframe is editable.");

            await WI.mainTarget.CSSAgent.setStyleText(fromKeyframe.style.id, "opacity: 0.4;");

            let after = await InspectorTest.evaluateInPage(`getComputedStyle(document.getElementById("target")).opacity`);
            InspectorTest.expectEqual(after, "0.4", "After editing `from`, opacity is 0.4 (animation changed).");
        },
    });
    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="runTest()"><div id="target"></div></body>
</html>