third_party/WebKit/LayoutTests/fast/overflow/hit-test-overflow-hidden-with-box-shadow.html

   1 <!DOCTYPE html>
   2 <style>
   3 #shadow
   4 {
   5     overflow: hidden;
   6     position: absolute;
   7     box-shadow: 0 0 50px #000;
   8     height: 100px;
   9     width: 100px;
  10 }
  11 #content
  12 {
  13     display: block;
  14     height: 200px;
  15     width: 200px;
  16     background: rgba(0,255,0,0.3);
  17 }
  18 </style>
  19 <script src="../../resources/js-test.js"></script>
  20 <script>
  21 if (window.testRunner)
  22     testRunner.dumpAsText();
  23
  24 function click(x, y)
  25 {
  26     if (window.eventSender) {
  27         eventSender.mouseMoveTo(x, y);
  28         eventSender.mouseDown();
  29         eventSender.mouseUp();
  30     }
  31 }
  32
  33 function test(name, fn)
  34 {
  35     debug("<br>" + name);
  36     fn();
  37 }
  38
  39 description("This test checks that div block should not get events on clicking the shadow outside div block.");
  40
  41 function runTests()
  42 {
  43
  44     test("Focus should remain in the textarea", function() {
  45         var textarea = document.getElementById("content");
  46         var rect = textarea.getBoundingClientRect();
  47         click(rect.left + 5, rect.top + 5);
  48         shouldBeEqualToString("document.activeElement.tagName", "TEXTAREA");
  49     });
  50
  51     // Click on the shadow at right of the div block.
  52     test("Focus should move to the body", function() {
  53         var shadow = document.getElementById("shadow");
  54         var rect = shadow.getBoundingClientRect();
  55         var x = rect.left + shadow.offsetWidth + 5;
  56         var y = rect.top + 5;
  57         click(x, y);
  58         shouldBeEqualToString("document.activeElement.tagName", "BODY");
  59     });
  60
  61     // Focus on the textarea to prepare for the next test.
  62     test("Focus should remain in the textarea", function() {
  63         var textarea = document.getElementById("content");
  64         var rect = textarea.getBoundingClientRect();
  65         click(rect.left + 5, rect.top + 5);
  66         shouldBeEqualToString("document.activeElement.tagName", "TEXTAREA");
  67     });
  68
  69     // Click on the shadow at bottom of the div block.
  70     test("Focus should move to the body", function() {
  71         var shadow = document.getElementById("shadow");
  72         var rect = shadow.getBoundingClientRect();
  73         var x = rect.left + 5;
  74         var y = rect.top + shadow.offsetHeight + 5;
  75         click(x, y);
  76         shouldBeEqualToString("document.activeElement.tagName", "BODY");
  77     });
  78
  79 }
  80 </script>
  81
  82 <body onload="runTests();">
  83 <div id="shadow">
  84     <textarea id="content"></textarea>
  85 </div>
  86 </body>