Integrate OpaqueRange hooks into text controls (input/textarea) by stephanieyzhang · Pull Request #11741 · whatwg/html

stephanieyzhang · 2025-10-02T20:26:35Z

OpaqueRange is a specialized, live AbstractRange subtype whose boundary points reference internal nodes within host-defined elements (e.g., <input>/<textarea> today, with a path to custom elements in the future). It enables range-based operations over encapsulated content while avoiding exposure of internal DOM nodes.

Explainer: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OpaqueRange/explainer.md
WhatWG discussion: OpaqueRange Interface #11478
Corresponding DOM Spec PR: Add OpaqueRange interface dom#1404
Corresponding CSSOM PRs:
- [cssom-view-1] Define OpaqueRange geometry APIs (getClientRects/getBoundingClientRect) w3c/csswg-drafts#12904
- [css-highlight-api-1] Integrate OpaqueRange into Highlight and highlightsFromPoint w3c/csswg-drafts#13929
At least two implementers are interested (and none opposed):
Tests are written and can be reviewed and commented upon at:
- https://wpt.fyi/results/dom/ranges/tentative?label=master&label=experimental&aligned
- PR to make tests non-tentative: Coming soon
Implementation bugs are filed:
- Chromium: https://issues.chromium.org/issues/421421332
- Gecko: https://bugzilla.mozilla.org/show_bug.cgi?id=1990256
- WebKit: https://bugs.webkit.org/show_bug.cgi?id=299375
Corresponding HTML AAM & ARIA in HTML issues & PRs:
MDN issue is filed: …
The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

/form-control-infrastructure.html ( diff )
/form-elements.html ( diff )
/infrastructure.html ( diff )
/input.html ( diff )

annevk

Where is "supports opaque ranges" defined?

stephanieyzhang · 2026-02-09T08:15:07Z

Where is "supports opaque ranges" defined?

Whoops, forgot to define that 🤦. Added it to the "APIs for the text control selections" section. Let me know if you'd prefer it placed elsewhere as I wasn't sure where the best spot for it was.

The new name makes it explicitly clear that a new range is created each time, as suggested in HTML spec PR discussion: whatwg/html#11741 (comment) Updates the OpaqueRangeCreation mixin and IDL, all implementing classes (TextControlElement, HTMLInputElement), and test files. Low-Coverage-Reason: COVERAGE_UNDERREPORTED Bug: 421421332 Change-Id: Iec9572c470443e85d2a38ecd978bd7c78e8c5a86

The new name makes it explicitly clear that a new range is created each time, as suggested in HTML spec PR discussion: whatwg/html#11741 (comment) Updates the OpaqueRangeCreation mixin and IDL, all implementing classes (TextControlElement, HTMLInputElement), and test files. Low-Coverage-Reason: COVERAGE_UNDERREPORTED Bug: 421421332 Change-Id: Iec9572c470443e85d2a38ecd978bd7c78e8c5a86 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7595653 Reviewed-by: Dan Clark <daniec@microsoft.com> Commit-Queue: Stephanie Zhang <stephanie.zhang@microsoft.com> Reviewed-by: Mason Freed <masonf@chromium.org> Reviewed-by: Ana Sollano Kim <ansollan@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1591036}

…eateValueRange(), a=testonly Automatic update from web-platform-tests Rename OpaqueRange getValueRange() to createValueRange() The new name makes it explicitly clear that a new range is created each time, as suggested in HTML spec PR discussion: whatwg/html#11741 (comment) Updates the OpaqueRangeCreation mixin and IDL, all implementing classes (TextControlElement, HTMLInputElement), and test files. Low-Coverage-Reason: COVERAGE_UNDERREPORTED Bug: 421421332 Change-Id: Iec9572c470443e85d2a38ecd978bd7c78e8c5a86 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7595653 Reviewed-by: Dan Clark <daniec@microsoft.com> Commit-Queue: Stephanie Zhang <stephanie.zhang@microsoft.com> Reviewed-by: Mason Freed <masonf@chromium.org> Reviewed-by: Ana Sollano Kim <ansollan@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1591036} -- wpt-commits: 4c5d702b40927803c1024376687a6ca84e877720 wpt-pr: 58079

