| 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 transform: translateZ(10px); | 6 transform: translateZ(10px); |
| 7 opacity: 0.8; | 7 opacity: 0.8; |
| 8 left: 20px; | 8 left: 20px; |
| 9 top: 20px; | 9 top: 20px; |
| 10 background-color: #eee; | 10 background-color: #eee; |
| 11 border-color: black; | 11 border-color: black; |
| 12 } | 12 } |
| 13 </style> | 13 </style> |
| 14 <script src="../../http/tests/inspector/inspector-test.js"></script> | 14 <script src="../../http/tests/inspector/inspector-test.js"></script> |
| 15 <script src="../../http/tests/inspector/layers-test.js"></script> | 15 <script src="../../http/tests/inspector/layers-test.js"></script> |
| 16 <script> | 16 <script> |
| 17 function initialize_LayersPanelnMouseEvents() | 17 function initialize_LayersPanelnMouseEvents() |
| 18 { | 18 { |
| 19 | 19 |
| 20 InspectorTest.findLayerTreeElement = function(layer) | 20 InspectorTest.findLayerTreeElement = function(layer) |
| 21 { | 21 { |
| 22 var layerTree = WebInspector.panels.layers._layerTreeOutline._treeOutline; | 22 var layerTree = UI.panels.layers._layerTreeOutline._treeOutline; |
| 23 var element = layer[WebInspector.LayerTreeElement._symbol]; | 23 var element = layer[LayerViewer.LayerTreeElement._symbol]; |
| 24 element.reveal(); | 24 element.reveal(); |
| 25 return element.listItemElement; | 25 return element.listItemElement; |
| 26 } | 26 } |
| 27 | 27 |
| 28 InspectorTest.dispatchMouseEventToLayerTree = function(eventType, button, layer) | 28 InspectorTest.dispatchMouseEventToLayerTree = function(eventType, button, layer) |
| 29 { | 29 { |
| 30 var element = InspectorTest.findLayerTreeElement(layer); | 30 var element = InspectorTest.findLayerTreeElement(layer); |
| 31 InspectorTest.assertTrue(!!element); | 31 InspectorTest.assertTrue(!!element); |
| 32 InspectorTest.dispatchMouseEvent(eventType, button, element, element.clientW
idth >> 1, element.clientHeight >> 1); | 32 InspectorTest.dispatchMouseEvent(eventType, button, element, element.clientW
idth >> 1, element.clientHeight >> 1); |
| 33 } | 33 } |
| 34 | 34 |
| 35 InspectorTest.dumpSelectedStyles = function(message, element) | 35 InspectorTest.dumpSelectedStyles = function(message, element) |
| 36 { | 36 { |
| 37 var classes = []; | 37 var classes = []; |
| 38 if (element.classList.contains("selected")) | 38 if (element.classList.contains("selected")) |
| 39 classes.push("selected"); | 39 classes.push("selected"); |
| 40 if (element.classList.contains("hovered")) | 40 if (element.classList.contains("hovered")) |
| 41 classes.push("hovered"); | 41 classes.push("hovered"); |
| 42 | 42 |
| 43 InspectorTest.addResult(message + ": " + classes.join(", ")); | 43 InspectorTest.addResult(message + ": " + classes.join(", ")); |
| 44 } | 44 } |
| 45 | 45 |
| 46 } | 46 } |
| 47 | 47 |
| 48 function test() | 48 function test() |
| 49 { | 49 { |
| 50 function step1() | 50 function step1() |
| 51 { | 51 { |
| 52 WebInspector.panels.layers._update(); | 52 UI.panels.layers._update(); |
| 53 var layerB1 = InspectorTest.findLayerByNodeIdAttribute("b1"); | 53 var layerB1 = InspectorTest.findLayerByNodeIdAttribute("b1"); |
| 54 var treeElementB1 = InspectorTest.findLayerTreeElement(layerB1); | 54 var treeElementB1 = InspectorTest.findLayerTreeElement(layerB1); |
| 55 | 55 |
| 56 var layerB3 = InspectorTest.findLayerByNodeIdAttribute("b3"); | 56 var layerB3 = InspectorTest.findLayerByNodeIdAttribute("b3"); |
| 57 var treeElementB3 = InspectorTest.findLayerTreeElement(layerB3); | 57 var treeElementB3 = InspectorTest.findLayerTreeElement(layerB3); |
| 58 | 58 |
| 59 function dumpElementSelectionState() | 59 function dumpElementSelectionState() |
| 60 { | 60 { |
| 61 WebInspector.panels.layers._update(); | 61 UI.panels.layers._update(); |
| 62 InspectorTest.dumpSelectedStyles("Layer b1 in tree", treeElementB1); | 62 InspectorTest.dumpSelectedStyles("Layer b1 in tree", treeElementB1); |
| 63 InspectorTest.dumpSelectedStyles("Layer b3 in tree", treeElementB3); | 63 InspectorTest.dumpSelectedStyles("Layer b3 in tree", treeElementB3); |
| 64 } | 64 } |
| 65 InspectorTest.addResult("Hovering b1 in tree"); | 65 InspectorTest.addResult("Hovering b1 in tree"); |
| 66 InspectorTest.dispatchMouseEventToLayerTree("mousemove", -1, layerB1); | 66 InspectorTest.dispatchMouseEventToLayerTree("mousemove", -1, layerB1); |
| 67 dumpElementSelectionState(); | 67 dumpElementSelectionState(); |
| 68 | 68 |
| 69 InspectorTest.addResult("Hovering b3 in tree"); | 69 InspectorTest.addResult("Hovering b3 in tree"); |
| 70 InspectorTest.dispatchMouseEventToLayerTree("mousemove", -1, layerB3); | 70 InspectorTest.dispatchMouseEventToLayerTree("mousemove", -1, layerB3); |
| 71 dumpElementSelectionState(); | 71 dumpElementSelectionState(); |
| (...skipping 18 matching lines...) Expand all Loading... |
| 90 | 90 |
| 91 <body onload="runTest()"> | 91 <body onload="runTest()"> |
| 92 <div id="a" style="width: 200px; height: 200px" class="layer"> | 92 <div id="a" style="width: 200px; height: 200px" class="layer"> |
| 93 <div class="layer" id="b1" style="width: 150px; height: 100px"></div> | 93 <div class="layer" id="b1" style="width: 150px; height: 100px"></div> |
| 94 <div id="b2" class="layer" style="width: 140px; height: 110px"> | 94 <div id="b2" class="layer" style="width: 140px; height: 110px"> |
| 95 <div id="b3" class="layer" style="width: 140px; height: 110px;"></div> | 95 <div id="b3" class="layer" style="width: 140px; height: 110px;"></div> |
| 96 <div id="c" class="layer" style="width: 100px; height: 90px"></div> | 96 <div id="c" class="layer" style="width: 100px; height: 90px"></div> |
| 97 </div> | 97 </div> |
| 98 </div> | 98 </div> |
| 99 </body> | 99 </body> |
| OLD | NEW |