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

<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<style>
    @keyframes anim { from { opacity: 0.2; } to { opacity: 0.8; } }
    #target { animation: anim 100s steps(1, end) paused; }
</style>
<script>
function test() {
    let suite = InspectorTest.createAsyncSuite("CSS.Keyframes.EditProperties");
    let domNodeStyles;

    suite.addTestCase({
        name: "ModifyExistingProperty",
        async test() {
            let documentNode = await WI.domManager.requestDocument();
            domNodeStyles = WI.cssManager.stylesForNode(WI.domManager.nodeForId(await documentNode.querySelector("#target")));
            await domNodeStyles.refresh();

            domNodeStyles.keyframes[0].style.text = "opacity: 0.6;";

            let after = await InspectorTest.evaluateInPage(`getComputedStyle(document.getElementById("target")).opacity`);;
            InspectorTest.expectEqual(after, "0.6", "Modify opacity -> 0.6 changes animation.");
        },
    });
    suite.addTestCase({
        name: "AddProperty",
        async test() {
            await domNodeStyles.refresh();

            domNodeStyles.keyframes[0].style.text = "opacity: 0.6; color: rgb(10, 20, 30);";

            let value = await InspectorTest.evaluateInPage(`getComputedStyle(document.getElementById("target")).color`);
            InspectorTest.expectEqual(value, "rgb(10, 20, 30)", "Added color is applied to `from`.");
        },
    });
    suite.addTestCase({
        name: "RemoveProperty",
        async test() {
            await domNodeStyles.refresh();

            domNodeStyles.keyframes[0].style.text = "opacity: 0.6;";
            await domNodeStyles.refresh();

            InspectorTest.expectFalse(domNodeStyles.keyframes[0].style.text.includes("color"), "Removed color no longer in keyframe text.");
        },
    });
    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="runTest()"><div id="target"></div></body>
</html>