[block-in-inline] Fix hit-testing when inline box is not culled
This patch fixes hit-testing block-in-inline when the inline
box is not culled. This issue was originally reported at
crbug.com/1300205, but also affects crrev.com/c/3486321 for
crbug.com/1301136.
Two logic changes are included:
1. Hit-testing should ignore opaque inline boxes. The
|IsOpaque| flag was added in r908729 crrev.com/c/3066831
because inline boxes that wraps block-in-inline are not
visible to layout and paint except some paint effects.
2. r925189 crrev.com/c/3181220 hit-tests block-backgrounds
while in the foreground phase. This resulted ignoring
floats, because floats are between foreground and block
background. https://drafts.csswg.org/css2/#painting-order
This patch reverts the change.
Note that the change 1 does not apply to list-based hit-
testing. This is needed for:
external/wpt/shadow-dom/DocumentOrShadowRoot-prototype-elementFromPoint.html
when the inline with block children is not culled (crrev.com/c/3486321).
Bug: 1300205, 1301136
Change-Id: Ie94df6092fe7d50599ab4f985233cf0dfa968efd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3489020
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Koji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/main@{#975579}
diff --git a/css/CSS2/normal-flow/block-in-inline-hittest-float-002.html b/css/CSS2/normal-flow/block-in-inline-hittest-float-002.html
new file mode 100644
index 0000000..91f8e44
--- /dev/null
+++ b/css/CSS2/normal-flow/block-in-inline-hittest-float-002.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+section {
+ display: flow-root;
+}
+.float {
+ float: left;
+ width: 200px;
+ height: 20px;
+ background: orange;
+}
+.normal {
+ height: 10px;
+ background: blue;
+}
+</style>
+<body>
+ <section>
+ <a href="#">
+ <div>
+ <div class="float"></div>
+ <div class="normal"></div>
+ </div>
+ </a>
+ </section>
+ <section title="with background">
+ <a href="#" style="background: purple">
+ <div>
+ <div class="float"></div>
+ <div class="normal"></div>
+ </div>
+ </a>
+ </section>
+ <section title="with padding">
+ <a href="#" style="padding: 1px">
+ <div>
+ <div class="float"></div>
+ <div class="normal"></div>
+ </div>
+ </a>
+ </section>
+ <section title="floats before block-in-inline">
+ <div class="float"></div>
+ <div>
+ <a href="#">
+ <div class="normal"></div>
+ </a>
+ </div>
+ </section>
+ <section title="floats before block-in-inline with background">
+ <div class="float"></div>
+ <div>
+ <a href="#" style="background: purple">
+ <div class="normal"></div>
+ </a>
+ </div>
+ </section>
+<script>
+document.body.offsetTop;
+for (const section of document.getElementsByTagName('section')) {
+ test(() => {
+ const float_element = section.querySelector('.float');
+ const float_bounds = float_element.getBoundingClientRect();
+ const normal_element = section.querySelector('.normal');
+ const normal_bounds = normal_element.getBoundingClientRect();
+ const x = float_bounds.x + (float_bounds.width / 2);
+ const y = normal_bounds.y + (normal_bounds.height / 2);
+ const result = document.elementFromPoint(x, y);
+ assert_equals(result, float_element);
+ }, section.title);
+}
+</script>
+</body>
