third_party/WebKit/LayoutTests/fast/borders/border-radius-hittest.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3 <script>
   4 var x, y;
   5
   6 function test() {
   7     var innerBox = document.getElementById('roundedBox');
   8     var rect = innerBox.getBoundingClientRect();
   9     x = rect.left;
  10     y = rect.top;
  11     // At top-left corner.
  12     shouldBe("document.elementFromPoint(x + 5, y + 5).id", "'container'");
  13     // At top-right corner.
  14     shouldBe("document.elementFromPoint(x + 195, y + 5).id", "'container'");
  15     // At bottom-left corner.
  16     shouldBe("document.elementFromPoint(x + 5, y + 195).id", "'container'");
  17     // At bottom-right corner.
  18     shouldBe("document.elementFromPoint(x + 195, y + 195).id", "'container'");
  19     // At the center.
  20     shouldBe("document.elementFromPoint(x + 100, y + 100).id", "'roundedBox'");
  21 }
  22 </script>
  23 <style>
  24     #container {
  25         width: 200px;
  26         height: 200px;
  27         background-color: lightgray;
  28     }
  29     #roundedBox {
  30         width: 200px;
  31         height: 200px;
  32         border-radius: 50px;
  33         background-color: lightgreen;
  34     }
  35 </style>
  36 <body onload="test()">
  37     <p>This test checks that div block should not get events on clicking outside the rounded border but within the bounding box of the block.</p>
  38     <div id="container">
  39         <div id="roundedBox"></div>
  40     </div>
  41     <div id="console"></div>
  42 </body>