<!doctype html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test()
{
    let suite = InspectorTest.createAsyncSuite("LayerTreeManager");

    suite.addTestCase({
        name: "LayerTreeManager.layersForNode.root",
        description: "Calling the LayerTreeManager#layersForNode method with the root node should return the full layer list.",
        test(resolve, reject) {
            WI.domTreeManager.requestDocument((node) => {
                WI.layerTreeManager.layersForNode(node, (layers) => {
                    InspectorTest.expectEqual(layers.length, 5, "Returned array should include all layers.");
                    InspectorTest.expectThat(layers.every((layer) => layer instanceof WI.Layer), "Array elements should be Layer instances.");
                    resolve();
                });
            });
        }
    });

    suite.addTestCase({
        name: "LayerTreeManager.layerTreeMutations.overlappingNodeIds",
        description: "The LayerTreeManager#layerTreeMutations method should provide a diff purely based on layerIds, not based on nodeIds.",
        test(resolve, reject) {
            let previousLayers = [
                {layerId: "1", nodeId: 1},
                {layerId: "2", nodeId: 1, isGeneratedContent: true, pseudoElementId: "10"},
                {layerId: "3", nodeId: 1, isReflection: true},
                {layerId: "4", nodeId: 2}
            ];

            let newLayers = [
                {layerId: "4", nodeId: 2},
                {layerId: "5", nodeId: 1},
                {layerId: "6", nodeId: 3}
            ];

            let {preserved, additions, removals} = WI.layerTreeManager.layerTreeMutations(previousLayers, newLayers);
            InspectorTest.expectShallowEqual(preserved, previousLayers.slice(3), "Preserved layers should be correct.");
            InspectorTest.expectShallowEqual(additions, newLayers.slice(1), "Added layers should be correct.");
            InspectorTest.expectShallowEqual(removals, previousLayers.slice(0, 3), "Removed layers should be correct.");
            resolve();
        }
    });

    suite.runTestCasesAndFinish();
}
</script>
<style>
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 onload="runTest()">
<p>Tests for LayerTreeManager.</p>
<div class="regular"></div>
<div class="composited">
    <div class="composited"></div>
</div>
<div class="regular offset">
    <div class="composited"></div>
</div>
</body>
</html>