| 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 |