jnjaeschke · 2026-05-06T12:13:20Z

What is supposed to happen to OpaqueRanges when the text control element becomes display: none? Should the ranges survive a display:none roundtrip, or are they disconnected?
And does creating a range (createValueRange()) on a display:none element even make sense?

annevk · 2026-05-06T13:23:59Z

I think display: none shouldn't impact a range? No other range is impacted by styling, why would this one be?

jnjaeschke · 2026-05-06T14:21:04Z

(speaking with an implementers hat on) it has implications to implementations if the frame gets destroyed (and re-created), if destroying the frame implicitly destroys the internal text node that is referred to in the opaque range.
My interpretation would be that it's implicitly expected that the range survives, but I wonder if this should be written somewhere explicitly.

annevk · 2026-05-08T10:08:26Z

I see. I think we should make sure that the specification doesn't have such assumptions anywhere and then just add explicit test coverage.

into stzhang-addfcr

stephanieyzhang · 2026-05-12T18:26:04Z

Good call on display:none. Will add WPT coverage for it.

Ensures OpaqueRanges survive display:none (frame destruction) and that programmatic updates still adjust offsets while hidden. Discussion: whatwg/html#11741 Bug: 421421332 Change-Id: Ie554827f61a7c71d23e14f2efe773297a2474d26 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7865322 Reviewed-by: Ana Sollano Kim <ansollan@microsoft.com> Commit-Queue: Stephanie Zhang <stephanie.zhang@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1636570}

…e, a=testonly Automatic update from web-platform-tests Add OpaqueRange display:none WPT coverage Ensures OpaqueRanges survive display:none (frame destruction) and that programmatic updates still adjust offsets while hidden. Discussion: whatwg/html#11741 Bug: 421421332 Change-Id: Ie554827f61a7c71d23e14f2efe773297a2474d26 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7865322 Reviewed-by: Ana Sollano Kim <ansollan@microsoft.com> Commit-Queue: Stephanie Zhang <stephanie.zhang@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1636570} -- wpt-commits: c31c686d5e2abb4b21f8314572f00c277eae6a1b wpt-pr: 60192

…e, a=testonly Automatic update from web-platform-tests Add OpaqueRange display:none WPT coverage Ensures OpaqueRanges survive display:none (frame destruction) and that programmatic updates still adjust offsets while hidden. Discussion: whatwg/html#11741 Bug: 421421332 Change-Id: Ie554827f61a7c71d23e14f2efe773297a2474d26 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7865322 Reviewed-by: Ana Sollano Kim <ansollanmicrosoft.com> Commit-Queue: Stephanie Zhang <stephanie.zhangmicrosoft.com> Cr-Commit-Position: refs/heads/main{#1636570} -- wpt-commits: c31c686d5e2abb4b21f8314572f00c277eae6a1b wpt-pr: 60192 UltraBlame original commit: 1b4462ad416012a97836d1bbd88a8bde1b092e2c

stephanieyzhang added 2 commits October 2, 2025 15:25

very rough draft

bd9b54e

undo whitespace

accbe23

stephanieyzhang changed the title ~~Add FormControlRange hooks~~ [DO NOT REVIEW] FormControlRange hooks Oct 2, 2025

additional hooks

4fbc254

stephanieyzhang changed the title ~~[DO NOT REVIEW] FormControlRange hooks~~ Integrate FormControlRange hooks into text controls (input/textarea) Oct 9, 2025

This was referenced Oct 9, 2025

[cssom-view-1] Define OpaqueRange geometry APIs (getClientRects/getBoundingClientRect) w3c/csswg-drafts#12904

Draft

Add OpaqueRange interface whatwg/dom#1404

Open

stephanieyzhang mentioned this pull request Oct 16, 2025

