| OLD | NEW |
|---|
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <style> | |
| 4 .layer { | |
| 5 position: absolute; | |
| 6 -webkit-transform: translateZ(10px); | |
| 7 opacity: 0.8; | |
| 8 left: 20px; | |
| 9 top: 20px; | |
| 10 } | |
| 11 </style> | |
| 12 <script src="../http/tests/inspector/inspector-test.js"></script> | |
| 13 <script src="../http/tests/inspector/layers-test.js"></script> | |
| 14 <script> | |
| 15 function initialize_LayersPanelnMouseEvents() | |
| 16 { | |
| 17 | |
| 18 InspectorTest.findLayerTreeElement = function(layer) | |
| 19 { | |
| 20 var layerTree = WebInspector.panel("layers").sidebarTree; | |
| 21 var element = layerTree.getCachedTreeElement(layer); | |
| 22 element.reveal(); | |
| 23 return element.listItemElement; | |
| 24 } | |
| 25 | |
| 26 InspectorTest.find3DViewElement = function(layer) | |
| 27 { | |
| 28 var layers3DView = WebInspector.panel("layers")._layers3DView; | |
| 29 return layers3DView._elementForLayer(layer); | |
| 30 } | |
| 31 | |
| 32 InspectorTest.dispatchMouseEvent = function(eventType, button, element, offsetX,
offsetY) | |
| 33 { | |
| 34 var totalOffset = element.totalOffset(); | |
| 35 var scrollOffset = element.scrollOffset(); | |
| 36 var eventArguments = { | |
| 37 bubbles: true, | |
| 38 cancelable: true, | |
| 39 view: window, | |
| 40 screenX: totalOffset.left - scrollOffset.left + offsetX, | |
| 41 screenY: totalOffset.top - scrollOffset.top + offsetY, | |
| 42 clientX: totalOffset.left + offsetX, | |
| 43 clientY: totalOffset.top + offsetY, | |
| 44 button: button | |
| 45 }; | |
| 46 if (eventType === "mouseout") { | |
| 47 eventArguments.screenX = 0; | |
| 48 eventArguments.screenY = 0; | |
| 49 eventArguments.clientX = 0; | |
| 50 eventArguments.clientY = 0; | |
| 51 } | |
| 52 element.dispatchEvent(new MouseEvent(eventType, eventArguments)); | |
| 53 } | |
| 54 | |
| 55 InspectorTest.dispatchMouseEventToLayerTree = function(eventType, button, layer) | |
| 56 { | |
| 57 var element = InspectorTest.findLayerTreeElement(layer); | |
| 58 InspectorTest.assertTrue(!!element); | |
| 59 InspectorTest.dispatchMouseEvent(eventType, button, element, element.clientW
idth >> 1, element.clientHeight >> 1); | |
| 60 } | |
| 61 | |
| 62 InspectorTest.dispatchMouseEventTo3DView = function(eventType, button, layer) | |
| 63 { | |
| 64 // Caveat: this will blow if layers are transformed. We only take root layer
scale into account. | |
| 65 var offsetX = 0; | |
| 66 var offsetY = 0; | |
| 67 for (var currentLayer = layer; currentLayer; currentLayer = currentLayer.par
ent()) { | |
| 68 offsetX += currentLayer.offsetX(); | |
| 69 offsetY += currentLayer.offsetY(); | |
| 70 } | |
| 71 var layer3DView = WebInspector.panel("layers")._layers3DView; | |
| 72 var rootElement = layer3DView._elementForLayer(InspectorTest._layerTreeModel
.contentRoot()); | |
| 73 var screenOffsetX = Math.round(layer3DView._scale * offsetX) + 2; | |
| 74 var screenOffsetY = Math.round(layer3DView._scale * offsetY) + 2; | |
| 75 InspectorTest.dispatchMouseEvent(eventType, button, rootElement, screenOffse
tX, screenOffsetY); | |
| 76 } | |
| 77 | |
| 78 InspectorTest.dumpSelectedStyles = function(message, element) | |
| 79 { | |
| 80 var classes = []; | |
| 81 if (element.classList.contains("selected")) | |
| 82 classes.push("selected"); | |
| 83 if (element.classList.contains("hovered")) | |
| 84 classes.push("hovered"); | |
| 85 | |
| 86 InspectorTest.addResult(message + ": " + classes.join(", ")); | |
| 87 } | |
| 88 | |
| 89 } | |
| 90 | |
| 91 function test() | |
| 92 { | |
| 93 function step1() | |
| 94 { | |
| 95 var layerB1 = InspectorTest.findLayerByNodeIdAttribute("b1"); | |
| 96 var treeElementB1 = InspectorTest.findLayerTreeElement(layerB1); | |
| 97 var viewElementB1 = InspectorTest.find3DViewElement(layerB1); | |
| 98 | |
| 99 var layerB3 = InspectorTest.findLayerByNodeIdAttribute("b3"); | |
| 100 var treeElementB3 = InspectorTest.findLayerTreeElement(layerB3); | |
| 101 var viewElementB3 = InspectorTest.find3DViewElement(layerB3); | |
| 102 | |
| 103 function dumpElementSelectionState() | |
| 104 { | |
| 105 InspectorTest.dumpSelectedStyles("Layer b1 in tree", treeElementB1); | |
| 106 InspectorTest.dumpSelectedStyles("Layer b3 in tree", treeElementB3); | |
| 107 InspectorTest.dumpSelectedStyles("Layer b1 in view", viewElementB1); | |
| 108 InspectorTest.dumpSelectedStyles("Layer b3 in view", viewElementB3); | |
| 109 } | |
| 110 InspectorTest.addResult("Hovering b1 in tree"); | |
| 111 InspectorTest.dispatchMouseEventToLayerTree("mousemove", -1, layerB1); | |
| 112 dumpElementSelectionState(); | |
| 113 | |
| 114 InspectorTest.addResult("Hovering b3 in tree"); | |
| 115 InspectorTest.dispatchMouseEventToLayerTree("mousemove", -1, layerB3); | |
| 116 dumpElementSelectionState(); | |
| 117 | |
| 118 InspectorTest.addResult("Hovering away from tree"); | |
| 119 InspectorTest.dispatchMouseEventToLayerTree("mouseout", -1, layerB3); | |
| 120 dumpElementSelectionState(); | |
| 121 | |
| 122 InspectorTest.addResult("Selecting b1 in tree"); | |
| 123 InspectorTest.dispatchMouseEventToLayerTree("mousedown", 0, layerB1); | |
| 124 dumpElementSelectionState(); | |
| 125 | |
| 126 InspectorTest.addResult("Selecting b3 in tree"); | |
| 127 InspectorTest.dispatchMouseEventToLayerTree("mousedown", 0, layerB3); | |
| 128 dumpElementSelectionState(); | |
| 129 | |
| 130 InspectorTest.addResult("Hovering b1 in view"); | |
| 131 InspectorTest.dispatchMouseEventTo3DView("mousemove", -1, layerB1); | |
| 132 dumpElementSelectionState(); | |
| 133 | |
| 134 InspectorTest.addResult("Hovering b3 in view"); | |
| 135 InspectorTest.dispatchMouseEventTo3DView("mousemove", -1, layerB3); | |
| 136 dumpElementSelectionState(); | |
| 137 | |
| 138 InspectorTest.addResult("Hovering away from view"); | |
| 139 InspectorTest.dispatchMouseEventTo3DView("mouseout", -1, layerB3); | |
| 140 dumpElementSelectionState(); | |
| 141 | |
| 142 InspectorTest.addResult("Selecting b1 in view"); | |
| 143 InspectorTest.dispatchMouseEventTo3DView("click", 0, layerB1); | |
| 144 dumpElementSelectionState(); | |
| 145 | |
| 146 InspectorTest.addResult("Selecting b3 in view"); | |
| 147 InspectorTest.dispatchMouseEventTo3DView("click", 1, layerB3); | |
| 148 dumpElementSelectionState(); | |
| 149 | |
| 150 InspectorTest.completeTest(); | |
| 151 } | |
| 152 WebInspector.showPanel("layers"); | |
| 153 InspectorTest.requestLayers(step1); | |
| 154 | |
| 155 } | |
| 156 </script> | |
| 157 | |
| 158 <body onload="runTest()"> | |
| 159 <div id="a" style="width: 200px; height: 200px" class="layer"> | |
| 160 <div class="layer" id="b1" style="width: 150px; height: 100px"></div> | |
| 161 <div id="b2" class="layer" style="width: 140px; height: 110px"> | |
| 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> | |
| 165 </div> | |
| 166 </body> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 173763002:
DevTools: hide page overlay layers in LayerTreeAgent (Closed)
Base URL: svn://svn.chromium.org/blink/trunk