178 lines
4.6 KiB
HTML
178 lines
4.6 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, "opacity-container")) {
|
|
assert(
|
|
"<div id=\"opacity-container\"> is composited due to having an opacity style and a composited child",
|
|
compositingReasons.opacityWithCompositedDescendants,
|
|
true);
|
|
} else if (hasId(node, "child")) {
|
|
assert(
|
|
"<div id=\"child\"> is composited due to having \"backface-visibility: hidden\" and a 3D transform",
|
|
compositingReasons.transform3D && compositingReasons.backfaceVisibilityHidden,
|
|
true);
|
|
} else if (hasId(node, "canvas")) {
|
|
assert(
|
|
"<canvas id=\"canvas\"> is composited due to having a 3D transform",
|
|
compositingReasons.transform3D,
|
|
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) {
|
|
if (messageObject.hasOwnProperty("error")) {
|
|
ProtocolTest.log("FAIL: " + messageObject.error.message + " (" + messageObject.error.code + ")");
|
|
ProtocolTest.completeTest();
|
|
return;
|
|
}
|
|
|
|
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">
|
|
|
|
#opacity-container {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#child {
|
|
-webkit-backface-visibility: hidden;
|
|
-webkit-transform: translateZ(0);
|
|
}
|
|
|
|
#canvas {
|
|
transform: translate3D(0,0,0);
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="fixed"></div>
|
|
|
|
<div id="opacity-container">
|
|
<div id="child"></div>
|
|
</div>
|
|
|
|
<canvas id="canvas" width="65537" height="65537"></canvas>
|
|
|
|
</body>
|
|
</html>
|