| <html> |
| <head> |
| <script src="../../http/tests/inspector/inspector-test.js"></script> |
| <script src="../../http/tests/inspector/layers-test.js"></script> |
| <script> |
| function test() |
| { |
| var contentRoot; |
| var layers; |
| var rootOffsetXInPixels, rootOffsetYInPixels, rootHeightInPixels, rootWidthInPixels; |
| var canvas; |
| const ButtonByEventType = { mousemove: -1, mousedown: 0, mouseup: 0 }; |
| |
| function initLayers() |
| { |
| layerA = InspectorTest.findLayerByNodeIdAttribute("a"); |
| layerB = InspectorTest.findLayerByNodeIdAttribute("b"); |
| contentRoot = InspectorTest.layerTreeModel().layerTree().contentRoot(); |
| layers = [{layer: layerA, name: "layer a"}, {layer: layerB, name: "layer b"}, {layer: contentRoot, name: "content root"}]; |
| } |
| |
| function initSizes() |
| { |
| canvas = WebInspector.panels.layers._layers3DView._canvasElement; |
| var canvasWidth = canvas.offsetWidth; |
| var canvasHeight = canvas.offsetHeight; |
| var rootWidth = contentRoot.width(); |
| var rootHeight = contentRoot.height(); |
| var paddingX = canvasWidth * 0.1; |
| var paddingY = canvasHeight * 0.1; |
| var scaleX = rootWidth / (canvasWidth - paddingX); |
| var scaleY = rootHeight / (canvasHeight - paddingY); |
| var resultScale = Math.max(scaleX, scaleY); |
| var width = canvasWidth * resultScale; |
| var height = canvasHeight * resultScale; |
| var rootOffsetX = (width - rootWidth) / 2; |
| var rootOffsetY = (height - rootHeight) / 2; |
| rootOffsetXInPixels = rootOffsetX / width * canvasWidth; |
| rootOffsetYInPixels = rootOffsetY / height * canvasHeight; |
| rootHeightInPixels = rootHeight / height * canvasHeight; |
| rootWidthInPixels = rootHeight / width * canvasWidth; |
| } |
| |
| function dispatchMouseEventOnCanvas(eventType, x, y) |
| { |
| InspectorTest.dispatchMouseEvent(eventType, ButtonByEventType[eventType], canvas, rootOffsetXInPixels + rootWidthInPixels * x, rootOffsetYInPixels + rootHeightInPixels * y); |
| } |
| |
| function dumpStateForOutlineType(type) |
| { |
| var outlined = "none"; |
| WebInspector.panels.layers._update(); |
| |
| function checkLayer(layerInfo) |
| { |
| var l3dview = WebInspector.panels.layers._layers3DView; |
| if (l3dview._lastSelection[type] && layerInfo.layer.id() === l3dview._lastSelection[type].layer().id()) |
| outlined = layerInfo.name; |
| } |
| |
| layers.forEach(checkLayer); |
| InspectorTest.addResult(type + " layer: " + outlined); |
| } |
| |
| function dumpOutlinedStateForLayers() |
| { |
| InspectorTest.addResult("State of layers:"); |
| dumpStateForOutlineType(WebInspector.Layers3DView.OutlineType.Hovered); |
| dumpStateForOutlineType(WebInspector.Layers3DView.OutlineType.Selected); |
| } |
| |
| function onGotLayers() |
| { |
| initLayers(); |
| initSizes(); |
| |
| InspectorTest.addResult("Initial state"); |
| dumpOutlinedStateForLayers(); |
| |
| InspectorTest.addResult("\nHovering content root"); |
| dispatchMouseEventOnCanvas("mousemove", 0.1237135833164431, 0.11536508236291274); |
| dumpOutlinedStateForLayers(); |
| |
| InspectorTest.addResult("\nSelecting layer b"); |
| dispatchMouseEventOnCanvas("mousedown", 0.5, 0.5); |
| dispatchMouseEventOnCanvas("mouseup", 0.5, 0.5); |
| dumpOutlinedStateForLayers(); |
| |
| InspectorTest.addResult("\nHovering layer a"); |
| dispatchMouseEventOnCanvas("mousemove", 0.4, 0.2); |
| dumpOutlinedStateForLayers(); |
| |
| InspectorTest.addResult("\nSelecting content root"); |
| dispatchMouseEventOnCanvas("mousedown", 0.5, 0.001); |
| dispatchMouseEventOnCanvas("mouseup", 0.5, 0.001); |
| dumpOutlinedStateForLayers(); |
| |
| InspectorTest.completeTest(); |
| } |
| |
| InspectorTest.requestLayers(onGotLayers); |
| } |
| </script> |
| </head> |
| <body onload="runTest()" style="height:500px;width:500px;"> |
| <div id="a" style="transform:translateZ(0px) translateY(60px) rotateZ(45deg);width:300px;height:300px;margin-left:100px; border: 1px solid black;"> |
| <div id="b" style="transform:translateX(0px) translateY(0px) translateZ(0px) rotateX(45deg) rotateY(45deg);width:300px;height:300px; border: 1px solid black;"></div> |
| </div> |
| </body> |
| </html> |
