| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| #container { |
| width: 200px; |
| height: 200px; |
| background-color: lightgray; |
| } |
| #roundedBox { |
| width: 200px; |
| height: 200px; |
| border-radius: 50px; |
| background-color: lightgreen; |
| } |
| </style> |
| <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> |
| <div id="container"> |
| <div id="roundedBox"></div> |
| </div> |
| <script> |
| test(function(t) { |
| var innerBox = document.getElementById('roundedBox'); |
| var rect = innerBox.getBoundingClientRect(); |
| var x = rect.left; |
| var y = rect.top; |
| // At top-left corner. |
| assert_equals(document.elementFromPoint(x + 5, y + 5).id, "container"); |
| // At top-right corner. |
| assert_equals(document.elementFromPoint(x + 195, y + 5).id, "container"); |
| // At bottom-left corner. |
| assert_equals(document.elementFromPoint(x + 5, y + 195).id, "container"); |
| // At bottom-right corner. |
| assert_equals(document.elementFromPoint(x + 195, y + 195).id, "container"); |
| // At the center. |
| assert_equals(document.elementFromPoint(x + 100, y + 100).id, "roundedBox"); |
| }, "Test that a block with border radius should not get events on clicking outside the rounded border but within the bounding box of the block."); |
| </script> |
