web-platform-tests / web-platform-tests/interop
OpaqueRange
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 524
- Forks
- 35
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 10
Description
Description
Explainer: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OpaqueRange/explainer.md
The current Range interface methods do not support retrieving or creating ranges that represent the value (rather than the element itself) of <textarea> and <input> elements. As a result, if web developers want to use the getBoundingClientRect() method in a <textarea> or <input> element to position a popup beneath the user's current caret for delivering contextual autocomplete suggestions or marking syntax errors as users type using the Custom Highlight API, they must find workarounds. These workarounds often involve cloning these elements and their styles into <div>s, which is both difficult to maintain and may impact the web application's performance.
OpaqueRange is a new AbstractRange subclass that references spans of encapsulated content within elements whose internal structures are not exposed to authors, like <textarea> and <input>.
See here (discussion) for an example of a rich-input web component that is made possible by OpaqueRange.
Support for OpaqueRange landed in Chrome 152.
Specification
- WHATWG: https://github.com/whatwg/html/issues/11478
- CSSWG: https://github.com/w3c/csswg-drafts/issues/10346
- TPAC 2025 Meeting Minutes: https://www.w3.org/2025/11/11-whatwg-minutes.html
- Design review: https://github.com/w3ctag/design-reviews/issues/1206
web-feature
opaquerange
Test Links
Additional Signals
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the OpaqueRange explainer and the WHATWG HTML and CSSWG issues linked in the description, then inspect the tentative DOM ranges results at the provided WPT link. Add coverage for OpaqueRange behavior on textarea and input values, and verify that the relevant tests pass across the supported implementations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- testing, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100