<html>
<head>
<script src="../../http/tests/inspector/resources/protocol-test.js"></script>
<script>

function addCompositedLayer()
{
    var element = document.createElement("div");
    element.className = "composited";
    element.id = "last-element";
    document.body.appendChild(element);
    return new Promise(resolve => requestAnimationFrame(resolve));
};

function test()
{
    let documentNode;
    let initialLayers;

    step({
        name: "Enable the LayerTree agent",
        command: "LayerTree.enable",
        parameters: {},
        callback: () => {}
    });

    InspectorProtocol.awaitEvent({event: "LayerTree.layerTreeDidChange"}).then(getDocument);

    function getDocument()
    {
        step({
            name: "Get the Document",
            command: "DOM.getDocument",
            parameters: {},
            callback: getInitialLayerTree
        });
    };
    
    function getInitialLayerTree(result)
    {
        documentNode = result.root;
        step({
            name: "Get the initial layer tree",
            command: "LayerTree.layersForNode",
            parameters: {"nodeId": documentNode.nodeId},
            callback: gotInitialLayerTree
        });
    };

    function gotInitialLayerTree(result)
    {
        initialLayers = result.layers;

        dumpLayers(initialLayers);

        step({
            name: "Message the page to add a new composited layer",
            command: "Runtime.evaluate",
            parameters: {"expression": "addCompositedLayer()"},
            callback: awaitRequestAnimationFrame
        });
    };

    function awaitRequestAnimationFrame(result)
    {
        step({
            name: "Wait for requestAnimationFrame",
            command: "Runtime.awaitPromise",
            parameters: {"promiseObjectId": result.result.objectId},
            callback: getModifiedLayerTree
        });
    };

    function getModifiedLayerTree(result)
    {
        step({
            name: "Get the modified layer tree",
            command: "LayerTree.layersForNode",
            parameters: {"nodeId": documentNode.nodeId},
            callback: gotModifiedLayerTree
        });
    };

    var layerCount = 0;

    function gotModifiedLayerTree(result)
    {
        dumpLayers(result.layers);

        var mutations = layerMutations(initialLayers, result.layers);
        var newLayer = mutations.additions[0];

        step({
            name: "Get attributes for the newly inserted node",
            command: "DOM.getAttributes",
            parameters: {"nodeId": newLayer.nodeId},
            callback: gotNodeAttributes
        });
    };

    function gotNodeAttributes(result)
    {
        var attributes = attributesDictionaryFromArray(result.attributes);
        if (attributes.id !== "last-element")
            ProtocolTest.log("FAIL: Did not obtain the expected element for the last inserted layer.");

        finishTest();
    };

    function finishTest()
    {
        ProtocolTest.log("\n=== Test complete, all expected conditions met ===");
        ProtocolTest.completeTest();
    };

    function layerMutations(oldLayers, newLayers)
    {
        function layerIdMap(layer) {
            return layer.layerId;
        }

        var oldLayerIds = oldLayers.map(layerIdMap);
        var newLayerIds = newLayers.map(layerIdMap);

        return {
            additions: newLayers.filter(function (layer) {
                return (oldLayerIds.indexOf(layer.layerId) === -1);
            }),
            removals: oldLayers.filter(function (layer) {
                return (newLayerIds.indexOf(layer.layerId) === -1);
            })
        };
    };

    function attributesDictionaryFromArray(attributes)
    {
        var dictionary = {}
        for (var i = 0, count = attributes.length; i < count; i += 2) {
            dictionary[attributes[i]] = attributes[i + 1];
        }
        return dictionary;
    };

    function dumpLayers(layers)
    {
        function replacer(key, value)
        {
            if (key === "layerId" || key === "nodeId" || key === "memory" || key === "paintCount")
                return typeof(value);

            // some values differ based on port, but the ones we most
            // care about will always be less or equal 100.
            if ((key === "width" || key === "height") && value > 100) 
                return typeof(value);
            
            return value;
        };
        
        ProtocolTest.log("\n" + JSON.stringify(layers, replacer, "    "));
    };

    function step(test)
    {
        ProtocolTest.log("\n=== " + test.name + " ===\n")
        InspectorProtocol.sendCommand(test.command, test.parameters, function(messageObject) {
            if (messageObject.hasOwnProperty("error")) {
                ProtocolTest.log("FAIL: " + messageObject.error.message + " (" + messageObject.error.code + ")");
                ProtocolTest.completeTest();
                return;
            }

            ProtocolTest.log("PASS");
            test.callback(messageObject.result);
        });
    };

    function assert(name, actual, expected)
    {
        if (expected === actual)
            ProtocolTest.log("PASS: " + name + ".");
        else
            ProtocolTest.log("FAIL: " + name + ". Expected " + expected + " but got " + actual);
    };

};

window.addEventListener("DOMContentLoaded", function () {
    runTest();
}, false);

</script>
<style type="text/css">
      
    div {
        position: absolute;
        top: 0;
        left: 0;
    }
      
    .regular {
        width: 100px;
        height: 100px;
        background-color: black;
    }

    .composited {
        top: 25px;
        left: 25px;
        width: 50px;
        height: 50px;
        background-color: blue;
        -webkit-transform: translateZ(0);
    }
      
    .offset {
        left: 200px;
        -webkit-transform: translateZ(0);
    }

</style>
</head>
<body>

    <div class="regular"></div>

    <div class="composited">
        <div class="composited"></div>
    </div>

    <div class="regular offset">
        <div class="composited"></div>
    </div>

</body>
</html>