Bug 287510
| Summary: | Hit-testing an element does not take the mask-image's bounds into account | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Estevan Castilho <tevo+webkit> |
| Component: | UI Events | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Normal | CC: | ahmad.saleem792, a_protyasha, karlcow, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | All | ||
| OS: | All | ||
| URL: | https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=13493 | ||
Estevan Castilho
Consider the following:
<div style="width: 64px; height: 64px; mask-image: linear-gradient(white, white)">
<div style="width: 128px; height: 128px; background: rebeccapurple" onclick="alert ('hi!')"></div>
</div>
Visually, the inner element gets clipped by the outer element's mask bounds, and renders as a 64x64 purple block, as it might be expected. Clicking anywhere within the inner element's 128x128 bounds, however, would still dispatch the click event to the child element, even within the masked-out region. Now, even though CSS-MASKING-1 doesn't seem to explicitly specify whether or not pointer events should be dispatched outside of the mask's bounding box (as it does for clips), both Blink and Gecko seem not to, which makes more sense from a user's perspective, I think.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Estevan Castilho
Pull request: https://github.com/WebKit/WebKit/pull/40434
Simon Fraser (smfr)
This behavior is not specified by CSS. There's an open issue: https://github.com/w3c/csswg-drafts/issues/11339
Radar WebKit Bug Importer
<rdar://problem/145087691>
Abrar Rahman Protyasha
This is a dupe of bug 284227. We should await the CSS spec resolution.
*** This bug has been marked as a duplicate of bug 284227 ***