diff options
| -rw-r--r-- | components/gfx/display_list/mod.rs | 39 | ||||
| -rw-r--r-- | tests/html/shadow-hit-test.html | 24 |
2 files changed, 47 insertions, 16 deletions
diff --git a/components/gfx/display_list/mod.rs b/components/gfx/display_list/mod.rs index e7d24843f25..b6565753f36 100644 --- a/components/gfx/display_list/mod.rs +++ b/components/gfx/display_list/mod.rs @@ -390,23 +390,30 @@ impl DisplayList { return; } - if let DisplayItem::BorderClass(ref border) = *item { - // If the point is inside the border, it didn't hit the border! - let interior_rect = - Rect::new( - Point2D::new(border.base.bounds.origin.x + - border.border_widths.left, - border.base.bounds.origin.y + - border.border_widths.top), - Size2D::new(border.base.bounds.size.width - - (border.border_widths.left + - border.border_widths.right), - border.base.bounds.size.height - - (border.border_widths.top + - border.border_widths.bottom))); - if interior_rect.contains(&point) { - return; + match *item { + DisplayItem::BorderClass(ref border) => { + // If the point is inside the border, it didn't hit the border! + let interior_rect = + Rect::new( + Point2D::new(border.base.bounds.origin.x + + border.border_widths.left, + border.base.bounds.origin.y + + border.border_widths.top), + Size2D::new(border.base.bounds.size.width - + (border.border_widths.left + + border.border_widths.right), + border.base.bounds.size.height - + (border.border_widths.top + + border.border_widths.bottom))); + if interior_rect.contains(&point) { + return; + } } + DisplayItem::BoxShadowClass(_) => { + // Box shadows can never be hit. + return + } + _ => {} } // We found a hit! diff --git a/tests/html/shadow-hit-test.html b/tests/html/shadow-hit-test.html new file mode 100644 index 00000000000..fc9e5d31d7e --- /dev/null +++ b/tests/html/shadow-hit-test.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Clicking under the shadow should still activate the green div. --> +<style> + .green { + background: green; + position: absolute; + top: 45px; + left: 170px; + width: 100px; + height: 50px; + } + .red { + background: red; + position: absolute; + top: 20px; + left: 20px; + width: 100px; + height: 100px; + box-shadow: 100px 0 0 rgba(0,0,0,0.1); + transform: translateX(1px); + } +</style> +<div class="green" onclick="console.log('You clicked me!')"></div> +<div class="red"></div> |