system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-15 12:23:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Do paint-order traversal in Document::elements_from_point()

Browse source 
Elements are now collected according to paint order as spec says,
replacing the depth-first traversal of the paint tree with hit-testing
on each box.

This change resolves a FIXME in an existing test and adds a new
previously non-working test.
This commit is contained in:
Aliaksandr Kalenik 2024-02-13 21:34:46 +01:00 committed by Andreas Kling
parent 9c99182b1e
commit 9d2809146f
7 changed files with 68 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Tests/LibWeb/Text/expected/DOM/Elements-from-point-2.txt Normal file
View file

@ -0,0 +1,4 @@
hello <DIV id="c" >
<DIV id="b" >
<DIV id="a" >
<HTML >

1
Tests/LibWeb/Text/expected/DOM/Elements-from-point-3.txt Normal file
View file

@ -0,0 +1 @@
Some text Elements at point 30, 20: p < div < body < html

6
Tests/LibWeb/Text/expected/DOM/Elements-from-point.txt
View file

@ -3,11 +3,9 @@ Coordinates outside the viewport return empty array: true
== Elements at (500, 10) ==
<DIV id="large-box" >
<HTML >
== FIXME: Elements at (550, 60) ==
== Elements at (550, 60) ==
<DIV id="small-box" >
<PRE id="out" >
<PRE id="out" >
<DIV id="large-box" >
<DIV id="small-box" >
<PRE id="out" >
<BODY >
<HTML >

37
Tests/LibWeb/Text/input/DOM/Elements-from-point-2.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
#a {
background-color: magenta;
z-index: 1;
transform: translate(110px, 10px);
}
#b {
background-color: mediumaquamarine;
z-index: 2;
transform: translate(120px, 20px);
}
#c {
background-color: greenyellow;
z-index: 3;
transform: translate(130px, 30px);
}
</style>
<div id="a" class="box"></div>
<div id="b" class="box"></div>
<div id="c" class="box">hello</div>
<script src="../include.js"></script>
<script>
test(() => {
for (const element of document.elementsFromPoint(150, 50)) {
printElement(element)
}
});
</script>

18
Tests/LibWeb/Text/input/DOM/Elements-from-point-3.html Normal file
View file

@ -0,0 +1,18 @@
<div>
<p>Some text</p>
</div>
<p>Elements at point 30, 20:</p>
<div id="output"></div>
<script src="../include.js"></script>
<script>
test(() => {
let output = document.getElementById("output");
let elements = document.elementsFromPoint(30, 20);
elements.forEach((elt, i) => {
output.textContent += elt.localName;
if (i < elements.length - 1) {
output.textContent += " < ";
}
});
});
</script>

8
Tests/LibWeb/Text/input/DOM/Elements-from-point.html
View file

@ -32,15 +32,9 @@
for (let elem of document.elementsFromPoint(500, 10)) {
printElement(elem);
}
println("== FIXME: Elements at (550, 60) ==")
println("== Elements at (550, 60) ==")
for (let elem of document.elementsFromPoint(550, 60)) {
printElement(elem);
}
// FIXME: 550, 60 is supposed to print the following, but the algorithm is wrong.
// <DIV id="small-box" >
// <DIV id="large-box" >
// <PRE id="out" >
// <BODY >
// <HTML >
});
</script>

14
Userland/Libraries/LibWeb/DOM/Document.cpp
View file

@ -3829,16 +3829,12 @@ Vector<JS::NonnullGCPtr<Element>> Document::elements_from_point(double x, double
// 3. For each box in the viewport, in paint order, starting with the topmost box, that would be a target for
// hit testing at coordinates x,y even if nothing would be overlapping it, when applying the transforms that
// apply to the descendants of the viewport, append the associated element to sequence.
// FIXME: Paintable box tree order is not the same as paint order. We need a helper to traverse the paint tree in
// paint order with a custom callback.
if (auto const* paintable_box = this->paintable_box(); paintable_box) {
paintable_box->for_each_in_inclusive_subtree_of_type<Painting::PaintableBox>([&](auto& paintable_box) {
if (auto result = paintable_box.hit_test(position, Painting::HitTestType::Exact); result.has_value()) {
if (auto* dom_node = result->dom_node(); dom_node && dom_node->is_element())
sequence.append(*static_cast<Element*>(dom_node));
return Painting::TraversalDecision::Continue;
}
return Painting::TraversalDecision::SkipChildrenAndContinue;
(void)paintable_box->hit_test(position, Painting::HitTestType::Exact, [&](Painting::HitTestResult result) {
auto* dom_node = result.dom_node();
if (dom_node && dom_node->is_element())
sequence.append(*static_cast<Element*>(dom_node));
return Painting::TraversalDecision::Continue;
});
}