Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-07-23 07:13:52 +01:00
Code Issues Projects Releases Packages Wiki Activity

Make hit tests against box shadows always fail.

Browse source 
Closes #9268.
This commit is contained in:
Patrick Walton 2016-01-25 16:30:04 -08:00
parent d34641dc3f
commit 32a68a43ec
2 changed files with 47 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

39
components/gfx/display_list/mod.rs
View file

@ -390,23 +390,30 @@ impl DisplayList {
return; return;
} }
if let DisplayItem::BorderClass(ref border) = *item { match *item {
// If the point is inside the border, it didn't hit the border! DisplayItem::BorderClass(ref border) => {
let interior_rect = // If the point is inside the border, it didn't hit the border!
Rect::new( let interior_rect =
Point2D::new(border.base.bounds.origin.x + Rect::new(
border.border_widths.left, Point2D::new(border.base.bounds.origin.x +
border.base.bounds.origin.y + border.border_widths.left,
border.border_widths.top), border.base.bounds.origin.y +
Size2D::new(border.base.bounds.size.width - border.border_widths.top),
(border.border_widths.left + Size2D::new(border.base.bounds.size.width -
border.border_widths.right), (border.border_widths.left +
border.base.bounds.size.height - border.border_widths.right),
(border.border_widths.top + border.base.bounds.size.height -
border.border_widths.bottom))); (border.border_widths.top +
if interior_rect.contains(&point) { border.border_widths.bottom)));
return; if interior_rect.contains(&point) {
return;
}
} }
DisplayItem::BoxShadowClass(_) => {
// Box shadows can never be hit.
return
}
_ => {}
} }
// We found a hit! // We found a hit!

24
tests/html/shadow-hit-test.html Normal file
View file

@ -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>