<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
let requestAnimationFrameID;

function expand() {
    let element = document.getElementById("x");
    let i = 0;

    let loop = () => {
        ++i;
        let height = parseInt(element.style.height) + 1;
        element.style.height = height + "px";
        TestPage.dispatchEventToFrontend("TestPage-styleChanged", height + "px");

        requestAnimationFrameID = requestAnimationFrame(loop);
    };

    loop();
}

function stopExpanding() {
    cancelAnimationFrame(requestAnimationFrameID);
}

function test() {
    InspectorTest.redirectRequestAnimationFrame();

    let nodeStyles = null;
    let suite = InspectorTest.createAsyncSuite("ModifyCSSProperty");

    InspectorTest.addEventListener("TestPage-styleChanged", (event) => {
        // Normally, this would get called if the styles sidebar is visible.
        // This doesn't work in tests.
        nodeStyles.refresh();
    });

    suite.addTestCase({
        name: "ModifyCSSPropertyRace.ChangeInlineStyle",
        test(resolve, reject) {
            let getInlineStyleDeclaration = () => {
                for (let styleDeclaration of nodeStyles.orderedStyles) {
                    if (styleDeclaration.type === styleDeclaration.constructor.Type.Inline)
                        return styleDeclaration;
                }
                InspectorTest.fail("No declaration found.");
                resolve();
            };

            let getProperty = (propertyName) => {
                let styleDeclaration = getInlineStyleDeclaration();
                for (let property of styleDeclaration.properties) {
                    if (property.name === propertyName)
                        return property;
                }
                InspectorTest.fail("No property found.");
                resolve();
            };

            InspectorTest.evaluateInPage("expand()");
            let updateCount = 0;
            let style = getInlineStyleDeclaration();

            function styleDecorationUpdated() {
                ++updateCount;
                let heightNumber = parseInt(getProperty("height").rawValue);

                if (updateCount === 1)
                    InspectorTest.expectGreaterThan(heightNumber, 10, "Height should have increased from 10px.");
                else if (updateCount === 2) {
                    InspectorTest.expectGreaterThan(heightNumber, 11, "Height should have increased from 11px.");
                    getProperty("height").rawValue = "100px";
                } else if (updateCount === 3)
                    InspectorTest.expectGreaterThanOrEqual(heightNumber, 100, "Height should be 100px or more.");
                else {
                    InspectorTest.expectGreaterThanOrEqual(heightNumber, 101, "Height should be 101px or more.");

                    InspectorTest.evaluateInPage("stopExpanding()");
                    style.removeEventListener(WI.CSSStyleDeclaration.Event.PropertiesChanged, styleDecorationUpdated);
                    resolve();
                }
            }

            style.addEventListener(WI.CSSStyleDeclaration.Event.PropertiesChanged, styleDecorationUpdated);
        }
    });

    WI.domManager.requestDocument((documentNode) => {
        WI.domManager.querySelector(documentNode.id, "#x", (contentNodeId) => {
            if (contentNodeId) {
                let domNode = WI.domManager.nodeForId(contentNodeId);
                nodeStyles = WI.cssManager.stylesForNode(domNode);

                if (nodeStyles.needsRefresh) {
                    nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
                        suite.runTestCasesAndFinish()
                    });
                } else
                    suite.runTestCasesAndFinish();
            } else {
                InspectorTest.fail("DOM node not found.");
                InspectorTest.completeTest();
            }
        });
    });
}
</script>
</head>
<body onload="runTest()">
    <p>Testing that changes to "style" attribute made from page's JavaScript are ignored when there's a pending change made via Web Inspector.</p>
    <div id="x" style="height: 10px"></div>
</body>
</html>