third_party/WebKit/LayoutTests/inspector/elements/inspect-pointer-events-none.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/elements-test.js"></script>
   5 <style>
   6 div {
   7     margin: 0;
   8     padding: 0;
   9     border: none;
  10 }
  11 #outer {
  12     position: absolute;
  13     top: 0;
  14     left: 0;
  15     bottom: 0;
  16     right: 0;
  17 }
  18 #inner {
  19     pointer-events: none;
  20     position: absolute;
  21     top: 10px;
  22     left: 10px;
  23     bottom: 10px;
  24     right: 10px;
  25 }
  26 </style>
  27 <script>
  28
  29 function clickInner(withShift)
  30 {
  31     var target = document.getElementById("inner");
  32     var rect = target.getBoundingClientRect();
  33     // Simulate the mouse click over the target to trigger an event dispatch.
  34     if (window.eventSender) {
  35         window.eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height / 2, withShift ? "shiftKey" : "");
  36         window.eventSender.mouseDown();
  37         window.eventSender.mouseUp();
  38     }
  39 }
  40
  41 function test()
  42 {
  43     function selectedNodeId()
  44     {
  45         var selectedElement = InspectorTest.firstElementsTreeOutline().selectedTreeElement;
  46         if (!selectedElement)
  47             return "<no selected node>";
  48         return selectedElement.node().getAttribute("id");
  49     }
  50
  51     function expectSelectedNode(expectedId)
  52     {
  53         var id = selectedNodeId();
  54         if (id === expectedId)
  55             InspectorTest.addResult("PASS: selected node with id '" + id + "'");
  56         else
  57             InspectorTest.addResult("FAIL: unexpected selection " + id);
  58     }
  59
  60     function step1()
  61     {
  62         InspectorTest.domModel.setInspectMode(DOMAgent.InspectMode.SearchForNode, step2);
  63     }
  64
  65     function step2()
  66     {
  67         InspectorTest.firstElementsTreeOutline().addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, step3);
  68         InspectorTest.evaluateInPage("clickInner(true)");
  69     }
  70
  71     function step3()
  72     {
  73         InspectorTest.firstElementsTreeOutline().removeEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, step3);
  74         expectSelectedNode("inner");
  75         InspectorTest.domModel.setInspectMode(DOMAgent.InspectMode.SearchForNode, step4);
  76     }
  77
  78     function step4()
  79     {
  80         InspectorTest.firstElementsTreeOutline().addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, step5);
  81         InspectorTest.evaluateInPage("clickInner(false)");
  82     }
  83
  84     function step5()
  85     {
  86         InspectorTest.firstElementsTreeOutline().removeEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, step5);
  87         expectSelectedNode("outer");
  88         InspectorTest.completeTest();
  89     }
  90
  91     step1();
  92 }
  93
  94 </script>
  95 </head>
  96
  97 <body onload="runTest()">
  98 <p>Test that Web Inspector can inspect element with <code>pointer-events:none</code>.
  99 </p>
 100 <div id="outer"><div id="inner"></div></div>
 101 </body>
 102 </html>