- From: Sanket Joshi via GitHub <sysbot+gh@w3.org>
- Date: Tue, 16 Feb 2021 07:44:12 +0000
- To: public-css-archive@w3.org
Consider the example below:
```
<!DOCTYPE html>
<html>
<head>
<style>
div::highlight(test) {
background-color: red;
}
</style>
</head>
<body>
<div>abd</div>
<input type='button' value='click' onclick='onClick()'>
<script>
let div = document.querySelector('div');
let textNode = div.firstChild;
let range = new StaticRange({startContainer: textNode, startOffset: 1, endContainer: textNode, endOffset: 3});
let highlight = new HighlightRangeGroup(range);
CSS.highlights.set('test', highlight);
function onClick() {
textNode.insertData(2, 'c');
}
</script>
</body>
</html>
```
After the button is clicked and 'c' is inserted, the div will have text "abcd". If the highlight was represented with a live range internally, the range's end offset will become 4 and "bcd" will be painted with the highlight styles. If we were just painting the static range internally, the range endpoints will not change and only "bc" will be highlighted.
--
GitHub Notification of comment by sanketj
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4597#issuecomment-779650816 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 16 February 2021 07:44:14 UTC