OpaqueRange Interface #11478

Open

stephanieyzhang added 4 commits October 16, 2025 15:47

keep original formatting

96d51de

cleaning up textarea hooks

3155a15

remove unnecessary text control block

90163c4

update mutation alg

7ed3fb7

leotlee mentioned this pull request Nov 6, 2025

WHATUP at TPAC 2025: agenda suggestions #11711

Closed

stephanieyzhang changed the title ~~Integrate FormControlRange hooks into text controls (input/textarea)~~ Integrate PlainTextRange hooks into text controls (input/textarea) Dec 4, 2025

stephanieyzhang added 4 commits December 4, 2025 08:38

rename to PlainTextRange + tpac changes pt 1

202f881

rename to PlainTextRange + tpac changes pt 2

dfe8b08

updated to OpaqueRange + moved update range steps from dom spec

2eef616

Merge branch 'whatwg:main' into stzhang-addfcr

0cf1cbf

stephanieyzhang changed the title ~~Integrate PlainTextRange hooks into text controls (input/textarea)~~ Integrate OpaqueRange hooks into text controls (input/textarea) Jan 14, 2026

stephanieyzhang added 2 commits January 14, 2026 13:04

Add getValueRange

5aa605f

specify supported input types

6b6108c

annevk reviewed Jan 15, 2026

View reviewed changes

Comment thread source Outdated

Comment thread source Outdated

Comment thread source Outdated

Comment thread source Outdated

Comment thread source Outdated

add supports opaque range def + reword of range updates

e772b1a

annevk reviewed Feb 9, 2026

View reviewed changes

Comment thread source Outdated

update to use internal containers instead of opaque range string

568cff3

smaug---- reviewed Feb 10, 2026

View reviewed changes

Comment thread source Outdated

This was referenced Mar 13, 2026

New feature ID for OpaqueRange web-platform-dx/web-features#3863

Closed

Other Spec Review: OpaqueRange w3ctag/design-reviews#1206

Closed

stephanieyzhang marked this pull request as ready for review April 23, 2026 15:57

Add auto-disconnect for input and textarea

7ceff82

stephanieyzhang mentioned this pull request Apr 28, 2026

Add disconnect() method MicrosoftEdge/MSEdgeExplainers#1310

Merged

keithamus suggested changes Apr 30, 2026

View reviewed changes

Comment thread source Outdated

Comment thread source Outdated

Comment thread source

Comment thread source Outdated

Comment thread source Outdated

Comment thread source

Comment thread source

stephanieyzhang added 3 commits May 12, 2026 10:41

Merge branch 'whatwg:main' into stzhang-addfcr

40e23bb

reorder updates before input

ba2ae8d

Merge branch 'stzhang-addfcr' of https://github.com/stephanieyzhang/html

1917a27

into stzhang-addfcr

stephanieyzhang mentioned this pull request May 15, 2026

[css-highlight-api-1] Integrate OpaqueRange into Highlight and highlightsFromPoint w3c/csswg-drafts#13929

Open

Merge branch 'whatwg:main' into stzhang-addfcr

1c79fdf

chromium-wpt-export-bot mentioned this pull request May 26, 2026

Add OpaqueRange display:none WPT coverage web-platform-tests/wpt#60192

Merged

stephanieyzhang mentioned this pull request May 28, 2026

OpaqueRange: cross-post from whatwg/html#11478 for DOM community input whatwg/dom#1468

Open

Conversation

stephanieyzhang commented Oct 2, 2025 • edited by pr-preview Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

annevk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

stephanieyzhang commented Feb 9, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jnjaeschke commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

annevk commented May 6, 2026

Uh oh!

jnjaeschke commented May 6, 2026

Uh oh!

annevk commented May 8, 2026

Uh oh!

stephanieyzhang commented May 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

6 participants

stephanieyzhang commented Oct 2, 2025 •

edited by pr-preview Bot

Loading

jnjaeschke commented May 6, 2026 •

edited

Loading