OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <style> | 3 <style> |
4 .layer { | 4 .layer { |
5 position: absolute; | 5 position: absolute; |
6 -webkit-transform: translateZ(10px); | 6 -webkit-transform: translateZ(10px); |
7 opacity: 0.8; | 7 opacity: 0.8; |
8 left: 20px; | 8 left: 20px; |
9 top: 20px; | 9 top: 20px; |
10 } | 10 } |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
55 InspectorTest.dispatchMouseEventToLayerTree = function(eventType, button, layer) | 55 InspectorTest.dispatchMouseEventToLayerTree = function(eventType, button, layer) |
56 { | 56 { |
57 var element = InspectorTest.findLayerTreeElement(layer); | 57 var element = InspectorTest.findLayerTreeElement(layer); |
58 InspectorTest.assertTrue(!!element); | 58 InspectorTest.assertTrue(!!element); |
59 InspectorTest.dispatchMouseEvent(eventType, button, element, element.clientW
idth >> 1, element.clientHeight >> 1); | 59 InspectorTest.dispatchMouseEvent(eventType, button, element, element.clientW
idth >> 1, element.clientHeight >> 1); |
60 } | 60 } |
61 | 61 |
62 InspectorTest.dispatchMouseEventTo3DView = function(eventType, button, layer) | 62 InspectorTest.dispatchMouseEventTo3DView = function(eventType, button, layer) |
63 { | 63 { |
64 // Caveat: this will blow if layers are transformed. We only take root layer
scale into account. | 64 // Caveat: this will blow if layers are transformed. We only take root layer
scale into account. |
65 var offsetX = 0; | 65 var layer3DView = WebInspector.panel("layers")._layers3DView; |
66 var offsetY = 0; | 66 const borderWidth = 1; |
67 for (var currentLayer = layer; currentLayer; currentLayer = currentLayer.par
ent()) { | 67 var offsetX = borderWidth; |
68 offsetX += currentLayer.offsetX(); | 68 var offsetY = borderWidth; |
69 offsetY += currentLayer.offsetY(); | 69 for (var currentLayer = layer; currentLayer && currentLayer.nodeId(); curren
tLayer = currentLayer.parent()) { |
| 70 offsetX += Math.round(layer3DView._scale * currentLayer.offsetX()) + bo
rderWidth; |
| 71 offsetY += Math.round(layer3DView._scale * currentLayer.offsetY()) + bo
rderWidth; |
70 } | 72 } |
71 var layer3DView = WebInspector.panel("layers")._layers3DView; | |
72 var rootElement = layer3DView._elementForLayer(InspectorTest._layerTreeModel
.contentRoot()); | 73 var rootElement = layer3DView._elementForLayer(InspectorTest._layerTreeModel
.contentRoot()); |
73 var screenOffsetX = Math.round(layer3DView._scale * offsetX) + 2; | 74 InspectorTest.dispatchMouseEvent(eventType, button, rootElement, offsetX, of
fsetY); |
74 var screenOffsetY = Math.round(layer3DView._scale * offsetY) + 2; | |
75 InspectorTest.dispatchMouseEvent(eventType, button, rootElement, screenOffse
tX, screenOffsetY); | |
76 } | 75 } |
77 | 76 |
78 InspectorTest.dumpSelectedStyles = function(message, element) | 77 InspectorTest.dumpSelectedStyles = function(message, element) |
79 { | 78 { |
80 var classes = []; | 79 var classes = []; |
81 if (element.classList.contains("selected")) | 80 if (element.classList.contains("selected")) |
82 classes.push("selected"); | 81 classes.push("selected"); |
83 if (element.classList.contains("hovered")) | 82 if (element.classList.contains("hovered")) |
84 classes.push("hovered"); | 83 classes.push("hovered"); |
85 | 84 |
(...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
152 WebInspector.showPanel("layers"); | 151 WebInspector.showPanel("layers"); |
153 InspectorTest.requestLayers(step1); | 152 InspectorTest.requestLayers(step1); |
154 | 153 |
155 } | 154 } |
156 </script> | 155 </script> |
157 | 156 |
158 <body onload="runTest()"> | 157 <body onload="runTest()"> |
159 <div id="a" style="width: 200px; height: 200px" class="layer"> | 158 <div id="a" style="width: 200px; height: 200px" class="layer"> |
160 <div class="layer" id="b1" style="width: 150px; height: 100px"></div> | 159 <div class="layer" id="b1" style="width: 150px; height: 100px"></div> |
161 <div id="b2" class="layer" style="width: 140px; height: 110px"> | 160 <div id="b2" class="layer" style="width: 140px; height: 110px"> |
| 161 <div id="b3" class="layer" style="width: 140px; height: 110px;"></div> |
162 <div id="c" class="layer" style="width: 100px; height: 90px"></div> | 162 <div id="c" class="layer" style="width: 100px; height: 90px"></div> |
163 <div id="b3" class="layer" style="width: 140px; height: 110px;"></div> | |
164 </div> | 163 </div> |
165 </div> | 164 </div> |
166 </body> | 165 </body> |
OLD | NEW |