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

function test()
{

    var nodes = [];
 
    InspectorProtocol.eventHandler["DOM.setChildNodes"] = setChildNodes;

    enableLayerTreeAgent();
    
    function enableLayerTreeAgent(result)
    {
        step({
            name: "Enable the LayerTree agent",
            command: "LayerTree.enable",
            parameters: {},
            callback: getDocument
        });
    };

    function getDocument()
    {
        // We must first get the document so that later on we may get sensible nodeIds.
        step({
            name: "Get the Document",
            command: "DOM.getDocument",
            parameters: {},
            callback: getLayerTree
        });
    };

    function getLayerTree(result)
    {
        step({
            name: "Get the layer tree",
            command: "LayerTree.layersForNode",
            parameters: {"nodeId": result.root.nodeId},
            callback: gotLayerTree
        });
    };

    function gotLayerTree(result)
    {
        logTestName("Check layers' reasons for compositing")
        
        var layers = result.layers;

        var nodesById = {};
        nodes.forEach(function(node) {
            nodesById[node.nodeId] = node;
        });

        var count = 0;
        
        function hasId(node, id) {
            return node && node.attributes && node.attributes[0] === "id" && node.attributes[1] === id;
        }
        
        function dumpReasons(layer, compositingReasons) {
            var node = nodesById[layer.nodeId];

            if (hasId(node, "blending")) {
                assert(
                    "<div id=\"blending\"> is composited due having CSS blending applied and composited descendants",
                    compositingReasons.blendingWithCompositedDescendants,
                    true);
            } else if (hasId(node, "isolating")) {
                assert(
                    "<div id=\"isolating\"> is composition due to isolating compositing descendants having CSS blending applied",
                    compositingReasons.isolatesCompositedBlendingDescendants,
                    true);
            }

            if (++count === layers.length)
                ProtocolTest.completeTest();
        };

        layers.forEach(function (layer) {
            runCommand({
                command: "LayerTree.reasonsForCompositingLayer",
                parameters: {"layerId": layer.layerId},
                callback: function(result) {
                    dumpReasons(layer, result.compositingReasons);
                }
            });
        });
    };

    function setChildNodes (messageObject) {
        messageObject.params.nodes.forEach(function (node) {
            nodes.push(node);
        })
    };

    function step(test)
    {
        if (test.callback)
            logTestName(test.name);
        runCommand(test);
    };

    function logTestName(name)
    {
        ProtocolTest.log("\n=== " + name + " ===\n");
    };

    function runCommand(command)
    {
        InspectorProtocol.sendCommand(command.command, command.parameters, function(messageObject) {
            InspectorProtocol.checkForError(messageObject);

            if (command.name)
                ProtocolTest.log("PASS");

            if (command.callback)
                command.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">
      
    #isolating {
        isolation: isolate;
    }

    #blending {
        mix-blend-mode: difference;
    }

    #composited {
        -webkit-transform: translateZ(0);
    }

</style>
</head>
<body>
    <div id="isolating">
        <div id="blending">
            <div id="composited"></div>
        </div>
    </div>
</body>
</html>