| OLD | NEW |
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <script src="../../http/tests/inspector/inspector-test.js"></script> | 3 <script src="../../http/tests/inspector/inspector-test.js"></script> |
| 4 <script src="../../http/tests/inspector/layers-test.js"></script> | 4 <script src="../../http/tests/inspector/layers-test.js"></script> |
| 5 <script> | 5 <script> |
| 6 function test() | 6 function test() |
| 7 { | 7 { |
| 8 var contentRoot; | 8 var contentRoot; |
| 9 var layers; | 9 var layers; |
| 10 var rootOffsetXInPixels, rootOffsetYInPixels, rootHeightInPixels, rootWidthI
nPixels; | 10 var rootOffsetXInPixels, rootOffsetYInPixels, rootHeightInPixels, rootWidthI
nPixels; |
| 11 var canvas; | 11 var canvas; |
| 12 const ButtonByEventType = { mousemove: -1, mousedown: 0, mouseup: 0 }; | 12 const ButtonByEventType = { mousemove: -1, mousedown: 0, mouseup: 0 }; |
| 13 | 13 |
| 14 function initLayers() | 14 function initLayers() |
| 15 { | 15 { |
| 16 layerA = InspectorTest.findLayerByNodeIdAttribute("a"); | 16 layerA = InspectorTest.findLayerByNodeIdAttribute("a"); |
| 17 layerB = InspectorTest.findLayerByNodeIdAttribute("b"); | 17 layerB = InspectorTest.findLayerByNodeIdAttribute("b"); |
| 18 contentRoot = InspectorTest.layerTreeModel().layerTree().contentRoot(); | 18 contentRoot = InspectorTest.layerTreeModel().layerTree().contentRoot(); |
| 19 layers = [{layer: layerA, name: "layer a"}, {layer: layerB, name: "layer
b"}, {layer: contentRoot, name: "content root"}]; | 19 layers = [{layer: layerA, name: "layer a"}, {layer: layerB, name: "layer
b"}, {layer: contentRoot, name: "content root"}]; |
| 20 } | 20 } |
| 21 | 21 |
| 22 function initSizes() | 22 function initSizes() |
| 23 { | 23 { |
| 24 canvas = WebInspector.panels.layers._layers3DView._canvasElement; | 24 canvas = UI.panels.layers._layers3DView._canvasElement; |
| 25 var canvasWidth = canvas.offsetWidth; | 25 var canvasWidth = canvas.offsetWidth; |
| 26 var canvasHeight = canvas.offsetHeight; | 26 var canvasHeight = canvas.offsetHeight; |
| 27 var rootWidth = contentRoot.width(); | 27 var rootWidth = contentRoot.width(); |
| 28 var rootHeight = contentRoot.height(); | 28 var rootHeight = contentRoot.height(); |
| 29 var paddingX = canvasWidth * 0.1; | 29 var paddingX = canvasWidth * 0.1; |
| 30 var paddingY = canvasHeight * 0.1; | 30 var paddingY = canvasHeight * 0.1; |
| 31 var scaleX = rootWidth / (canvasWidth - paddingX); | 31 var scaleX = rootWidth / (canvasWidth - paddingX); |
| 32 var scaleY = rootHeight / (canvasHeight - paddingY); | 32 var scaleY = rootHeight / (canvasHeight - paddingY); |
| 33 var resultScale = Math.max(scaleX, scaleY); | 33 var resultScale = Math.max(scaleX, scaleY); |
| 34 var width = canvasWidth * resultScale; | 34 var width = canvasWidth * resultScale; |
| 35 var height = canvasHeight * resultScale; | 35 var height = canvasHeight * resultScale; |
| 36 var rootOffsetX = (width - rootWidth) / 2; | 36 var rootOffsetX = (width - rootWidth) / 2; |
| 37 var rootOffsetY = (height - rootHeight) / 2; | 37 var rootOffsetY = (height - rootHeight) / 2; |
| 38 rootOffsetXInPixels = rootOffsetX / width * canvasWidth; | 38 rootOffsetXInPixels = rootOffsetX / width * canvasWidth; |
| 39 rootOffsetYInPixels = rootOffsetY / height * canvasHeight; | 39 rootOffsetYInPixels = rootOffsetY / height * canvasHeight; |
| 40 rootHeightInPixels = rootHeight / height * canvasHeight; | 40 rootHeightInPixels = rootHeight / height * canvasHeight; |
| 41 rootWidthInPixels = rootHeight / width * canvasWidth; | 41 rootWidthInPixels = rootHeight / width * canvasWidth; |
| 42 } | 42 } |
| 43 | 43 |
| 44 function dispatchMouseEventOnCanvas(eventType, x, y) | 44 function dispatchMouseEventOnCanvas(eventType, x, y) |
| 45 { | 45 { |
| 46 InspectorTest.dispatchMouseEvent(eventType, ButtonByEventType[eventType]
, canvas, rootOffsetXInPixels + rootWidthInPixels * x, rootOffsetYInPixels + roo
tHeightInPixels * y); | 46 InspectorTest.dispatchMouseEvent(eventType, ButtonByEventType[eventType]
, canvas, rootOffsetXInPixels + rootWidthInPixels * x, rootOffsetYInPixels + roo
tHeightInPixels * y); |
| 47 } | 47 } |
| 48 | 48 |
| 49 function dumpStateForOutlineType(type) | 49 function dumpStateForOutlineType(type) |
| 50 { | 50 { |
| 51 var outlined = "none"; | 51 var outlined = "none"; |
| 52 WebInspector.panels.layers._update(); | 52 UI.panels.layers._update(); |
| 53 | 53 |
| 54 function checkLayer(layerInfo) | 54 function checkLayer(layerInfo) |
| 55 { | 55 { |
| 56 var l3dview = WebInspector.panels.layers._layers3DView; | 56 var l3dview = UI.panels.layers._layers3DView; |
| 57 if (l3dview._lastSelection[type] && layerInfo.layer.id() === l3dview
._lastSelection[type].layer().id()) | 57 if (l3dview._lastSelection[type] && layerInfo.layer.id() === l3dview
._lastSelection[type].layer().id()) |
| 58 outlined = layerInfo.name; | 58 outlined = layerInfo.name; |
| 59 } | 59 } |
| 60 | 60 |
| 61 layers.forEach(checkLayer); | 61 layers.forEach(checkLayer); |
| 62 InspectorTest.addResult(type + " layer: " + outlined); | 62 InspectorTest.addResult(type + " layer: " + outlined); |
| 63 } | 63 } |
| 64 | 64 |
| 65 function dumpOutlinedStateForLayers() | 65 function dumpOutlinedStateForLayers() |
| 66 { | 66 { |
| 67 InspectorTest.addResult("State of layers:"); | 67 InspectorTest.addResult("State of layers:"); |
| 68 dumpStateForOutlineType(WebInspector.Layers3DView.OutlineType.Hovered); | 68 dumpStateForOutlineType(LayerViewer.Layers3DView.OutlineType.Hovered); |
| 69 dumpStateForOutlineType(WebInspector.Layers3DView.OutlineType.Selected); | 69 dumpStateForOutlineType(LayerViewer.Layers3DView.OutlineType.Selected); |
| 70 } | 70 } |
| 71 | 71 |
| 72 function onGotLayers() | 72 function onGotLayers() |
| 73 { | 73 { |
| 74 initLayers(); | 74 initLayers(); |
| 75 initSizes(); | 75 initSizes(); |
| 76 | 76 |
| 77 InspectorTest.addResult("Initial state"); | 77 InspectorTest.addResult("Initial state"); |
| 78 dumpOutlinedStateForLayers(); | 78 dumpOutlinedStateForLayers(); |
| 79 | 79 |
| (...skipping 21 matching lines...) Expand all Loading... |
| 101 InspectorTest.requestLayers(onGotLayers); | 101 InspectorTest.requestLayers(onGotLayers); |
| 102 } | 102 } |
| 103 </script> | 103 </script> |
| 104 </head> | 104 </head> |
| 105 <body onload="runTest()" style="height:500px;width:500px;"> | 105 <body onload="runTest()" style="height:500px;width:500px;"> |
| 106 <div id="a" style="transform:translateZ(0px) translateY(60px) rotateZ(45deg);wid
th:300px;height:300px;margin-left:100px; border: 1px solid black;"> | 106 <div id="a" style="transform:translateZ(0px) translateY(60px) rotateZ(45deg);wid
th:300px;height:300px;margin-left:100px; border: 1px solid black;"> |
| 107 <div id="b" style="transform:translateX(0px) translateY(0px) translateZ(0px)
rotateX(45deg) rotateY(45deg);width:300px;height:300px; border: 1px solid black
;"></div> | 107 <div id="b" style="transform:translateX(0px) translateY(0px) translateZ(0px)
rotateX(45deg) rotateY(45deg);width:300px;height:300px; border: 1px solid black
;"></div> |
| 108 </div> | 108 </div> |
| 109 </body> | 109 </body> |
| 110 </html> | 110 </html> |
| OLD | NEW |