1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-28 11:15:10 +00:00

LibWeb: Bring HTMLElement.offset{Left,Top,Parent} closer to spec

(Or rather, bring offsetLeft and offsetTop closer to spec, and implement
the previously-missing offsetParent)

This makes mouse inputs on https://nerget.com/fluidSim/ work properly.
This commit is contained in:
Andreas Kling 2023-12-10 13:47:16 +01:00
parent 43e9dc0500
commit cfe9577b48
5 changed files with 143 additions and 14 deletions

View file

@ -0,0 +1,21 @@
nodeName: CANVAS
offsetTop: 0
offsetLeft: 0
offsetParent: [object HTMLTableCellElement]
nodeName: TD
offsetTop: 2
offsetLeft: 2
offsetParent: [object HTMLTableElement]
nodeName: TABLE
offsetTop: 100
offsetLeft: 50
offsetParent: [object HTMLBodyElement]
nodeName: BODY
offsetTop: 0
offsetLeft: 0
offsetParent: null

View file

@ -0,0 +1,26 @@
<style>
* {
margin: 0;
padding: 0;
}
table {
position: relative;
top: 100px;
left: 50px;
}
</style><table><tr><td><canvas id="c"></canvas></td></tr></table>
<script src="../include.js"></script>
<script>
test(() => {
const c = document.getElementById("c");
println("");
for (let n = c; n; n = n.offsetParent) {
println("nodeName: " + n.nodeName);
println("offsetTop: " + n.offsetTop);
println("offsetLeft: " + n.offsetLeft);
println("offsetParent: " + n.offsetParent);
println("");
}
});
</script>

View file

@ -155,30 +155,111 @@ String HTMLElement::inner_text()
return MUST(builder.to_string());
}
// // https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsettop
int HTMLElement::offset_top() const
// https://www.w3.org/TR/cssom-view-1/#dom-htmlelement-offsetparent
JS::GCPtr<DOM::Element> HTMLElement::offset_parent() const
{
// NOTE: Ensure that layout is up-to-date before looking at metrics.
const_cast<DOM::Document&>(document()).update_layout();
if (is<HTML::HTMLBodyElement>(this) || !layout_node() || !parent_element() || !parent_element()->layout_node())
return 0;
auto position = layout_node()->box_type_agnostic_position();
auto parent_position = parent_element()->layout_node()->box_type_agnostic_position();
return position.y().to_int() - parent_position.y().to_int();
// 1. If any of the following holds true return null and terminate this algorithm:
// - The element does not have an associated CSS layout box.
// - The element is the root element.
// - The element is the HTML body element.
// - The elements computed value of the position property is fixed.
if (!layout_node())
return nullptr;
if (is_document_element())
return nullptr;
if (is<HTML::HTMLBodyElement>(*this))
return nullptr;
if (layout_node()->is_fixed_position())
return nullptr;
// 2. Return the nearest ancestor element of the element for which at least one of the following is true
// and terminate this algorithm if such an ancestor is found:
// - The computed value of the position property is not static.
// - It is the HTML body element.
// - The computed value of the position property of the element is static
// and the ancestor is one of the following HTML elements: td, th, or table.
for (auto* ancestor = parent_element(); ancestor; ancestor = ancestor->parent_element()) {
if (!ancestor->layout_node())
continue;
if (ancestor->layout_node()->is_positioned())
return const_cast<Element*>(ancestor);
if (is<HTML::HTMLBodyElement>(*ancestor))
return const_cast<Element*>(ancestor);
if (!ancestor->layout_node()->is_positioned() && ancestor->local_name().is_one_of(HTML::TagNames::td, HTML::TagNames::th, HTML::TagNames::table))
return const_cast<Element*>(ancestor);
}
VERIFY_NOT_REACHED();
}
// https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetleft
int HTMLElement::offset_left() const
// https://www.w3.org/TR/cssom-view-1/#dom-htmlelement-offsettop
int HTMLElement::offset_top() const
{
// 1. If the element is the HTML body element or does not have any associated CSS layout box
// return zero and terminate this algorithm.
if (is<HTML::HTMLBodyElement>(*this))
return 0;
// NOTE: Ensure that layout is up-to-date before looking at metrics.
const_cast<DOM::Document&>(document()).update_layout();
if (is<HTML::HTMLBodyElement>(this) || !layout_node() || !parent_element() || !parent_element()->layout_node())
if (!layout_node())
return 0;
// 2. If the offsetParent of the element is null
// return the y-coordinate of the top border edge of the first CSS layout box associated with the element,
// relative to the initial containing block origin,
// ignoring any transforms that apply to the element and its ancestors, and terminate this algorithm.
auto offset_parent = this->offset_parent();
if (!offset_parent || !offset_parent->layout_node()) {
auto position = layout_node()->box_type_agnostic_position();
return position.y().to_int();
}
// 3. Return the result of subtracting the y-coordinate of the top padding edge
// of the first box associated with the offsetParent of the element
// from the y-coordinate of the top border edge of the first box associated with the element,
// relative to the initial containing block origin,
// ignoring any transforms that apply to the element and its ancestors.
auto offset_parent_position = offset_parent->layout_node()->box_type_agnostic_position();
auto position = layout_node()->box_type_agnostic_position();
auto parent_position = parent_element()->layout_node()->box_type_agnostic_position();
return position.x().to_int() - parent_position.x().to_int();
return position.y().to_int() - offset_parent_position.y().to_int();
}
// https://www.w3.org/TR/cssom-view-1/#dom-htmlelement-offsetleft
int HTMLElement::offset_left() const
{
// 1. If the element is the HTML body element or does not have any associated CSS layout box return zero and terminate this algorithm.
if (is<HTML::HTMLBodyElement>(*this))
return 0;
// NOTE: Ensure that layout is up-to-date before looking at metrics.
const_cast<DOM::Document&>(document()).update_layout();
if (!layout_node())
return 0;
// 2. If the offsetParent of the element is null
// return the x-coordinate of the left border edge of the first CSS layout box associated with the element,
// relative to the initial containing block origin,
// ignoring any transforms that apply to the element and its ancestors, and terminate this algorithm.
auto offset_parent = this->offset_parent();
if (!offset_parent || !offset_parent->layout_node()) {
auto position = layout_node()->box_type_agnostic_position();
return position.x().to_int();
}
// 3. Return the result of subtracting the x-coordinate of the left padding edge
// of the first CSS layout box associated with the offsetParent of the element
// from the x-coordinate of the left border edge of the first CSS layout box associated with the element,
// relative to the initial containing block origin,
// ignoring any transforms that apply to the element and its ancestors.
auto offset_parent_position = offset_parent->layout_node()->box_type_agnostic_position();
auto position = layout_node()->box_type_agnostic_position();
return position.x().to_int() - offset_parent_position.x().to_int();
}
// https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetwidth

View file

@ -44,6 +44,7 @@ public:
int offset_left() const;
int offset_width() const;
int offset_height() const;
JS::GCPtr<Element> offset_parent() const;
bool cannot_navigate() const;

View file

@ -37,7 +37,7 @@ interface HTMLElement : Element {
// FIXME: [CEReactions] attribute DOMString? popover;
// https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface
// FIXME: readonly attribute Element? offsetParent;
readonly attribute Element? offsetParent;
readonly attribute long offsetTop;
readonly attribute long offsetLeft;
readonly attribute long offsetWidth;