| <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) |
| { |
| var beforeLayers = []; |
| var afterLayers = []; |
| result.layers.forEach(function (layer) { |
| if (!layer.isGeneratedContent) |
| return; |
| |
| if (layer.pseudoElement === "before") |
| beforeLayers.push(layer); |
| if (layer.pseudoElement === "after") |
| afterLayers.push(layer); |
| }); |
| |
| logTestName("Check layers"); |
| |
| assert("Expected number of ::before layers", beforeLayers.length, 1); |
| assert("The sole ::before layer has a pseudo element", beforeLayers[0].pseudoElementId !== "", true); |
| |
| assert("Expected number of ::after layers", afterLayers.length, 2); |
| assert("The first ::after layer has a pseudo element", afterLayers[0].pseudoElementId !== "", true); |
| assert("The second ::after layer has a pseudo element", afterLayers[1].pseudoElementId !== "", true); |
| assert("The second ::after layer is a reflection", afterLayers[1].isReflection, true); |
| assert("The two ::after layers have the same node id", afterLayers[0].nodeId, afterLayers[1].nodeId); |
| assert("The two ::after layers have the same pseudo element id", afterLayers[0].pseudoElementId, afterLayers[1].pseudoElementId); |
| |
| assert("The non-reflection generated generated layers have the same node id", beforeLayers[0].nodeId, afterLayers[0].nodeId); |
| assert("The non-reflection generated layers have different pseudo element ids", beforeLayers[0].pseudoElementId !== afterLayers[0].pseudoElementId, true); |
| |
| var node; |
| var nodeId = beforeLayers[0].nodeId; |
| for (var i = 0, count = nodes.length; i < count; ++i) { |
| if (nodes[i].nodeId === nodeId) { |
| node = nodes[i]; |
| break; |
| } |
| } |
| |
| logTestName("Check generating node"); |
| |
| assert("Generating node was found", !!node, true); |
| assert("Generating node has expected localName", node.localName, "div"); |
| assert("Generating node has id", node.attributes[0], "id"); |
| assert("Generating node has expected id", node.attributes[1], "generator"); |
| |
| ProtocolTest.completeTest(); |
| }; |
| |
| function setChildNodes (messageObject) { |
| nodes = messageObject.params.nodes; |
| }; |
| |
| 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"> |
| |
| #generator::before, |
| #generator::after { |
| position: absolute; |
| width: 100px; |
| height: 100px; |
| background-color: black; |
| -webkit-transform: translateZ(0); |
| content: ""; |
| } |
| |
| #generator::after { |
| -webkit-box-reflect:below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div id="generator"></div> |
| |
| </body> |
| </html> |
