Skip to content

[cssom-view-1] Add FormControlRange geometry APIs (getClientRects/getBoundingClientRects) #12904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

[cssom-view-1] Add FormControlRange geometry APIs (getClientRects/getBoundingClientRects) #12904

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d4a94e8
initial changes
stephanieyzhang Oct 6, 2025
09c8acb
updates
stephanieyzhang Oct 6, 2025
fd9d120
remove unnecessary sections and add links
stephanieyzhang Oct 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions cssom-view-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ spec:css-borders-4; type:property; text:border-top-width
spec:css-borders-4; type:property; text:border-left-width
spec:cssom-view-1; type:dictionary; text:MouseEventInit
spec:cssom-view-1; type:dfn; for:MediaQueryList; text:media
spec:dom; type:interface; text:FormControlRange
spec:dom; type:method; for:FormControlRange; text:getClientRects()
spec:dom; type:method; for:FormControlRange; text:getBoundingClientRect()
spec:dom; type:dfn; for:FormControlRange; text:value string
</pre>

<style>
Expand Down Expand Up @@ -2044,6 +2048,73 @@ Note: The {{DOMRect}} object returned by {{Range/getBoundingClientRect()}} is no
range-bounding-client-rect-with-display-contents.html
</wpt>

<h2 id=extensions-to-the-formcontrolrange-interface> Extensions to the {{FormControlRange}}
Interface</h2>

This section defines {{FormControlRange/getClientRects()}} and
{{FormControlRange/getBoundingClientRect()}} for {{FormControlRange}}. They mirror {{Range}}’s
{{Range/getClientRects()}} and {{Range/getBoundingClientRect()}}, but operate on the selected
portion of a text control’s {{FormControlRange/value string}}.

The <dfn export for=FormControlRange>associated control</dfn> of a {{FormControlRange}} is the
<code>&lt;textarea></code> or text-supporting <code>&lt;input></code> whose {{FormControlRange/value
string}} the range indexes into.

<p class=note>For consistency with {{Range}}, {{FormControlRange/getClientRects()}} returns an empty
{{DOMRectList}} when the range is {{AbstractRange/collapsed}}.</p>

<div algorithm="getClientRects() for FormControlRange">

The steps for {{FormControlRange/getClientRects()}} are the same as {{Range}}’s
{{Range/getClientRects()}}, except that the rectangles are computed relative to the rendered text
within the control’s {{FormControlRange/value string}}.

<ol>
<li>If the <a>associated control</a> is not [=connected=] or its computed <code>display</code>
is <code>none</code>, return an empty {{DOMRectList}}.</li>

<li>Update style and layout for the <a>associated control</a>.</li>

<li>Let <var>value length</var> be the current length of the <a>associated control</a>’s
{{FormControlRange/value string}}.</li>

<li>Let <var>start</var> be min(<a>this</a>'s {{AbstractRange/startOffset}}, <var>value length</var>)
and let <var>end</var> be min(<a>this</a>'s {{AbstractRange/endOffset}}, <var>value length</var>).</li>

<li>If <var>start</var> = <var>end</var>, return an empty {{DOMRectList}}.</li>

<li>Let <var>text</var> be the single {{Text}} node that backs the control’s editable value. If
none, return an empty {{DOMRectList}}.</li>

<li>Let <var>r</var> be a {{Range}} whose start is (<var>text</var>, <var>start</var>) and whose
end is (<var>text</var>, <var>end</var>).</li>

<li>Return <var>r</var>.{{Range/getClientRects()}}.</li>
</ol>
</div>

<div algorithm="getBoundingClientRect() for FormControlRange">

The steps for {{FormControlRange/getBoundingClientRect()}} are the same as {{Range}}’s
{{Range/getBoundingClientRect()}}, except that the bounding rectangle is computed relative to the
rendered text within the control’s {{FormControlRange/value string}} .

<ol>
<li>Let <var>rects</var> be the result of {{FormControlRange/getClientRects()}}.</li>

<li>If <var>rects</var> is empty, return a {{DOMRect}} whose {{DOMRect/x}}, {{DOMRect/y}},
{{DOMRect/width}}, and {{DOMRect/height}} members are zero.</li>

<li>Otherwise, return a {{DOMRect}} describing the smallest rectangle that includes every
rectangle in <var>rects</var>, as for {{Range}}’s {{Range/getBoundingClientRect()}}.</li>
</ol>
</div>

<!-- WPT test names will be updated once they have been merged in. -->
<wpt>
FormControlRange-geometry.html
</wpt>

<h2 id=extensions-to-the-mouseevent-interface>Extensions to the {{MouseEvent}} Interface</h2>

Issue: The object IDL fragment redefines some members. Can we resolve this somehow?
Expand Down