164 lines
4.1 KiB
HTML
164 lines
4.1 KiB
HTML
<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>
|