mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 13:18:45 +02:00
0daf2d379a
Automatic update from web-platform-tests Perform flexbox child hit testing by testing all children atomically When two child elements of a flexbox overlap (for example, due to negative margins), the element drawn in the foreground may not actually capture the hit if the element underneath it is hit-tested in an earlier phase (e.g. foreground before child block background), despite being occluded. This is because painting of flexbox children is done atomically (all phases at once). This change makes hit testing atomic as well, in accordance with the spec [1]. [1] https://www.w3.org/TR/css-flexbox-1/#painting Bug: 844505 Change-Id: Iceab80b42f19488dcb59565ea3c0ce40d48c483b Reviewed-on: https://chromium-review.googlesource.com/c/1388206 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Christian Biesinger <cbiesinger@chromium.org> Commit-Queue: Andrew Comminos <acomminos@fb.com> Cr-Commit-Position: refs/heads/master@{#621516} -- wpt-commits: 676446fdc0707f207a4ef19813e9177355c5d373 wpt-pr: 14652
43 lines
1.3 KiB
HTML
43 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="author" title="Andrew Comminos" href="mailto:acomminos@fb.com" />
|
|
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
#container {
|
|
width: 600px;
|
|
display: flex;
|
|
}
|
|
|
|
#left {
|
|
width: 300px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
background: rgba(200, 200, 200, 0.8);
|
|
}
|
|
|
|
#right {
|
|
width: 300px;
|
|
background-color: rgba(0, 128, 0, 0.8);
|
|
margin-left: -100px;
|
|
}
|
|
</style>
|
|
<div id="container">
|
|
<a id="left" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a>
|
|
<div id="right"></div>
|
|
</div>
|
|
<div id="log"></div>
|
|
<script>
|
|
test(function(t)
|
|
{
|
|
const container = document.querySelector('#container');
|
|
// Target the intersection of the two child elements.
|
|
// The occluded link should not be clickable.
|
|
const x = container.offsetLeft + 250;
|
|
const y = container.offsetTop + 5;
|
|
|
|
var element = document.elementFromPoint(x, y);
|
|
assert_equals(element.nodeName, 'DIV');
|
|
assert_equals(element.id, 'right');
|
|
}, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: negative margin case (crbug.com/844505)");
|
|
</script>
|