| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| #container { |
| display: inline-block; |
| background-color: black; |
| } |
| #roundedImage { |
| width: 200px; |
| height: 200px; |
| border-radius: 100px; |
| background-color: blue; |
| border: 50px solid orange; |
| display: block; |
| } |
| #roundedImage:hover { |
| border-color: green; |
| background-color: green; |
| } |
| </style> |
| <body> |
| <p>The border radius clip should be respected when hit testing images.</p> |
| <div id="container"> |
| <img id="roundedImage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="> |
| </div> |
| </body> |
| <script> |
| test(function(t) |
| { |
| var rect = roundedImage.getBoundingClientRect(); |
| var x = rect.left; |
| var y = rect.top; |
| |
| // At top-left corner, outside the outer border radius. |
| assert_equals(document.elementFromPoint(x + 20, y + 20).id, "container"); |
| |
| // At top-left corner, inside outer border radius. |
| assert_equals(document.elementFromPoint(x + 35, y + 35).id, "roundedImage"); |
| assert_equals(document.elementFromPoint(x + 60, y + 60).id, "roundedImage"); |
| |
| // Fully inside border. |
| assert_equals(document.elementFromPoint(x + 68, y + 68).id, "roundedImage"); |
| assert_equals(document.elementFromPoint(x + 80, y + 80).id, "roundedImage"); |
| assert_equals(document.elementFromPoint(x + 230, y + 230).id, "roundedImage"); |
| |
| // At bottom-right corner, insider inner border radius. |
| assert_equals(document.elementFromPoint(x + 240, y + 240).id, "roundedImage"); |
| assert_equals(document.elementFromPoint(x + 265, y + 265).id, "roundedImage"); |
| |
| // At bottom-right corner, outside the outer border radius. |
| assert_equals(document.elementFromPoint(x + 275, y + 275).id, "container"); |
| }, "The border radius clip should be respected when hit testing images."); |
| </script> |
