third_party/WebKit/LayoutTests/inspector/layers/layers-panel-mouse-events.html

   1 <html>
   2 <head>
   3 <style>
   4 .layer {
   5     position: absolute;
   6     transform: translateZ(10px);
   7     opacity: 0.8;
   8     left: 20px;
   9     top: 20px;
  10     background-color: #eee;
  11     border-color: black;
  12 }
  13 </style>
  14 <script src="../../http/tests/inspector/inspector-test.js"></script>
  15 <script src="../../http/tests/inspector/layers-test.js"></script>
  16 <script>
  17 function initialize_LayersPanelnMouseEvents()
  18 {
  19
  20 InspectorTest.findLayerTreeElement = function(layer)
  21 {
  22     var layerTree = WebInspector.panels.layers._layerTreeOutline._treeOutline;
  23     var element = layer[WebInspector.LayerTreeElement._symbol];
  24     element.reveal();
  25     return element.listItemElement;
  26 }
  27
  28 InspectorTest.dispatchMouseEventToLayerTree = function(eventType, button, layer)
  29 {
  30     var element = InspectorTest.findLayerTreeElement(layer);
  31     InspectorTest.assertTrue(!!element);
  32     InspectorTest.dispatchMouseEvent(eventType, button, element, element.clientWidth >> 1, element.clientHeight >> 1);
  33 }
  34
  35 InspectorTest.dumpSelectedStyles = function(message, element)
  36 {
  37     var classes = [];
  38     if (element.classList.contains("selected"))
  39         classes.push("selected");
  40     if (element.classList.contains("hovered"))
  41         classes.push("hovered");
  42
  43     InspectorTest.addResult(message + ": " + classes.join(", "));
  44 }
  45
  46 }
  47
  48 function test()
  49 {
  50     function step1()
  51     {
  52         var layerB1 = InspectorTest.findLayerByNodeIdAttribute("b1");
  53         var treeElementB1 = InspectorTest.findLayerTreeElement(layerB1);
  54
  55         var layerB3 = InspectorTest.findLayerByNodeIdAttribute("b3");
  56         var treeElementB3 = InspectorTest.findLayerTreeElement(layerB3);
  57
  58         function dumpElementSelectionState()
  59         {
  60             InspectorTest.dumpSelectedStyles("Layer b1 in tree", treeElementB1);
  61             InspectorTest.dumpSelectedStyles("Layer b3 in tree", treeElementB3);
  62         }
  63         InspectorTest.addResult("Hovering b1 in tree");
  64         InspectorTest.dispatchMouseEventToLayerTree("mousemove", -1, layerB1);
  65         dumpElementSelectionState();
  66
  67         InspectorTest.addResult("Hovering b3 in tree");
  68         InspectorTest.dispatchMouseEventToLayerTree("mousemove", -1, layerB3);
  69         dumpElementSelectionState();
  70
  71         InspectorTest.addResult("Hovering away from tree");
  72         InspectorTest.dispatchMouseEventToLayerTree("mouseout", -1, layerB3);
  73         dumpElementSelectionState();
  74
  75         InspectorTest.addResult("Selecting b1 in tree");
  76         InspectorTest.dispatchMouseEventToLayerTree("mousedown", 0, layerB1);
  77         dumpElementSelectionState();
  78
  79         InspectorTest.addResult("Selecting b3 in tree");
  80         InspectorTest.dispatchMouseEventToLayerTree("mousedown", 0, layerB3);
  81         dumpElementSelectionState();
  82
  83         InspectorTest.completeTest();
  84     }
  85     InspectorTest.requestLayers(InspectorTest.safeWrap(step1));
  86 }
  87 </script>
  88
  89 <body onload="runTest()">
  90 <div id="a" style="width: 200px; height: 200px" class="layer">
  91   <div class="layer" id="b1" style="width: 150px; height: 100px"></div>
  92   <div id="b2" class="layer" style="width: 140px; height: 110px">
  93     <div id="b3" class="layer" style="width: 140px; height: 110px;"></div>
  94     <div id="c" class="layer" style="width: 100px; height: 90px"></div>
  95   </div>
  96 </div>
  97 </body>